Go语言视频零基础入门到精通

吴会

jquery+json小例子




由有不当之处，还望大家能指出。
直接进入主题，使用jquery发送哀求到Servlet，返回json字符串，然后在前台解析json并显示

后台servlet的哀求处理（需要引入json.jar）：


java代码

[li]import java.io.IOException;   
[li]   
[li]import javax.servlet.ServletException;   
[li]import javax.servlet.http.HttpServlet;   
[li]import javax.servlet.http.HttpServletRequest;   
[li]import javax.servlet.http.HttpServletResponse;   
[li]   
[li]import org.json.JSONArray;   
[li]import org.json.JSONObject;   
[li]   
[li]public class JsonViewServlet extends HttpServlet {   
[li]   
[li]    protected void doGet(HttpServletRequest req, HttpServletResponse resp)   
[li]            throws ServletException, IOException {   
[li]        doPost(req,resp);   
[li]    }   
[li]   
[li]    protected void doPost(HttpServletRequest req, HttpServletResponse resp)   
[li]            throws ServletException, IOException {   
[li]        resp.setContentType("text/HTML;charset=UTF-8");   
[li]        resp.setHeader("Cache-Control","no-cache");   
[li]        JSONObject json = new JSONObject();   
[li]        try{   
[li]        JSONArray members = new JSONArray();   
[li]        for(int i=0;i<10;i++){   
[li]            JSONObject member = new JSONObject()   
[li]            .put("name", "张小"+i)   
[li]            .put("age", "28")   
[li]            .put("email", "test@test.com");   
[li]            members.put(i, member);   
[li]        }   
[li]        json.put("jobs", members);   
[li]        }catch(Exception e){   
[li]            e.printStackTrace();   
[li]        }   
[li]        System.out.println(json.toString());   
[li]        resp.getWriter().write(json.toString());   
[li]    }   
[li]   
[li]}   [/li]

[pre]import java.io.IOException;  import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;  import org.json.JSONArray; import org.json.JSONObject;  public class JsonViewServlet extends HttpServlet {   protected void doGet(HttpServletRequest req, HttpServletResponse resp)    throws ServletException, IOException {   doPost(req,resp);  }   protected void doPost(HttpServletRequest req, HttpServletResponse resp)    throws ServletException, IOException {   resp.setContentType("text/html;charset=UTF-8");   resp.setHeader("Cache-Control","no-cache");   JSONObject json = new JSONObject();   try{   JSONArray members = new JSONArray();   for(int i=0;i<10;i++){    JSONObject member = new JSONObject()    .put("name", "张小"+i)    .put("age", "28")    .put("email", "test@test.com");    members.put(i, member);   }   json.put("jobs", members);   }catch(Exception e){    e.printStackTrace();   }   System.out.println(json.toString());   resp.getWriter().write(json.toString());  }  }[/pre]
通过上面代码，将向页面发送下面字符串：


Html代码

[li]{"jobs":[   
[li]    {"age":"28","email":"test@test.com","name":" 张小0"},   
[li]    {"age":"28","email":"test@test.com","name":" 张小1"},   
[li]    {"age":"28","email":"test@test.com","name":" 张小2"},   
[li]    {"age":"28","email":"test@test.com","name":" 张小3"},   
[li]    {"age":"28","email":"test@test.com","name":" 张小4"},   
[li]    {"age":"28","email":"test@test.com","name":" 张小5"},   
[li]    {"age":"28","email":"test@test.com","name":" 张小6"},   
[li]    {"age":"28","email":"test@test.com","name":" 张小7"},   
[li]    {"age":"28","email":"test@test.com","name":" 张小8"},   
[li]    {"age":"28","email":"test@test.com","name":" 张小9"}   
[li]]}   [/li]

