Question

我对php，html＆amp; amp; css但我刚开始潜入javascript＆amp; 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' validation plugin。我的目标是，一旦有人在我的表单上输入了有效的详细信息，使用Ajax将他们的联系人数据插入到数据库中，然后使用在上一页上提交的字段查询数据库以检索要在页面上显示的数字结果，刷新。

你能给我的任何指示都会非常感激！

罗布

编辑：学习Javascript＆amp; Jquery看起来并不是一个好主意，我混淆了：this.value = '';和$(this).val('');如前两个变量声明中所示，这就是导致问题的原因！无论如何，感谢您提供有用的帮助，我们将为您提供帮助。

Answer 1

在您的第一次.ajax()来电中，您试图在data:参数中传递一个尚未创建的值。我相信你想要发送contactString代替。

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

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

编辑：BigRob，从您的评论中听起来好像您想要进行同步AJAX查询，请查看.ajax()电话的异步属性。这来自.ajax() documentation：

async 布尔

默认值：true

默认情况下，所有请求都是异步发送的（默认情况下设置为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,...
        });
    }
});

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

这是现在所有的假设，而且仅仅基于我对它应该如何运作的理解。

使用表单验证submitHandler发送2个AJAX请求？

1 个答案: