发送一个AJAX请求并将JSON数据作为响应传递给html

时间:2015-08-20 05:45:21

标签: php jquery ajax json jqgrid

的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数据作为响应动态显示SkillStatus,如下所示在图像下面。

enter image description here

2 个答案:

答案 0 :(得分:0)

只需存储从response&amp;中的服务器脚本收到的json响应。然后围绕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 SCRIPT

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

答案 1 :(得分:0)

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);
?>