{"jobs":[  {"age":"28","email":"test@test.com","name":"张小0"},  {"age":"28","email":"test@test.com","name":"张小1"},  {"age":"28","email":"test@test.com","name":"张小2"},  {"age":"28","email":"test@test.com","name":"张小3"},  {"age":"28","email":"test@test.com","name":"张小4"},  {"age":"28","email":"test@test.com","name":"张小5"},  {"age":"28","email":"test@test.com","name":"张小6"},  {"age":"28","email":"test@test.com","name":"张小7"},  {"age":"28","email":"test@test.com","name":"张小8"},  {"age":"28","email":"test@test.com","name":"张小9"} ]}[/pre]

前台页面（需要引入jquery.js和json.js）：


Jsp代码

[li]<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>   
[li]<html>   
[li]  <head>   
[li]    <title> 使用jquery  ajax显示JSON数据</title>   
[li]    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   
[li]    <script language="javascript" src="../jslib/jquery.js"></script>   
[li]    <script language="javascript" src="../jslib/json.js"></script>   
[li]  </head>   
[li]  <body>   
[li]    <h1>JSON 数据显示.</h1>   
[li]    <input type="button" value="JsonView" onClick="jsonview();">   
[li]    <div id="dateMessage">   
[li]        <table id="planTable">   
[li]            <tr><td> 名称</td><td>春秋</td><td>邮箱</td></tr>   
[li]        </table>   
[li]    </div>   
[li]  </body>   
[li]</html>   
[li]<script language="javascript">   
[li]    function jsonview(){   
[li]        $.getJSON("http://localhost:8080/ajaxServlet/servlet/jsonViewServlet",null,function call(data){   
[li]        wirteHtml(data);   
[li]    });}   
[li]    function wirteHtml(data){   
[li]        //alert(data.toJSONString());   
[li]        //alert(data.jobs); //返回的data就是一个JSON的对象   
[li]        var continents = data.jobs;   
[li]        for(var i=0;i<continents.length;i++){   
[li]            //alert(continents.name);   
[li]             var newLine = $("#planTable").length;   
[li]             var row = planTable.insertRow(newLine);   
[li]             var col = row.insertCell(0);   
[li]             col.innerHTML = continents.name;   
[li]             col = row.insertCell(1);   
[li]             col.innerHTML = continents.age;   
[li]             col = row.insertCell(2);   
[li]             col.innerHTML = continents.email;   
[li]        }   
[li]    }   
[li]</script>   [/li]

<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8"%> <html>   <head>     <title>使用jquery  ajax显示JSON数据</title>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <script language="javascript" src="../jslib/jquery.js"></script>     <script language="javascript" src="../jslib/json.js"></script>   </head>   <body>    <h1>JSON数据显示.</h1>  <input type="button" value="JsonView">  <div id="dateMessage">   <table id="planTable">    <tr><td>名称</td><td>春秋</td><td>邮箱</td></tr>   </table>  </div>   </body> </html> <script language="javascript">  function jsonview(){   $.getJSON("http://localhost:8080/ajaxServlet/servlet/jsonViewServlet",null,function call(data){   wirteHtml(data);  });}  function wirteHtml(data){   //alert(data.toJSONString());   //alert(data.jobs);//返回的data就是一个JSON的对象   var continents = data.jobs;   for(var i=0;i<continents.length;i++){    //alert(continents.name);     var newLine = $("#planTable").length;        var row = planTable.insertRow(newLine);        var col = row.insertCell(0);        col.innerHTML = continents.name;        col = row.insertCell(1);        col.innerHTML = continents.age;        col = row.insertCell(2);        col.innerHTML = continents.email;   }  } </script>[/pre]


WEB.XML配置



Xml代码

[li]<!-- jsonView servlet -->   
[li]  <servlet>   
[li]    <servlet-name>jsonViewServlet</servlet-name>   
[li]    <servlet-class>com.arthurs.json.JsonViewServlet</servlet-class>   
[li]  </servlet>   
[li]   
[li]<!-- jsonView mapping -->   
[li]  <servlet-mapping>   
[li]    <servlet-name>jsonViewServlet</servlet-name>   
[li]    <url-pattern>/servlet/jsonViewServlet</url-pattern>   
[li]  </servlet-mapping>   [/li]

javalearner

谢谢楼主分享。