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

Displaying array data from JavaScript in table

本文关键字：JavaScript 数组 数据 显示      更新时间：2023-09-26

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

我

必须将此数组传递给 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（$jobs）之后的Json数据

[{"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"}]

如果您在响应中获取该数据，则需要使用：

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

在下面引用后，成功函数中的链接更改对我有用：

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

还将 ajax 调用中的数据类型属性更改为"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);
                }
                   }
相关文章：