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

时间:2013-08-18 21:44:39

标签: javascript ajax jquery

我有一个脚本,允许用户对图像进行分级,然后动态地向页面添加另一个表单以对下一个进行评分。输入图像等级后,将其输入数据库并显示在新创建的表单上方的页面中,其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);
        }
    });

});

response.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);

我想在名为'results'的div中显示值$ numRows(目前我显示所有其他结果用于测试目的)。我已经尝试从页面下方使用单独的页面加载功能从不同的php页面获取$ numRow值,但是它非常慢,并且结果并不总是正确的,因为时间

1 个答案:

答案 0 :(得分: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);
    }
    });