javascript - 可以这样运行多个ajax吗？

Question

我想运行 Ajax 查询以从响应“TesterID”中获取“Datum”。然后我想使用之前收到的“Datum”运行第二个 Ajax，以在另一个页面(数据库条目)上更新此值。

这是不起作用的代码。

<script>

/* Funktionen um Startzeiten für Zyklen aus DB.TesterCycleCount zu erhalten bzw. für Test und Stunden, das aktuelle Datum gerundet auf 30 Minuten */ 
$(document).ready(function(){

var TesterID = "<?php echo $_GET['TesterID']; ?>"; /* value der Tester erhalten */ 


        $.ajax({ /* AJAX aufrufen */
            url: 'ma_get-TesterID_Testende.php',
            type: 'get', /* Methode zum übertragen der Daten */
            data: {TesterID:TesterID}, /* Daten zu übermitteln */
            dataType: 'json',
            success:function(response){ /* Die zurückgegebenene Daten erhalten */


                var CID = response['CID'];
                var Datum = response['Datum'];



            },
             error: function(jqxhtt, status, exception) {
         alert('Exception:', exception)

            }
        }




        var TestaufstellungID = "<?php echo $_GET['TestaufstellungID']; ?>";
         $.ajax({ /* AJAX aufrufen */
            url: 'ma_TestendeSQL.php',
            type: 'get', /* Methode zum übertragen der Daten */
            data: {Testaufstellung:TestaufstellungID, Datum: Datum}, /* Daten zu übermitteln */
            dataType: 'json',
            success:function(data){ /* Die zurückgegebenene Daten erhalten */


                 alert('Successfully called');
     },
     error: function(jqxhr, status, exception) {
         alert('Exception:', exception)

            }
        }


        });


</script>

这是第二个 PHP 页面 ma_TestendeSQL.php，该页面不会更新。

<?php
    $cinfo = array(
        "Database" => $database,
        "UID" => $username,
        "PWD" => $password
    );
    $conn = sqlsrv_connect($server, $cinfo);

    $TestaufstellungID = $_GET['TestaufstellungID'];
    $Datum = $_GET['Datum'];
    $Testdatum = date('Y-d-m');

                    $stop = $conn->prepare("WITH UpdateTestende AS (
      SELECT TOP 1  * from DB.dbo.Testergebnisse 
      WHERE TestaufstellungID = $TestaufstellungID
      ORDER BY TestergebnisID DESC 
    )

    update UpdateTestende 
    set Testende = '$Datum',
    Datum = '$Testdatum'");








        header('Content-type: application/json');

    ?>

第一个 Ajax 在 PHP 页面 ma_get-TesterID_Testende.php 上运行良好。我已经单独测试过它，但是当我添加第二个 Ajax 尝试更新时，我上面发布的代码不起作用。

那么问题是:是否可以像这样运行两个 Ajax？

谢谢。

编辑: AJAX 调用为空或未启动。 进一步调查:Ajax 向我发出空异常的错误部分提醒，并且不向我发出成功部分提醒。因此它不会转到页面 ma_get-TesterID_Testende.php 或不会返回 Datum 。 无法启用跨站点脚本是问题所在吗？

但在另一个页面中有一个类似的 Ajax 调用，工作正常。

$(document).ready(function(){

var TesterID = "<?php echo $_GET['TesterID']; ?>"; /* value der Tester erhalten */ 

        $.ajax({ /* AJAX aufrufen */
            url: 'ma_get-TesterID.php',
            type: 'get', /* Methode zum übertragen der Daten */
            data: {TesterID:TesterID}, /* Daten zu übermitteln */
            dataType: 'json',
            success:function(response){ /* Die zurückgegebenene Daten erhalten */

                var len = response.length;

                $("#Teststart").empty(); /* Die erhaltenden Daten werden bei der ID angezeigt */
                for( var i = 0; i<len; i++){
                    var CID = response[i]['CID'];
                    var Datum = response[i]['Datum'];

                    $("#Teststart").append("<option value='"+Datum+"'>"+Datum+"</option>");

                }
            }
        });


    $("#TesterID").change(function(){ /* Wenn du änderst und vom Select Feld auswählst */
        var TesterID = $(this).val(); /* value der Tester erhalten */ 

        $.ajax({ /* AJAX aufrufen */
            url: 'ma_get-TesterID.php',
            type: 'get', /* Methode zum übertragen der Daten */
            data: {TesterID:TesterID}, /* Daten zu übermitteln */
            dataType: 'json',
            success:function(response){ /* Die zurückgegebenene Daten erhalten */

                var len = response.length;

                $("#Teststart").empty(); /* Die erhaltenden Daten werden bei der ID angezeigt */
                for( var i = 0; i<len; i++){
                    var CID = response[i]['CID'];
                    var Datum = response[i]['Datum'];

                    $("#Teststart").append("<option value='"+Datum+"'>"+Datum+"</option>");

                }
            }
        });
    });

});

在此示例中，当我更改下拉选择表单中的值时，Ajax 调用就会启动。有区别吗？

这个 Ajax 应该如何工作，我尝试在我的其他问题中逐步解释我的应用程序应该如何执行。

Update SQL Query with populated variables from AJAX functions over multiple PHP Pages

编辑 2: jQuery 版本: https://code.jquery.com/jquery-3.4.1.js ”

Answer 1

原始代码的几个问题:

A.第一个 ajax 必须在启动第二个 ajax

之前完成

您的第二个 ajax 调用需要第一个 ajax 调用返回的 Datum 值。目前，第二个 ajax 将在发送第一个 ajax 之后、返回 Datum 之前立即启动。因此，我们需要等待第一个 ajax 返回 Datum，然后才能将其用作第二个 ajax 的输入。

最简单的方法是使用 ECMA2017 的 async/await 功能(文档 here )。这允许 javascript 异步运行并等待某些事情完成后再继续。

为此，我们需要首先将封闭函数声明为 async(请参阅下面的//1. 代码中的注释):

$(document).ready(async function(){

然后我们在第一个 $.(ajax) 调用前面添加 await (请参阅下面代码中的//3. 注释):

 await $.ajax({ /* AJAX aufrufen */

JavaScript 引擎将在第一次 ajax 调用时暂停代码，直到返回 Datum 值。然后它将照常继续。

B. Datum 需要位于封闭函数的顶层

如前所述，变量 Datum 仅存在于第一个 ajax 调用中归因于 "success" 的匿名函数中。因此它对于第二个ajax调用不可用(“Datum is not Defined”)。

您可以通过将 Datum 声明为全局(在 $.(ready) {} 之外)来解决此问题，或者更好的是，您可以将其保留在 >$.(ready) {} 通过在最外面的括号中声明它(请参阅下面代码中的//2. 注释)。

最后，您应该将 var Datum = response['Datum']; 替换为 Datum = response['Datum'];。 (参见//4. 下面代码中的注释)。

/* Funktionen um Startzeiten für Zyklen aus DB.TesterCycleCount zu erhalten bzw. für Test und Stunden, das aktuelle Datum gerundet auf 30 Minuten */ 

// 1. ADD 'ASYNC' IN FRONT OF FUNCTION

$(document).ready(async function(){

// 2. DECLARE 'DATUM' AT TOP

var Datum;
var TesterID = "<?php echo $_GET['TesterID']; ?>"; /* value der Tester erhalten */ 

        // 3. ADD AWAIT IN FRONT OF FIRST AJAX CALL

        await $.ajax({ /* AJAX aufrufen */
            url: 'ma_get-TesterID_Testende.php',
            type: 'GET', /* Methode zum übertragen der Daten */
            data: {TesterID:TesterID}, /* Daten zu übermitteln */
            dataType: 'json',
            success:function(response){ /* Die zurückgegebenene Daten erhalten */

                var CID = response['CID'];

                // 4. REMOVE VAR IN FRONT OF DATUM

                Datum = response['Datum'];

            },
             error: function(jqxhtt, status, exception) {
             console.log(exception);
         alert('Exception:', exception)

            }
        });




    var TestaufstellungID = "<?php echo $_GET['TestaufstellungID']; ?>";
    $.ajax({ /* AJAX aufrufen */
        url: 'ma_TestendeSQL.php',
        type: 'get', /* Methode zum übertragen der Daten */
        data: {Testaufstellung:TestaufstellungID, Datum: Datum}, /* Daten zu übermitteln */
        dataType: 'json',
        success:function(data){ /* Die zurückgegebenene Daten erhalten */


            alert('Successfully called Datum='.Datum);
        },
        error: function(jqxhr, status, exception) {
            alert('Exception:', exception)

        }
    });

});