Ajax学习-后台输出json然后js遍历j…

最新推荐文章于 2019-02-14 00:03:00 发布

原创最新推荐文章于 2019-02-14 00:03:00 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

html5 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了如何使用PHP生成JSON数据并利用Ajax获取这些数据。同时，详细解释了前端JavaScript如何解析和遍历JSON数据，包括一维和二维数组的处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后台输出json:

1 $arr= array('0'=>array('id'=>'11', 'title'=>112),'2'=>array('id'=>33, 'title'=>44));
2 echo json_encode($arr);

我一般在后台返回的数据都转换成数组返回，好像也可以用Object返回，当然没有试过，其实我觉得XML能同样达到目的，不过json比较方便么。。一个字符串搞定

然后看前台遍历json代码(对于一维数组更合适）：

1 vartext = xmlhttp.responseText;

var text = eval("("+text+")");
2 for(varkey in text)
3 {
4 varvalue = text[key];
5 }

还有一个对于上面的二维数组来说，用js遍历：

1 var text = xmlhttp.responseText;
2 text = eval("("+text+")");
3 for(var i = 0; i < text.length; i++){
4 var id = text[i].id;
5 var title = text[i].title;
6 }

然后贴上我一部分代码：

01 var xmlhttp;
02    if (window.XMLHttpRequest) {
03       xmlhttp = new XMLHttpRequest();
04    }else{
05       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
06    }
07    var url = "cgo_id="+encodeURIComponent(checkCgo);
08 // alert(url);
09    xmlhttp.open("POST","additemresult.php",true);
10    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
11    xmlhttp.onreadystatechange = function() {
12       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
13        var add_item_info = xmlhttp.responseText;
14        var cgt = eval("("+add_item_info+")");
15    //   eval_r("var cgt = "+add_info);
16
17          for (var key in cgt) {
18              var Value = cgt[key];
19              var innercode = "

+key+">"+Value+"";
20    //         alert(innercode);
21              $('select#cgt_id').append(innercode);
22          }
23    //   alert(add_item_info);
24       }
25    }
26    xmlhttp.send(url);

我先用ajax得到后台additemresult.php返回的json数据，然后遍历使用。