AJAX嵌套调用失效：调用含AJAX的页面未触发数据库更新

我有update_appraisals.php页面，希望通过AJAX调用view_appraisal.php页面，该页面完成计算后会通过AJAX更新数据库，且包含setTimeout函数。测试按钮在新窗口打开view_appraisal.php时可正常更新数据库，但通过AJAX调用时，虽success回调返回成功，却未触发数据库更新；直接在view_appraisal.php中执行UPDATE测试语句可正常运行，变量传递无误。请问是否为AJAX链式调用问题？

update_appraisals.php 中的AJAX代码 #

（说明：加载view_appraisal.php但未触发updateAppraisal函数，$updateSQL测试代码可运行）

function updateAppraisal( appraisalID, counter ) {
$.ajax(
   {
      type: 'POST',
      url: 'view_appraisal.php',
      data: { 
        "id": appraisalID,
        "updateAppraisal": "Yes"
      },
      success: function (response) {
        console.log ('Appraisal '+ appraisalID +' Updated');
        $(".update_status").append(counter + '. Appraisal '+ appraisalID +' Updated<br/>');
      },
      error: function () {
        console.log ('Appraisal '+ appraisalID +' Error');
        $(".update_status").append(counter + '. Appraisal '+ appraisalID +' <span style="color:#b8212d"><strong>Error</strong></span><br/>');
      }
   }
); 
}

控制台输出：'Appraisal 108_20230821113149 Updated'

update_appraisals.php 中的测试按钮代码 #

（说明：在新窗口打开view_appraisal.php，传递与AJAX相同的变量，页面可正常运行updateAppraisal函数及$updateSQL测试代码）

<form class='form-horizontal' target='_blank' action='view_appraisal.php' method='post' enctype='multipart/form-data'>
    <input type='hidden' id='id' name='id' value='108_20230821113149'></input>
    <input type='hidden' id='updateAppraisal' name='updateAppraisal' value='Yes'></input>
<button type='submit' name='submit' id='submit' class='w-100 btn btn-lg btn-success' style='margin-top:10px' data-loading-text='Loading...'>Test Appraisals</button>
</form>

view_appraisal.php 代码 #

function updateAppraisal(id){
    
    setTimeout(function() { 
        let Other_Costs = document.getElementById( 'other_costs' ).value;
        let Appraised_Value = document.getElementById( 'selling_price' ).value;
        let Subtotal = document.getElementById( 'subtotal' ).value;
        let Sugg_Book_Cost = document.getElementById( 'book_cost' ).value;
        
        const xhttp = new XMLHttpRequest();
        xhttp.onload = function () {
        }

        xhttp.open( "GET", "update_appraisals_ajax.php?id=" + id + "&other_costs=" + Other_Costs + "&appraised_value=" + Appraised_Value + "&subtotal=" + Subtotal + "&sugg_book_cost=" + Sugg_Book_Cost, true );
        xhttp.send();
    }, 1000);
    
}

if (isset($_POST['updateAppraisal'])){
    echo "Update Appraisal is set. <script> updateAppraisal(`$appraisal_id`);</script>";
    $updateSQL = mysqli_query( $con, "UPDATE Appraisals SET Hours = '300-' WHERE Appraisal_ID = '$appraisal_id'")or die( mysqli_error() );
} 

update_appraisals_ajax.php 代码 #

$appraisal_id = $_GET[ 'id' ];

$other_costs = $_GET[ 'other_costs' ];
$appraised_value = $_GET[ 'appraised_value' ];
$subtotal = $_GET[ 'subtotal' ];
$sugg_book_cost = $_GET[ 'sugg_book_cost' ];

$updateSQL = mysqli_query( $con, "UPDATE Appraisals SET Other_Costs = '$other_costs', Appraised_Value ='$appraised_value', Subtotal = '$subtotal', Sugg_Book_Cost = '$sugg_book_cost'  WHERE Appraisal_ID = '$appraisal_id'")or die( mysqli_error() );

问题原因及解决办法 #

这不是AJAX链式调用的问题，核心问题出在AJAX请求的执行环境和DOM依赖上：

1. AJAX返回的JS代码不会自动执行：当你通过AJAX调用view_appraisal.php时，服务器返回的<script>标签代码不会被浏览器自动执行，所以updateAppraisal函数根本没被触发。
2. DOM元素不存在：就算手动执行updateAppraisal函数，当前页面（update_appraisals.php）里没有other_costs、selling_price这些DOM元素，document.getElementById会返回null，获取value时直接报错，后续的AJAX更新请求自然发不出去。
3. 测试按钮能正常工作，是因为新窗口完整加载了view_appraisal.php的所有DOM元素，JS代码可以正常获取值并发送请求。

修复方案

方案一：后端直接完成计算更新（推荐）

把依赖前端DOM的计算逻辑移到后端，避免前端环境依赖：

• 在view_appraisal.php中，直接从数据库读取需要计算的值，或者让前端AJAX请求时把这些值一起传过来，后端直接执行UPDATE操作，不需要返回JS代码。

方案二：手动执行AJAX返回的JS代码（需保证DOM存在）

如果必须保留前端计算逻辑，可以在AJAX的success回调里手动提取并执行返回的JS代码：

success: function (response) {
    // 提取响应中的JS代码并执行
    const scriptContent = response.match(/<script>([\s\S]*?)<\/script>/);
    if (scriptContent && scriptContent[1]) {
        eval(scriptContent[1]);
    }
    console.log ('Appraisal '+ appraisalID +' Updated');
    $(".update_status").append(counter + '. Appraisal '+ appraisalID +' Updated<br/>');
}

注意：这种方式要求update_appraisals.php页面中必须存在other_costs等对应的DOM元素，否则还是会报错。

方案三：传递参数而非依赖DOM

修改updateAppraisal函数，让它接收参数而不是从DOM取值：

• 在update_appraisals.php的AJAX请求中，把需要的计算值作为参数一起传递：

data: { 
    "id": appraisalID,
    "updateAppraisal": "Yes",
    "other_costs": document.getElementById('other_costs').value,
    "selling_price": document.getElementById('selling_price').value,
    "subtotal": document.getElementById('subtotal').value,
    "book_cost": document.getElementById('book_cost').value
}

• 然后在view_appraisal.php中直接使用这些POST参数执行更新，不需要再触发前端AJAX。

内容的提问来源于stack exchange，提问作者Nicole