菜单

ajax处理回来的json格式数据方式

2018年11月15日 - Ajax

盖用户注册为条例:

在JS中将JSON的字符串解析成JSON数据格式,一般有少种植方式:
1.如出一辙种为利用eval()函数。

register.php

  1. 以Function对象来进行返回解析。
<html>
<head>
<title>用户注册</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript">

 //创建ajax引擎
 function getXmlHttpObject(){

  var xmlHttpRequest;
  //不同的浏览器获取对象xmlhttprequest 对象方法不一样
  if(window.ActiveXObject){

   xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");

  }else{

   xmlHttpRequest=new XMLHttpRequest();
  }

  return xmlHttpRequest;

 }
 var myXmlHttpRequest="";

 //验证用户名是否存在
 function checkName(){

  myXmlHttpRequest=getXmlHttpObject();

  //怎么判断创建ok
  if(myXmlHttpRequest){

   //通过myXmlHttpRequest对象发送请求到服务器的某个页面
   //第一个参数表示请求的方式, "get" / "post"
   //第二个参数指定url,对哪个页面发出ajax请求(本质仍然是http请求)
   //第三个参数表示 true表示使用异步机制,如果false表示不使用异步
   var url="regisgerProcess.php";
   //这个是要发送的数据
   var data="username="+$('username').value;
   //打开请求.
   myXmlHttpRequest.open("post",url,true);
   //还有一句话,这句话必须.
   myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   //指定回调函数.chuli是函数名
   myXmlHttpRequest.onreadystatechange=chuli;

   //真的发送请求,如果是get请求则填入 null即可
   //如果是post请求,则填入实际的数据
   myXmlHttpRequest.send(data); 


  }
 }

 //回调函数
 function chuli(){

  //window.alert("处理函数被调回"+myXmlHttpRequest.readyState);
  //我要取出从registerPro.php页面返回的数据
  if(myXmlHttpRequest.readyState==4){

   //取出值,根据返回信息的格式定.text
   //window.alert("服务器返回"+myXmlHttpRequest.responseText);

   //$('myres').value=myXmlHttpRequest.responseText;

   //看看如果取出 xml格式数据
   //window.alert(myXmlHttpRequest.responseXML);

   //取出text或json数据用下面方式:获取mes节点
   var mes=myXmlHttpRequest.responseText;
   window.alert(mes);
   //使用 eval 函数将 mes字符串转换为对应的对象,注意eval函数格式如下:
   mes_obj = eval ("(" + mes + ")");
   window.alert(mes_obj.res);
   $('myres').value=mes_obj.res;
  }
 }

 //这里我们写一个函数
 function $(id){
  return document.getElementById(id);
 }
</script>
</head>
<body>
 <form action="regisgerProcess.php" method="post">
 用户名字:<input type="text" name="username1" id="username"><input type="button" onclick="checkName();" value="验证用户名">
 <input style="border-width: 0;color: red" type="text" id="myres">
 <br/>
 用户密码:<input type="password" name="password"><br>
 电子邮件:<input type="text" name="email"><br/>
 <input type="submit" value="用户注册">
 </form>
  <form action="???" method="post">
 用户名字:<input type="text" name="username2" >

 <br/>
 用户密码:<input type="password" name="password"><br>
 电子邮件:<input type="text" name="email"><br/>
 <input type="submit" value="用户注册">
 </form>

</body>
</html>

 

regisgerProcess.php:

(一)以jquery异步获取的数据类型——json对象与字符串为依据,介绍两种植办法获取到的结果处理方式

<?php
 //这里两句话很重要,第一讲话告诉浏览器返回的数据格式,若返回xml格式数据,此处写header("Content-Type: text/xmla;set=utf-8"); ,
 //若返回tex或json数据,此处填写header("Content-Type: text/html;charset=utf-8");
 header("Content-Type: text/html;charset=utf-8");
 //告诉浏览器不要缓存数据
 header("Cache-Control: no-cache");

 //接收数据(这里要和请求方式对于 _POST 还是 _GET)
 $username=$_POST['username'];

 //这里我们看看如何处理格式是json
 $info="";
 if($username=="shunping"){
  $info.='{"res":"用户名可用"}';//注意,这里数据是返回给请求的页面.
 }else{
  $info.='{"res":"用户名不可用","id":"001"}';
 }
 echo $info;
