在表中显示JavaScript中的数组数据

时间:2015-06-19 09:15:21

标签: javascript php jquery arrays

controller函数中我有多维数组说$jobs我在view's JavaScript成功函数alert(data)中获取此数组。

我必须将此数组传递给JavaScript成功函数并在表视图中显示此数组数据而不重新加载页面,我该怎么做?我试图将数组转换为json,但没有什么工作,这是正确的方法吗?

以下是我的JavaScript代码:

function jobsearch()
{
     var form=$("#jobSearchForm")              
     $.ajax({
            type: 'POST',
            url: '/jobs/processjobsearch/',
            dataType: 'json',
            data: form.serialize(),
            success: function(data){
                alert(data);
                var json = JSON.parse(data);
            $.each(json.jobs, function(index, value) { alert(value);
                $.each(value, function(index, value) {
                    $("#data").append("<tr><td>" + value + '</td></tr>');
                });
            });
            $('#errorr-msg').html(json.errormsg);
           }        
        }); 
}

在警报数据中我得到了这个数组

Array
(
    [0] => Array
        (
            [id] => 3
            [jsp_title] => efsdf
            [jsp_subtitle] => sdfsdfdfs
            [jsp_desc] => dsfdfsdf
            [jsp_uid] => 1
            [jsp_ex_id] => php
            [jsp_date] => 2015-06-18 12:13:43
            [jsp_stdate] => sdfsdf
            [jsp_endate] => 
            [jsp_nature] => 0
            [jsp_location] => 
            [jsp_active] => 0
            [jsp_etype] => 2
        )

    [1] => Array
        (
            [id] => 4
            [jsp_title] => java devloper
            [jsp_subtitle] => core java advance java
            [jsp_desc] => all java related technologies
            [jsp_uid] => 1
            [jsp_ex_id] => java
            [jsp_date] => 2015-06-18 12:51:21
            [jsp_stdate] => 213123123
            [jsp_endate] => 123123123
            [jsp_nature] => 0
            [jsp_location] => nagar
            [jsp_active] => 0
            [jsp_etype] => 3
        )

)

编辑:json_encode之后的Json数据($ jobs)

[{"id":"1","jsp_title":"php developer","jsp_subtitle":"","jsp_desc":"develop ecommerce site","jsp_uid"
:"1","jsp_ex_id":"1,3","jsp_date":"2015-06-18 12:14:54","jsp_stdate":"","jsp_endate":"","jsp_nature"
:"1","jsp_location":"pune","jsp_active":"1","jsp_etype":"5"},{"id":"5","jsp_title":"web devloper","jsp_subtitle"
:"design , backend ,fruntend","jsp_desc":"2-4 year Exprience in\nPhp,html5,CssAjax...","jsp_uid":"1"
,"jsp_ex_id":"1|2,3,4","jsp_date":"2015-06-18 12:14:35","jsp_stdate":"11112015","jsp_endate":"11112015"
,"jsp_nature":"0","jsp_location":"baner, pune","jsp_active":"0","jsp_etype":"4"}]

2 个答案:

答案 0 :(得分:1)

如果您在响应中获得 数据,则需要使用:

json_encode($array);

print_r()输出转换为JavaScript可读JSON。然后,您可以使用已发布的JavaScript / jQuery函数来获取内容。

根据JSON数据,您需要更新success功能:

success: function(data){
  for (var i = 0; i < data.length; i++) {
    tr = $('<tr/>');
    var srno = i+1;
    tr.append("<td>" + srno + "</td>");
    tr.append("<td>" + data[i].jsp_title  + "<br>" + data[i].jsp_subtitle  + "<br>" + data[i].jsp_desc  + "<br>" + data[i].jsp_date  + "</td>");
    $('#data').append(tr);
  }
}

答案 1 :(得分:0)

在下面引用之后,成功功能中的链接更改适用于我:

https://stackoverflow.com/questions/17066636/parsing-json-objects-for-html-table

还将ajax调用中的dataType属性更改为'json'

dataType: 'json'

成功函数

success: function(data){
                    for (var i = 0; i < data.length; i++) {
                    tr = $('<tr/>');
                    var srno = i+1;
                    tr.append("<td>" + srno + "</td>");
                    tr.append("<td>" + data[i].jsp_title  + "<br>" + data[i].jsp_subtitle  + "<br>" + data[i].jsp_desc  + "<br>" + data[i].jsp_date  + "</td>");
                    $('#data').append(tr);
                }
                   }