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通话发出之前提交表格。

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

4 个答案: