Ajax POST表单数据作为GET请求发送

Question

我正在创建一个聊天系统。 我正在通过jquery中的ajax方法发送表单数据。 我的第一个问题是ajax方法未将数据发送到proccess.php，而页面将重定向到其自身。

<div id="chatOutput"></div>
<form id="myform">
    <textarea id="chatInput" name="chatInput"></textarea>
    <input type="submit" id="send" name="send" value="send" />
</form>

和脚本是：

$('#send').click(function () {
    $('#myform').submit();
    $.ajax({
        url: 'process.php',
        type: 'post',
        dataType: 'json',
        data: $('#myform').serialize(),
        success: function () {
            alert("Submitted!"); // for testing
        }
    });
    return false;
});

但脚本无法正常工作，页面刷新，我在地址栏中看到变量及其值（如get方法）。

如果此问题得以解决，process.php将创建一个chat.txt并将来自#chatInput的数据附加到其中。 然后将chat.txt的数据附加到#chatOutput。

追加数据后，div＃chatOutput的大小将更改。 我想固定/指定此div的宽度和高度。 固定大小后，如何滚动到底部以查看最后一次聊天？

Answer 1

编辑您有一个语法错误。 确保你有e.preventDefault（）; 作为事件点击功能的第一件事。 这样，即使以后发生错误，也会阻止默认操作。

$('#send').click( function(e) {
    e.preventDefault(); //disable default action

    $('#myform').submit();
        $.ajax({
            url: 'process.php',
            type: 'post',
            dataType: 'json',
            data: $('#myform').serialize(),
            success: function() {
               alert("Submitted!"); // for testing
            }
        });
    });

    return false; //return something
});

Answer 2

您可以这样做：

$('#myform').submit(function() {
    $.ajax({
        url: 'process.php',
        type: 'post',
        dataType: 'json',
        data: $('#myform').serialize(),
        success: function() {
           alert("Submitted!"); // for testing
        }
    });
    return false;
});

您使用$('#myform').submit(); 它只是以正常方式提交表单，因此之后忽略了ajax等。

另外，将此代码放在表单本身之后或$(function(){ ... });

Answer 3

问题在这里：

$('#myform').submit();

模拟“提交”按钮的单击事件

Answer 4

删除行：

$('#myform').submit();

它是在进行ajax调用之前提交表单的。