想要在codeigniter中的单个表单上调用两个ajax函数 - Want to call two ajax function on a single form in codeigniter

我看到了以下表单，它是通过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",}

您需要在第一个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;
}

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

因此，在您的情况下，可以使用$.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
                }
            });