Ajax 表单提交到两个脚本

Ajax form submitting to two scripts

本文关键字：两个 脚本 表单提交 Ajax      更新时间：2023-09-26

>基本上我有一个表单，我想将变量传递给两个单独的 php 脚本，以便在提交时进行处理。我所做的工作似乎适合我的目的，我只是想知道是否有办法在一个 jquery 脚本中执行此操作，而不必像我所做的那样重复脚本并更改 URL。还是 iv 的方式很好？在谷歌上找不到很多这种用法的例子，但也许我没有搜索正确的东西。另外，如果我正在做一些不好的做法，请告诉我，我对Ajax很陌生，我遵循的每个教程似乎都以不同的方式做事。

<script>
$(document).ready(function(){
    $('#sform').submit(function(){
        // show that something is loading
        $('#response').html("<b>Loading response...</b>");
        /*
         * 'post_receiver.php' - where you will pass the form data
         * $(this).serialize() - to easily read form data
         * function(data){... - data contains the response from post_receiver.php
         */
        $.ajax({
            type: 'POST',
            url: 'move_to_lease.php', 
            data: $(this).serialize()
        })

        .done(function(data){
            // show the response
            $('#response').html(data);
        })

        .fail(function() {
            // just in case posting your form failed
            alert( "Posting failed." );
        });
        // to prevent refreshing the whole page page
        return false;
    });
});
</script>
<script>
$(document).ready(function(){
    $('#sform').submit(function(){
        // show that something is loading
        $('#txtHint').html("<b>Loading response...</b>");
        /*
         * 'post_receiver.php' - where you will pass the form data
         * $(this).serialize() - to easily read form data
         * function(data){... - data contains the response from post_receiver.php
         */
        $.ajax({
            type: 'POST',
            url: 'show_lease_sub.php', 
            data: $(this).serialize()
        })
        .done(function(data){
            // show the response
            $('#txtHint').html(data);
        })
        .fail(function() {
            // just in case posting your form failed
            alert( "Posting failed." );
        });
        // to prevent refreshing the whole page page
        return false;
    });
});
</script>

最佳做法是使用一个后端脚本处理这两个调用。您可以使用数组返回 2 个单独的响应。提示 - 编写一个类。

阿贾克斯.php 

class leaseStuff{
    public static function moveToLease($data){
        // add code from move_to_lease.php, change $_POST to $data
    }
    public static function showLeaseSub($data){
        // add code from show_lease_sub.php, change $_POST to $data
    }
}
echo json_encode(array(
    "moveToLease"=>leaseStuff::moveToLease($_POST),
    "showLeaseSub"=>leaseStuff::showLeaseSub($_POST)
));

然后，您可以将 Ajax 合并为一个调用：

$.ajax({
    type: 'POST',
    url: 'ajax.php', 
    data: $(this).serialize()
}).done(function(data){
    data = JSON.parse(data);
    $('#response').html(data.moveToLease);
    $('#txtHint').html(data.showLeaseSub);
});

尝试使用您的 URL 遍历数组：

$('#sform').submit(function () {
    var urls = [
                    {
                        "url": "move_to_lease.php",
                        "response_id": "#response"
                    },
                    {
                        "url": "show_lease_sub.php",
                        "response_id": "#txtHint"
                    }
                ]

    for (var k in urls) {
        $(urls[k].response_id).html("<b>Loading response...</b>");
        $.ajax({
            type: 'POST',
            url: urls[k].url,
            data: $(this).serialize()
        }).done(function (data) {
            $(urls[k].response_id).html(data);
        }).fail(function () {
            alert("Posting failed.");
        });
    }
    return false;
});

更新：

根据您提供的映像 IMAGE，您需要进行两个不同的 AJAX 调用。

  1. 提交表单时：->将信息保存到数据库->获取信息以更新显示

  2. 更改选择下拉列表时：->从数据库获取信息->获取信息以更新显示

相关文章：