使用Ajax显示JSON数组中的数据

Question

我在索引页上有以下代码，脚本包含部分代码，这些代码将从测试页中调用数据

<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

静态文本将由我提供，并且在整个过程中保持不变，但是array的值将更改。 谁能告诉我该怎么做

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

Answer 1

首先，您需要先在php中对数组进行编码，然后再发送到前端，使用json_encode（），然后使用JSON.parse（）在成功函数中对其进行解码。 刚在阵列中运行一个循环之后。

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