1

我对 php、html 和 css 有非常深刻的理解，但我才刚刚开始涉足 javascript 和 jQuery。

我面临的问题是我在页面上有一个表单，我想首先验证它，然后当它通过验证以提交 2 个 ajax 请求时；第一个将数据插入到我的数据库中的表中，第二个在另一个表上运行查询并返回结果。

我已经让后者工作得很好，使用 submitHandler 方法发送 ajax 请求并用它的结果更新我页面上的 div。当我在此之后或之前添加第二个 ajax 调用时，它似乎中断了......

我的问题是在 submitHandler 中有 2 个 ajax 调用是否存在问题，如下所示，如果是这样，正确的方法是什么，甚至是更好的方法？

$("#contactform").validate({
    rules: ...
    submitHandler: function() {
        // First to insert the contact details using input#firstname etc.
        var firstname = $("#firstname").value();
        var lastname = $("#lastname").value();
        var contactString = 'firstname='+ firstname + '&lastname=' + lastname;
        $.ajax({
            type: "POST",
            url: "insertcontact.php",
            data: quoteString,
            success: function(server_response){
                $('#yourquote').html(server_response).show();
            }
        });            
        // Second use width & height submitted from previous page for processquote.php
        var width =  <?php echo json_encode($cleanpost['width']); ?>;
        var height = <?php echo json_encode($cleanpost['height']); ?>;
        var quoteString = 'width='+ width + '&height=' + height;
        $.ajax({
            type: "POST",
            url: "processquote.php",
            data: quoteString,
            success: function(server_response){
                $('#yourquote').html(server_response).show();
            }
        });
    }
});

我正在使用“jquery.validate.js”验证插件。同样，我的目标是，一旦有人在我的表单上输入了有效的详细信息，使用 Ajax 将他们的联系数据插入到数据库中，然后使用上一页上提交的字段查询数据库以检索要显示在页面上的数字结果，而无需刷新。

您能给我的任何指示将不胜感激！

抢

编辑：同时学习 Javascript 和 Jquery 似乎不是一个好主意，我很困惑：如前 2this.value = '';个$(this).val('');变量声明所示，这就是导致问题的原因！无论如何，感谢您的有用帮助，将为您提供帮助。

4

1 回答 1

2

在您的第一次.ajax()调用中，您尝试在data:尚未创建的参数中传递一个值。我相信您想要发送它contactString。

除非您的两个查询相互依赖于按顺序完成，否则您应该能够异步执行它们（基本上在同一时刻）。如果您希望在第一个 AJAX 调用之后发生第二个 AJAX 调用，您始终可以将所有数据参数传递给 insertcontact.php，一旦插入完成，使用您已经传递的值执行 processquote.php。

最后，我想知道您是否打算这样做，但是您的两个 AJAX 调用都会覆盖#yourquoteDOM 元素中的任何内容并显示它。您可能希望提供一个单独的元素来为您的两个请求中的每一个提供响应。也许#yourquoteinserted和#yourquoteprocessed？

编辑：BigRob，从您的评论中听起来好像您想要进行同步 AJAX 查询，请查看您.ajax()调用的 async 属性。这是来自.ajax()文档：

异步布尔值

默认值：真

默认情况下，所有请求都是异步发送的（即默认设置为true）。如果您需要同步请求，请将此选项设置为 false。跨域请求和 dataType: "jsonp" 请求不支持同步操作。请注意，同步请求可能会暂时锁定浏览器，从而在请求处于活动状态时禁用任何操作。

（强调我的）

但是，我对此可能是错误的，但您实际上可能能够从另一个的成功函数中调用一个异步 AJAX 方法。如果它开始看起来对您来说过于复杂，您可能希望将内部调用提取到一个函数中。大概的样子：

$.ajax({url, data:contactString, 
    success: function(server_response) {
        extractedId = server_response; // you can return data many ways
        $.ajax({url2, data:quoteString+"&extra="+extractedId,...
        });
    }
});

如果您通过async:false在第一个 AJAX 调用中进行设置来执行同步调用，那么您可以将结果存储到外部（AJAX 调用）变量中（或者如果这不起作用，则将其临时存储在某个 DOM 元素中）。然后 javascript 将暂停执行并且在第一个返回之前不会触发您的第二个 AJAX 调用。

不过，目前这一切都是假设性的，只是基于我对它应该如何工作的理解。

于 2012-04-20T14:49:05.683 回答