使用ajax显示来自json数组的数据

时间:2015-06-16 12:24:26

标签: javascript php jquery ajax json

我在索引页面上有以下代码,脚本包含将从测试页面调用数据的部分代码

<div class="leftbox" id="proddisplay">

</div>

var onSubmit = function(e) {
  var txtbox = $('#txt').val();
  var hiddenTxt = $('#hidden').val();
  $.ajax({
    type: 'post',
    url: 'test.php',
    data: {
      txt: txtbox,
      hidden: hiddenTxt
    },
    cache: false,
    success: function(returndata) {
      $('#proddisplay').html(returndata);
      console.log(returndata);
    },
    error: function() {
      console.error('Failed to process ajax !');
    }
  });
};

从test.php我得到的json数组看起来像这样

[1,2,"text","text2"]

我想以表格形式显示json数组数据并将其显示在div中。表的视图应该是这样的(它将有一些自己的CSS)

static text: 1
static text: 2
static text: text
static text: text2

静态文本将由我给出并且在整个过程中保持不变,但是数组的值会发生变化。任何人都可以告诉我如何做到这一点

我可以单独显示json中的数据,但是在这里我还需要将json数据放在表中然后将该表放在div中

1 个答案:

答案 0 :(得分:0)

首先,您需要在发送到前端之前在php中编码数组,使用json_encode()然后使用JSON.parse()在success函数中对其进行解码。刚刚在数组中运行一个循环。

var onSubmit = function(e) {
 var txtbox = $('#txt').val();
 var hiddenTxt = $('#hidden').val();
 $.ajax({
   type: 'post',
   url: 'test.php',
   data: {
     txt: txtbox,
     hidden: hiddenTxt
   },
   cache: false,
   success: function(returndata) {
     var returneddata = JSON.parse(returndata);
     var htmlData= '';
     for(var i=0; i<returneddata.length; i++){
        htmlData+= 'static text: '+returneddata[i]+' <br>';
     }
     $('#proddisplay').html(htmlData);
     console.log(returndata);
   },
   error: function() {
     console.error('Failed to process ajax !');
   }
 });