Question

我在视图中有以下表单，它通过ajax调用提交，从网站搜索某些内容：

        <div id="main_form">
        <?php $attributes = array('name' => 'analyze', 'id' => 'analyze', 'method' => 'POST'); ?>
        <?php echo form_open('user/add_domain', $attributes); ?>
           <div>
              <input class="text" type="text" placeholder="Website URL to review" id="domain" name="domain" value="" />
              <span class="input_bg">client-domain.com</span>
              <input id="submit_btn" type="submit"  class="submit" value="Review Site" />
            </div>

        <?php echo form_close(); ?>
        </div>

我有以下用于提交它的AJAX代码。

            $(document).ready(function () {
            $("#analyze").submit(function () {
                $.ajax({
                    type: "POST",
                    url: "ajax.php",
                    data: $("#analyze").serialize(),
                    beforeSend: function (XMLHttpRequest) {
                        var overlay = $('<div id="overlay"></div>');
                        overlay.appendTo(document.body);
                        $("#overlayimage").css("display", "block");
                    },
                    success: function (data) {
                        location = "<?php echo $root ?>site/" + data;
                    }
                });

                return false;
            });

现在我想要提交上述表单的另一个AJAX函数调用。这将是一个控制器功能，并将记录添加到数据库。所以我需要在一个表单上触发两个AJAX函数。第一个将从站点搜索，第二个将是将记录添加到数据库的控制器/方法

                  $.ajax({
                    type: "POST",
                    url: "controller/method",}

Answer 1

你需要在第一个ajax之后但在返回之前添加第二个ajax调用。

$("#analyze").submit(function () {
    formData = new FormData($("#analyze")[0]);
    $.ajax({
        url: "ajax.php",
        type : 'POST',
        data : formData,
        contentType: false,
        cache: false,
        dataType: 'JSON',
        processData: false, 
        beforeSend: function (XMLHttpRequest) {
            var overlay = $('<div id="overlay"></div>');
            overlay.appendTo(document.body);
            $("#overlayimage").css("display", "block");
        },
        success: function (data) {
            location = "<?php echo $root ?>site/" + data;
        }
    });
            // JUST PUT YOUR SECOND AJAX CALL HERE BEFORE THE RETURN
    $.ajax({
        type: "POST",
        url: getBaseUrl() + "user/add_domain",
        data: formData,
        success: function(data) {
            // do what ever you want after the controller's method finish
        }
    });
    //THE RETURN TO CANCEL THE ACTION FOR THAT FORM AND STOP EVERY THING.
    return false;
});

function getBaseUrl() {
    var l = window.location;
    var base_url = l.protocol + "//" + l.host+ "/" + l.pathname.split('/')[1];
    return base_url;
}

Answer 2

jQuery的AJAX调用支持动作链接，因为它们实现了 promises 。要在其他操作完成后触发操作，您可以使用promise支持的方法，即done()，then()，fail()等。请参阅{{3} }。

所以在你的情况下，你想要实现的目标可以使用$.ajax()返回的承诺来完成：

 $("#analyze").submit(function () {
            var promise = $.ajax({
                type: "POST",
                url: "ajax.php",
                data: $("#analyze").serialize(),
                beforeSend: function (XMLHttpRequest) {
                    var overlay = $('<div id="overlay"></div>');
                    overlay.appendTo(document.body);
                    $("#overlayimage").css("display", "block");
                },
                success: function (data) {
                    location = "<?php echo $root ?>site/" + data;
                }
            });

            promise.done(function(){
                // perform the action after previous has finished
                $.ajax({
                   type: "POST",
                   url: "controller/method"
                });
            });
            return false;
        });

或者，正如@Alex Andre指出的那样，您可以在第一个成功处理程序中添加第二个AJAX调用。如果您想确保您的ajax调用成功，这可能是首选方法，并且一旦成功，您可以继续：

     $.ajax({
                type: "POST",
                url: "ajax.php",
                data: $("#analyze").serialize(),
                beforeSend: function (XMLHttpRequest) {
                    var overlay = $('<div id="overlay"></div>');
                    overlay.appendTo(document.body);
                    $("#overlayimage").css("display", "block");
                },
                success: function (data) {
                    location = "<?php echo $root ?>site/" + data;
                    //second ajax call here
                }
            });

想在codeigniter中的单个表单上调用两个ajax函数

2 个答案: