javascript - 在单独的 DIV 中显示 JQuery Ajax 响应的不同部分

Question

我有一个脚本，允许用户对图像进行评分，然后动态地将另一个表单添加到页面以对下一个图像进行评分。输入图像等级后，它会被输入到数据库中，并显示在新创建表单上方的页面上的列表中，ID 为 responds。

所有这些都很好用，但我还可以在页面顶部的 DIV 中显示已审核图像的运行计数，ID 为 results.

JQuery

$("#FormSubmit").click(function (e) {
        e.preventDefault();
        if($("#grade").val()!='1')
        {
            if($("#positioning_reason").val() == '' &&
                                  $("#exposure_reason").val() == '' &&
                                  $("#equipment_reason").val() == '' &&
                                  $("#patient_reason").val() == '')
                            { 
               alert("Please select why the image was not perfect");
               return false;
            }
        }
        jQuery.ajax({
        type: "POST",
        url: "response.php",
        dataType:"text",
        data: $('#test_form').serialize(),
        success:function(response){
            $("#responds").append(response);
            $('#test_form')[0].reset();
            $("#test_form").get(0).scrollIntoView();
            $("#results").display $numRows in this div          
        },
        error:function (xhr, ajaxOptions, thrownError){
            alert(thrownError);
        }
    });

});

响应.php

//include db configuration file
include 'includes/db_connect.php';

if(isset($_POST['grade'])) 
    {
    $grade = $_POST['grade'];
    $positioning = $_POST['positioning_reason'];
    $exposure = $_POST['exposure_reason'];
    $patient = $_POST['patient_reason'];
    $equipment = $_POST['equipment_reason'];
    $user_id = $_POST['user_id'];
    $audit_id = $_POST['audit_id'];

    $sql= "INSERT INTO image(auditID, imageGrade,positioning_reasonID,exposure_reasonID,patient_reasonID,equipment_reasonID,auditDate,userID) VALUES('$audit_id', $grade,'$positioning','$exposure','$patient','$equipment',NOW(),$user_id)";
    $result = mysqli_query($mysqli,$sql) or die(mysqli_error($mysqli));

    if($result)
    {
        $sql = "SELECT * FROM image WHERE auditID = '$audit_id'";
        $result = mysqli_query($mysqli,$sql) or die(mysqli_error($mysqli));
          $numRows = mysqli_num_rows($result);
          $my_id = mysqli_insert_id($mysqli);
          $output_array = array(
              'my_id' => $my_id,
              'grade' => $grade,
              'numRows' => $numRows
          );

    }else{

        header('HTTP/1.1 500 Looks like mysql error, could not insert record!');
        exit();
    }

}
elseif(isset($_POST["recordToDelete"]) && strlen($_POST["recordToDelete"])>0 && is_numeric($_POST["recordToDelete"]))
{   
    $idToDelete = $_POST["recordToDelete"]; 

    $sql = "DELETE FROM image WHERE imageID = $idToDelete";
    $result = $result = mysqli_query($mysqli,$sql) or die(mysqli_error($mysqli));
    if(!$result)
    {     
        header('HTTP/1.1 500 Could not delete record!');
        exit();
    }
}
else
{
    header('HTTP/1.1 500 Error occurred, Could not process request!');
    exit();
}
echo json_encode($output_array);

我想在名为“结果”的 div 中显示值 $numRows(目前它与所有其他结果一起显示用于测试目的)。我尝试使用页面下方的单独页面加载函数从不同的 php 页面获取 $numRow 值，但速度非常慢，而且由于计时的原因，结果并不总是正确的

Answer 1

正如评论中的其他人所指出的那样，使用 JSON 会是一个更好的选择。

if($result)
    {
        $sql = "SELECT * FROM image WHERE auditID = '$audit_id'";
        $result = mysqli_query($mysqli,$sql) or die(mysqli_error($mysqli));
          $numRows = mysqli_num_rows($result);
          $my_id = mysqli_insert_id($mysqli);
          $output_array = array(
              'my_id' => $my_id,
              'grade' => $grade,
              'numRows' => $numRows
          );
    }
//etc...

然后在文件末尾:

echo json_encode($output_array);

现在您可以在 AJAX 成功函数中进行 HTML 格式化:

    jQuery.ajax({
    type: "POST",
    url: "response.php",
    dataType: "json",
    data: $('#test_form').serialize(),
    success:function(response){
        $("#responds").empty().append('<li id="item_'+response.my_id+'" class="audit_item">'+
        '<div class="del_wrapper"><a href="#" class="del_button" id="del-'+response.my_id+'">'+
        '<img src="images/icon_del.gif" border="0" />'+
        'Grade - '+response.grade+' - '+response.my_id+' - '+response.numRows+'</li>'+
        '</a></div>')            
        $('#test_form')[0].reset();
        $("#test_form").get(0).scrollIntoView();
        $("#results").empty().append('<b>'+response.numRows+'</b>')
    },
    error:function (xhr, ajaxOptions, thrownError){
        alert(thrownError);
    }
    });