?>

1.对服务器返回的JSON字符串,如果jquery异步请求没有做项目说明,或者以字符串方式接受,那么得举行一样次于针对象化处理,方式不是最好辛苦,就是用拖欠字符串放于eval()中实行同样差。

json数据详解:

var dataObj=eval(“(“+data+”)”);//转换为json对象

1、json的格式如下 :

干什么而 eval这里而补偿加 (“(“+data+”)”)呢?

“{属性名:属性值,属性名:属性值,…. }”

由在:eval本身的问题。
由于json是盖”{}”的道来起跟罢之,在JS中,它见面吃算一个报告句子块来处理,所以要强制性的拿其换成为一栽表达式。
加上圆括号的目的是强迫eval函数在拍卖JavaScript代码的时节强制将括号内之表达式(expression)转化为对象,而未是作言语(statement)来实施。举一个事例,例如对象字面量{},如一旦未加以外层的括号,那么eval会将大括如泣如诉识别为JavaScript替码块的始和结束标记,那么{}将会见叫认为是实行了千篇一律词空语句。所以下两个实施结果是差的:

因json数据是原本生态数据,因此这种数据格式很稳定,而且描述能力高,我们建议大家使用json格式

alert(eval(“{}”);  // return undefined
alert(eval(“({})”); // return object[Object]

2、
json数据格式的扩充

 

设若服务器返回的json 是差不多组数,则格式应当如下:

2.对于服务器返回的JSON字符串,如果jquery异步请求将type(一般也这布局属性)设为“json”,或者使用$.getJSON()方法赢得服务器返回,那么尽管不需要eval()方法了,因为这时候得到的结果已经是json对象了,只待直接调用该目标即可,这里为$.getJSON方法吧条例说明数据处理办法:

$info=”[{“属性名”:”属性值”,…},{“属性名”:”属性值”,…},….]”;

$.getJSON(“http://www.phpzixue.cn/",{param:"gaoyusi"},function(data){
  //此处返回的data已经是json对象
  //以下其他操作和第一种植情形
  $.each(data.root,function(idx,item){
    if(idx==0){
      return true;//同countinue,返回false同break
    }
    alert(“name:”+item.name+”,value:”+item.value);
  });
});

当xmlhttprequest对象收取及json数据后,应当这样处理

 

//转成为靶子数组

(二)解析方法就是是使用Function对象来好,它的典型以就是是在JQUERY中的AJAX方法下之success等对于返回数据data的剖析
var json='{“name”:”CJ”,”age”:18}’;
data =(new Function(“”,”return “+json))();

varreses=eval(“(“+xmlHttpRequest.responseText+”)”);

此时底data会分析成一个 json对象了.

//通过reses可以获取而期望的其他一个值

reses[?].属性名

3、
更加复杂的json数据格式

<scriptlanguage="JavaScript">
  var people ={
   "programmers":
    [
    {"firstName":"Brett", "email": "brett@newInstance.com" },
    {"firstName":"Jason", "email": "jason@servlets.com" }
    ],
   "writer":
      [
       {"writer":"宋江","age":"50"},
       {"writer":"吴用","age":"30"}
      ],
      "sex":"男"     
};
window.alert(people.programmers[0].firstName);
window.alert(people.programmers[1].email);

window.alert(people.writer[1].writer);
window.alert(people.sex);
 </script>

4、当一个ajax请求到服务器,服务器可以依据需求返回
三种格式的数量,那么我们应该选哪一个?

a. 如果你的项目经理没有特别之求,建议利用json

b. 若应用程序不需同另外应用程序共享数据的时刻, 使用 HTML
片段来回到数据经常最为简单易行的

c. 如果数据要选定, JSON 文件是独正确的挑选,
其以性能与文件大小方面发出优势

d. 当远程应用程序未知时, XML 文档是首选, 因为 XML 是 web 服务世界的
“世界语”

如上这篇ajax处理回来的json格式数据方式就是是多少编分享给大家之全部内容了,希望能吃大家一个参考,也愿意大家多支持脚本的家。

君可能感兴趣的文章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图