发送 AJAX 请求并将 JSON 数据作为 html 中的响应传递答案

【问题标题】：Send an AJAX request and pass JSON data as a response in html发送 AJAX 请求并将 JSON 数据作为 html 中的响应传递
【发布时间】：2015-08-20 05:45:21
【问题描述】：

Javascript

$.post( 
        SITE_URL+"mycontroller/myAction",
        {
        start_date : '01-JUL-15',
        end_date : '31-JUL-15',
        resource_ids : '100,200',
        project_id : 10
        },
        function(json){
        alert(json);
}, 'json');



    var selResId = jQuery('#grid').jqGrid('getGridParam', 'selarrrow');
    resourceLength = selResId.length;

    if (resourceLength > 0) {

    var names = [];
    var j=1;
    for (var i=0, il=selResId.length; i < il; i++) {

    var name = jQuery('#grid').jqGrid('getCell', selResId[i], 'USER_NAME');

    $('#addr'+j).html("<td style='text-align:center;'>"+name+"</td><td style='text-align:center;'>"+skill+"</td><td>"+status+"</td>");
    $('#resource_table').append('<tr id="addr'+(j+1)+'"></tr>');
        j++;
        }
}

将附加数据的 HTML

<table class="table table-striped table-hover" id="resource_table">
<tbody>
   <tr id='addr1'></tr>
</tbody>
</table>

PHP 数据输出

$result = 
    Array
    (
        [0] => Array
            (
                [USER_ID] => 100
                [USER_NAME] => User One
                [SKILL] => Application Software
                [STATUS] => Onsite
            )

        [1] => Array
            (
                [USER_ID] => 200
                [USER_NAME] => User Two
                [SKILL] => Application Software
                [STATUS] => Offshore
            )

    );

进一步

foreach ($result as $final_result){ 
    $skills[] = $final_result['SKILL_NAME'];
    $status[] = $final_result['ACTUAL_HOURS'];
}

    $result_arr = array();
    $result_arr['skills'] = $skills;
    $result_arr['status'] = $status;
    echo json_encode($result_arr);exit;

打印$result_arr

Array
(
    [skills] => Array
        (
            [0] => Application Software
            [1] => Application Software
        )

    [status] => Array
        (
            [0] => Onsite
            [1] => Offshore
        )

)

我可以使用 jqgrid 代码var name = jQuery('#grid').jqGrid('getCell', selResId[i], 'USER_NAME'); 动态附加用户名，但是我如何发送 PHP 数据作为响应以根据相关用户动态显示 Skill 和 Status，如下图所示。

【问题讨论】：

but how can I process PHP data 到底是什么意思？你想把技能传给php脚本吗？
发送数据作为响应并在html中传递以显示技能和状态。
上面的json是你从$.post得到的？如果是，那么您可以使用 for 循环内的 Json 响应返回的值设置技能和状态。
@dreamweiver 以及如何去做？如何将 PHP 输出传递回成功函数并在 html 中设置值，就像对 user_name 所做的那样。请查看更新的问题
为此，您只需输出您需要使用echo 将其发送给客户端的数据。我已经在下面发布了相同的详细信息

标签： php jquery ajax json jqgrid

【解决方案1】：

只需将从服务器脚本收到的 json 响应存储在 response 中，然后循环 json response 以获取相应的数据（技能和状态）。

由于您已经有了用相关值更新 DOM 的代码，其余代码应该可以按预期工作。

JS 代码：

 var response;
 $.post( 
    SITE_URL+"mycontroller/myAction",
    {
    start_date : '01-JUL-15',
    end_date : '31-JUL-15',
    resource_ids : '100,200',
    project_id : 10
    },
    function(json){
       processResponse(json);
}, 'json');

....
....
function processResponse(response) {
  var selResId = jQuery('#grid').jqGrid('getGridParam', 'selarrrow');
  resourceLength = selResId.length;

  if (resourceLength > 0) {
   var names = [];
   var j=1;
   for (var i=0, il=selResId.length; i < il; i++) {
     var skill = response[i].skill;
     var status = response[i].status;
     var name = jQuery('#grid').jqGrid('getCell', selResId[i], 'USER_NAME');

     $('#addr'+j).html("<td style='text-align:center;'>"+name+"</td><td style='text-align:center;'>"+skill+"</td><td>"+status+"</td>");
     $('#resource_table').append('<tr id="addr'+(j+1)+'"></tr>');
     j++;
   } 
}

同时，您需要echo 将您需要发送到客户端应用程序的响应数据，例如$.post。

PHP 脚本

//response should contain the above json
<?php echo response; ?>

【讨论】：

我已经稍微更新了我的 PHP 代码，以便您了解我是如何传递数据的。您能否详细说明要传递的 json 数据，以便与您的上述 sn-p 一起使用。同样在上面使用它说，TypeError: response is undefined var skill = response[i].skill; 或者我应该更改我的 PHP 数据吗？
我已经稍微修改了代码，我相信它现在应该可以正常工作了。
对于我上面的 PHP 代码，我按照你的 sn-p 实现，它说 TypeError: response[i] is undefined 我在以正确的数组格式传递 PHP 数据时犯了一些错误吗？我的 json_encode 回复 {"skills":["Application Software","Application Software"],"site_status":["Onsite","Offshore"]}
console.log(response) 函数中的输出 processResponse [Object { USER_ID="100", SKILL="Application Software", SITE_STATUS="Offshore"}, Object { USER_ID="200", SKILL="Application Software", SITE_STATUS="Offshore"}] AND console.log(response[i].skill);未定义
ahhh，尝试使用var skill = response[i].SKILL; var status = response[i].STATUS; 我以为你的问题是小写的，因为json响应区分大小写。

【解决方案2】：

Hi this one will helpful to you .


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" value="click me to load" onclick="getAjaxRes();" />
<script>
function getAjaxRes()
{
    var get_tr="";
    $.ajax({
        type:"POST",
        url:"js_ex.php",
        data:{my_data:"sometning_ip"},
        success:function(res_data)
        {
            console.log("data_result="+res_data);
            if(res_data!='')
            {
                var geting_res=JSON.parse(res_data);
                var get_tr="<tr><th>USER_ID</th><th>USER NAME</th><th>SKILL</th><th>STATUS</th>";
                for(var x in geting_res)
                {
                    var user_id=geting_res[x].USER_ID;
                    var user_name=geting_res[x].USER_NAME;
                    var user_skill=geting_res[x].SKILL;
                    var user_status=geting_res[x].STATUS;
                    get_tr+="<tr><td>"+user_id+"</td><td>"+user_name+"</td><td>"+user_skill+"</td><td>"+user_status+"</td><tr>";  
                }
                console.log(get_tr);
                $('#table_show').html(get_tr);
            }
        }
    });

}
</script>
<style>
th,td { border: 1px solid #2e2e2e; }
</style>
<table id="table_show"></table>

Ajax File Name js_ex.php , ajax json result is below

<?php
$my_array=array(array("USER_ID"=>100,"USER_NAME"=>"Varun","SKILL"=>"Application Software","STATUS"=>"Onsite"),array("USER_ID"=>200,"USER_NAME"=>"Sarvanan","SKILL"=>"Testing Software","STATUS"=>"Offshore"));
echo json_encode($my_array);
?>

【讨论】：