javascript - 使用 JavaScript 的 Ajax 代码

Question

我在网络编程方面没有任何经验，但我正在测试一个简单的插件来与我的应用程序一起使用。在网页上我显示了多行。每行都有一个用户需要输入的可编辑字段。

一旦他输入，我想启动 PHP 代码来运行 SQL 语句。我最初的尝试成功了，但是 php 脚本的页面被打开了。我希望 php 在后台运行并且用户停留在同一页面上。

在网上查找时，我发现我需要如下内容:

<script>
function DataChanged(mId,mQ){
        document.getElementById('demo').innerHTML = 'Change Id='+mId+'Q='+mQ ;
        $.ajax({
                url: 'submitChange.php?Id=5'
                });

        document.getElementById('demo').innerHTML = 'Arrived here?';
}
</script>

文本字段更改为:

Change Id=...

但是脚本没有运行，文本也没有变成

"Arrived here?"

我单独运行了submitChange.php?Id=5并且它有效，所以我猜测我的错误来自上面的脚本。知道可能出什么问题吗？

Answer 1

jQuery AJAX 是异步的。这意味着您当时正在执行

document.getElementById('demo').innerHTML = '到达这里了吗？';

AJAX 请求尚未完成。请咨询API Documentation来自 jQuery。

你必须这样做:(匿名函数的第一个参数是调用得到的结果)

<script>
function DataChanged(mId,mQ){
        document.getElementById('demo').innerHTML = 'Change Id='+mId+'Q='+mQ ;
        $.ajax({
            url: 'submitChange.php?Id=5'
        }).done(function(result) {
             document.getElementById('demo').innerHTML = 'Arrived here?' + result;
        });
}
</script>

由于您已经在使用 jQuery，为什么不使用它们的选择器而不是 document.getElementById？

<script>
function DataChanged(mId,mQ){
        $('#demo').html('Change Id='+mId+'Q='+mQ);
        $.ajax({
            url: 'submitChange.php?Id=5'
        }).done(function(result) {
             $('#demo').html('Arrived here?' + result);
        });
}
</script>