【问题标题】:how to display image in td after ajax successajax成功后如何在td中显示图像
【发布时间】:2014-02-23 11:40:21
【问题描述】:

我想在 ajax 成功后在特定的 td 中显示图像,但它不显示图像它不起作用任何人指导我如果我出错了下面是我的代码

ajax:

<script>
    $(document).ready(function() {
        $('.edit1').on('change', function() {
            arr = $(this).attr('class').split(" ");
            var clientid = document.getElementById("client").value;
            account_id = document.getElementById("account_id").value;
            $(this).parent().next().find('input:checkbox').attr("checked", true);
            $.ajax({
                type: "POST",
                url: "clientnetworkpricelist/routestatusupdate.php",
                data: "value=" + $(this).val() + "&rowid=" + arr[2] + "&field=" + arr[1] + "&clientid=" + clientid + "&account_id=" + account_id,
                success: function(result) {
                    data = jQuery.parseJSON(result); //added line
                    var obj = data;
                    $('#CPH_GridView1_Status' + arr[2]).empty();
                    $('#CPH_GridView1_Status' + arr[2]).append(data.status);
                    $('.ajax').html($(this).val());
                    $('.ajax').removeClass('ajax');
                }
            });
        });
    });
</script>

routestatusupdate.php

{

/** 
some function for display the result

**/

$result=array();
$result['status']='<img  src="image/' . $status . 'f.png" />';
$result['seleniumrouteupdate']=$seleniumrouteupdaterow;
$result['routeupdate']=$routeupdate;
echo json_encode($result);
}

我的 routestatusupdate.php 输出看起来像

{"status":"<img  src=\"image\/Increasef.png\" \/>","seleniumrouteupdate":"1","routeupdate":"100"}{"status":"<img  src=\"image\/Decreasef.png\" \/>","seleniumrouteupdate":"1","routeupdate":"100"}

【问题讨论】:

    标签: javascript php jquery html ajax


    【解决方案1】:

    您不需要此行,因为数据已经是 JSON 格式:

    data = jQuery.parseJSON(result); //added line
    

    通过删除它,您还需要像这样更新您的 var:

    var obj = result;
    

    第二件事,你的 JSON 格式错误。它应该像这样输出:

    [{"status":"<img  src=\"image\/Increasef.png\" \/>","seleniumrouteupdate":"1","routeupdate":"100"},{"status":"<img  src=\"image\/Decreasef.png\" \/>","seleniumrouteupdate":"1","routeupdate":"100"}]
    

    你可能有那个 echo json_encode($result);在两个地方,您需要将它们组合在一个响应数组中并 echo json_encode($results);

    这里是如何做到这一点的示例(PHP):

    function something($status, $seleniumrouteupdaterow,$routeupdate) {
       $result=array();
       $result['status']='<img  src="image/' . $status . 'f.png" />';
       $result['seleniumrouteupdate']=$seleniumrouteupdaterow;
       $result['routeupdate']=$routeupdate;
       return $result;
    }
    
    // ....PHP code
    $json = array();
    $json[] = something($status, $seleniumrouteupdaterow,$routeupdate);
    // ... some other code
    $json[] = something($status, $seleniumrouteupdaterow,$routeupdate);
    echo json_encode($json);
    

    最后你还需要更新这一行:

    $('#CPH_GridView1_Status' + arr[2]).append(data.status);
    

    由于 data.status 是一个数组,您需要定位正确的元素(第一个或第二个):

    $('#CPH_GridView1_Status' + arr[2]).append(data.status[0]);
    

    这将附加您的第一条状态消息..

    【讨论】:

    • 它显示错误:SyntaxError: JSON.parse: JSON data after unexpected non-whitespace character
    • 正如我所说,结果已经是 JSON 格式.. 不需要解析它,所以应该删除这一行
    • 我删除它显示错误:ReferenceError: data is not defined (24 out of range 2)
    • 你能指导我如何使输出看起来像这样:[{"status":"","seleniumrouteupdate": "1","routeupdate":"100"},{"status":"","seleniumrouteupdate":"1","routeupdate": "100"}]
    • 我已经更新了答案并添加了一个 PHP 示例(另请参阅开头如何更新您的 javascript 变量)
    猜你喜欢
    • 1970-01-01
    • 2021-08-17
    • 2021-08-24
    • 2021-10-02
    • 2021-07-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多