Question

以下是代码：

<script type="text/javascript">
    $.ajaxSetup ({
        cache: false
    });

    var ajax_load = "<img src='load.gif' alt='Loading...' />";

    $('#create').submit(function() {
        $("#result").html(ajax_load);
        $.get("actions/create.php", { url: longform },
            function(data){
                $('#result').html(data);
            });
        );
    });
</script>

但所有发生的事情都是地址栏中的URL变为：

http://domain.com/?longform=http://www.google.com/&submit=Submit

表格和结果div：

<form name="create" action="" id="create">
    <input type="text" name="longform" /> <input type="submit" name="submit" value="Submit" />
</form>

<div id="result">
results go here
</div>

我是否需要在head部分使用ajax代码？或者这无关紧要..

更新：

我页面上的代码现在看起来像这样：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript"> 
    $.ajaxSetup ({
        cache: false
    });

    var ajax_load = "<img src='img/load.gif' alt='loading...' />";

    $('#create').submit(function() {
        event.preventDefault();
        $("#result").html(ajax_load);
        $.get("actions/create.php", { url: longform },
            function(data){
                $('#result').html(data);
            });
        );
    });
</script> 
</head> 

<body> 
<form name="create" action="" id="create"> 
    <input type="text" name="longform" /> <input type="submit" name="submit" value="Shorten" /> 
</form> 

<div id="result"> 
123
</div>

仍然无法运作。 actions / create.php只需回显一个foobar字符串来测试它。

更新：

我也试过这个：

$('#create').submit(function() {
    var formdata = $(this).serialize();
    $.ajax({
        url:    'actions/create.php',
        data:   formdata,
        success: function(responseText){
                $('#result').html(responseText);
        }
    });
    return false;
});

但它也不起作用..我的htaccess中有什么东西可以搞乱吗？

Answer 1

您

function(data){
    $('#result').html(data);
});

应该是

function(data){
    $('#result').html(data);
}

您需要阻止表单提交操作的默认行为（通过POST提交表单）：

$('#create').submit(function() {
    // ...
    return false;
});

你可以（另外）看看jQuery的.load()-method，它正是你正在做的，但更短。整件事情看起来像这样：

$('#create').submit(function() {
    $("#result").load("actions/create.php", { url: longform });
    return false;
});

Answer 2

submit事件不会发生而是提交但之前，因此您的表单会在执行JavaScript后正常提交。您需要通过从事件处理程序返回false来取消正常提交：

$('#create').submit(function() {
    $("#result").html(ajax_load);
    $.get("actions/create.php", { url: longform },
        function(data){
            $('#result').html(data);
        });
    );
    return false;
});

或者，您可以致电preventDefault。见http://api.jquery.com/event.preventDefault/

Answer 3

好吧，一旦我把所有jQuery下面的表格和结果div ...它工作了。这是多么乏味。

Answer 4

从表单标记

中删除action属性

jQuery表单不起作用

4 个答案: