ajax和json物件

主機筆記發表於2016-09-11

二維陣列

首先是輸出json字串的php檔案

header("Content-type: text/html; charset=utf-8");           //json設定utf-8
$arr=array(`name`=>`大兵`,`age`=>`18`,`hobby`=>`電視`);    
foreach($arr as $k => $v){                                //此迴圈將中文字元編碼,防止亂碼
    $arr[$k]=urlencode($v);
}
echo urldecode(json_encode($arr));

js接收

$(`#qingqiu`).click(function(){
      wenben=$.ajax({
        type:"GET",
        url:"/ajax/json.php",
        success:function(data){
          var json=JSON.parse(data);      //json字串轉為物件
          console.log(json);
          for(var item in json){        //遍歷json物件
          var aLi=$("<li>"+item+"=>"+json[item]+"</li>");
          $(`ul`).append(aLi);
          }
      }
      });
  });

 

二維陣列形勢

首先php程式碼

header("Content-type: text/html; charset=utf-8");
$arr=array(array(`name`=>`小明`,`age`=>`14`,`hobby`=>`電腦遊戲`),array(`name`=>`小紅`,`age`=>`13`,`hobby`=>`動漫`),array(`name`=>`大兵`,`age`=>`18`,`hobby`=>`電視`));
foreach($arr as $k => $v){
  foreach($v as $sk=> $sv)
    $arr[$k][$sk]=urlencode($sv);
}
echo urldecode(json_encode($arr));

js接收

wenben=$.ajax({
        type:"GET",
      url:"/ajax/json2.php",
      success:function(data){
          var json=JSON.parse(data);
          var oUl=$(`ul`);
          for(var item in json){
              oLi=$("<li>"+json[item].name+",年齡"+json[item].age+",愛好是"+json[item].hobby+"</li>");
              oUl.append(oLi);
          }
      }
 });

 


相關文章