JSON数据格式以及与后台交互数据转换实例

来源:互联网 发布:js获取边框宽度 编辑:程序博客网 时间:2024/06/04 00:39
/*作者:烟大阳仔时间:20131013介绍:主要了解一下json的格式,看看数据是怎么存储的*/<p><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a target=_blank target="_blank" href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">/* class person {  Integer id;  String name; } Person p=new Person();*/ //jason格式标识一个对象 var people={"firstName":"zhangsan","lastName":"hao","email":"<a target=_blank target="_blank" href="mailto:1221@qq.com">1221@qq.com</a>"}; //alert(people.firstName); //json标识多个人 var people2= [  {"firstName":"zhangsan","lastName":"hao","email":"<a target=_blank target="_blank" href="mailto:1221@qq.com">1221@qq.com</a>"},  {"firstName":"zhangsan","lastName":"hao","email":"<a target=_blank target="_blank" href="mailto:1221@qq.com">1221@qq.com</a>"},  {"firstName":"zhangsan","lastName":"hao","email":"<a target=_blank target="_blank" href="mailto:1221@qq.com">1221@qq.com</a>"} ] //alert(people2[1].firstName); //别名: var people3={"person": [  {"firstName":"zhangsan","lastName":"hao","email":"<a target=_blank target="_blank" href="mailto:1221@qq.com">1221@qq.com</a>"},  {"firstName":"zhangsan","lastName":"hao","email":"<a target=_blank target="_blank" href="mailto:1221@qq.com">1221@qq.com</a>"},  {"firstName":"zhangsan","lastName":"hao","email":"<a target=_blank target="_blank" href="mailto:1221@qq.com">1221@qq.com</a>"} ] } //alert(people3.person[1].firstName); var people3={ "person1":  [   {"firstName":"zhangsan","lastName":"hao","email":"<a target=_blank target="_blank" href="mailto:1221@qq.com">1221@qq.com</a>"},   {"firstName":"zhangsan","lastName":"hao","email":"<a target=_blank target="_blank" href="mailto:1221@qq.com">1221@qq.com</a>"},   {"firstName":"zhangsan","lastName":"hao","email":"<a target=_blank target="_blank" href="mailto:1221@qq.com">1221@qq.com</a>"}  ], "person2":  [   {"firstName":"zhangsan","lastName":"hao","email":"<a target=_blank target="_blank" href="mailto:1221@qq.com">1221@qq.com</a>"},   {"firstName":"zhangsan","lastName":"hao","email":"<a target=_blank target="_blank" href="mailto:1221@qq.com">1221@qq.com</a>"},   {"firstName":"zhangsan","lastName":"hao","email":"<a target=_blank target="_blank" href="mailto:1221@qq.com">1221@qq.com</a>"}  ], "person3":  [   {"firstName":"wy","lastName":"hao","email":"<a target=_blank target="_blank" href="mailto:1221@qq.com">1221@qq.com</a>"},   {"firstName":"zhangsan","lastName":"hao","email":"<a target=_blank target="_blank" href="mailto:1221@qq.com">1221@qq.com</a>"},   {"firstName":"zhangsan","lastName":"hao","email":"<a target=_blank target="_blank" href="mailto:1221@qq.com">1221@qq.com</a>"}  ] } //alert(people3.person3[0].firstName); </script></head><body></p><p></body></html></p>-------------------------------------------------------------------------------------------------------------/*作者:烟大阳仔时间:20131013介绍:主要了学习一下json与后台交互的时候数据的转换*/<p><!DOCTYPE html><html>  <head>    <title>json2.html</title>     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript">  function ajaxFunction()   {   var xmlHttp=null;      try      {     // Firefox, Opera 8.0+, Safari      xmlHttp=new XMLHttpRequest();      }   catch (e)      {</p><p>    // Internet Explorer     try        {        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");        }     catch (e)        {</p><p>        try           {           xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");           }        catch (e)           {           alert("您的浏览器不支持AJAX!");           return false;           }        }      }   return xmlHttp;   }  window.onload=function()  {   document.getElementById("sub").onclick=function()   {    var xmlReq=ajaxFunction();    xmlReq.onreadystatechange=function()    {     if(xmlReq.readyState==4)     {      if(xmlReq.status==200||xmlReq.status==304)      {       var data=xmlReq.responseText;       //{pid:1,pname:'山东省'}       //alert(data);       var dataObj=eval("("+data+")");       //alert(dataObj);       //alert(dataObj.pname);       for(var i=0;i<dataObj.length;i++)       {        alert(dataObj[i].id+"  "+dataObj[i].addre);       }      }     }    }    xmlReq.open("post","../jsonServlet?timeStamp="+new Date().getTime(),true);    xmlReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    //alert("adsada");    /*     * 3.发送数据     * */    xmlReq.send("b=0");   }  } </script>  </head>    <body>    <input type="submit" value="提交" name="sub" id="sub"/>    <select id="province" name="province">     <option value="">请选择...</option>    </select>  </body></html></p><p>package cn.com.Demo;</p><p>import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import java.util.List;</p><p>import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;</p><p>import net.sf.json.JSONArray;import net.sf.json.JsonConfig;</p><p>import cn.com.bean.Province;</p><p>public class jsonServlet extends HttpServlet {</p><p>  public void doPost(HttpServletRequest request, HttpServletResponse response)   throws ServletException, IOException {  request.setCharacterEncoding("UTF-8");  response.setContentType("text/html; charset=utf-8");  PrintWriter out=response.getWriter();    System.out.println("---------------Post-----------------------");  System.out.println(request.getParameter("b"));  //out.write("你好!");  //一个省份的时候  //String str2="{pid:1,pname:'山东省'}";  //out.write(str2);      //多个省份的时候    //String str="[{pid:1,pname:'山东省'},{pid:2,pname:'四川'},{pid:3,pname:'北京'},{pid:4,pname:'上海'}]";  //out.write(str);    //  List<Province> list=new ArrayList<Province>();  Province p1=new Province(1,"山东");  Province p2=new Province(2,"北京");  Province p3=new Province(3,"上海");    list.add(p1);  list.add(p2);  list.add(p3);    JsonConfig config=new JsonConfig();  config.setExcludes(new String[]{"id"});  JSONArray jsonArray=JSONArray.fromObject(list,config);  out.write(jsonArray.toString());  System.out.println(jsonArray.toString()); }</p><p>}</p>
原创粉丝点击