json学习(二)

最新推荐文章于 2024-07-27 18:51:22 发布

walkaway11

最新推荐文章于 2024-07-27 18:51:22 发布

阅读量1.9k

点赞数

分类专栏： J2EE 文章标签： json newline javascript function import jquery

本文链接：https://blog.csdn.net/walkaway11/article/details/6038303

版权

J2EE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

接着json学习（一），使用jquery发送请求道serlvet，返回json字符串，然后在浏览器中显示。

1.首先需要下载它的依赖包
commons-beanutils-1.8.3.jar
commons-collections-3.2.1.jar
commons-lang.jar
commons-logging.jar
ezmorph-1.0.6.jar
json-lib-2.1.jar
将这些依赖包加入到classpath中,同时将其放在D:/tomcat/lib中。
然后需要下载jquery.js和json.js文件。
准备工作完成！！！！！！！

2.编写serlvet的代码并且编译它，将class文件其放在D:/tomcat/webapps/myServlets/WEB-INF/classes，代码如下
//JsonViewServlet.java
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.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();
           member.put("name", "张小"+i);
           member.put("age", "28");
           member.put("email", "test@test.com");
           members.add(i, member);
        }
        json.put("jobs", members);
       }catch(Exception e){
            e.printStackTrace();
       }
       System.out.println(json.toString());
         resp.getWriter().write(json.toString());
     }

}

3. 编写前台页面，这个时候需要引入jquery.js和json.js两个js文件。
//test.htm
<html>
   <head>
     <title> 使用jquery ajax显示JSON数据</title>
     <script language="javascript" src="./js/jquery.js"></script>
     <script language="javascript" src="./js/json.js"></script>
   </head>
   <body>
     <h1>JSON 数据显示.</h1>
     <input type="button" value="JsonView" onClick="jsonview();">
     <div id="dateMessage">
         <table id="planTable">
             <tr><td> 名称</td><td>年龄</td><td>邮箱</td></tr>
         </table>
     </div>
   </body>
</html>
<script language="javascript">
     function jsonview(){
    alert("ERROR");
    $.getJSON("http://localhost:8080/myServlets/JsonViewServlet",null,function call(data){
         wirteHtml(data);
    alert("corret!");
     });}
     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[i].name);
              var newLine = $("#planTable").length;
              var row = planTable.insertRow(newLine);
              var col = row.insertCell(0);
              col.innerHTML = continents[i].name;
              col = row.insertCell(1);
              col.innerHTML = continents[i].age;
              col = row.insertCell(2);
              col.innerHTML = continents[i].email;
         }
     }
</script>
将jquery.js和json.js放入到D:/tomcat/webapps/myServlets/js中，将test.htm放在D:/tomcat/webapps/myServlets中。

4. 配置web.xml
按照json学习(一）讲的方法在web.xml中加入：
<servlet>
<servlet-name>JsonViewServlet</servlet-name>
<servlet-class>JsonViewServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>JsonViewServlet</servlet-name>
<url-pattern>/JsonViewServlet</url-pattern>
</servlet-mapping>
然后在浏览器中输入http://localhost:8080/myServlets/test.htm，点击按钮，成功输出结果。

5. 我的问题总结！！！！
最开始我没有把test.htm放到tomcat服务器中，直接放到本地，打开一面运行一直显示
$.getJSON("http://localhost:8080/myServlets/JsonViewServlet",null,function call(data){中的"$"未定义，在网上找了半天说jquery.js为引入，可是我是明明引入了，为什么还会出现这个问题，原来是因为我之前的src="../js/jquery.js"不能用"..",后来去掉一个"."。用firefox打开，打开不报错，可是也不显示结果，调试实在没办法了，报着侥幸的心理用IE试试，结果IE很给力，一切正常。不知道什么原因？？？？有哪位高手可以回答一下！！！！！！！
后来将test.htm放到tomcat服务器中，按照上述方法，用firefox和IE都正常！
在js中相对路径的最先面原来是可以不加"/",比如直接用"js/jquery.js"

将html文件改成jsp,因为显示中文，这个注意字符集的问题，中文正确显示使用GB2312。
<%@ page language="java" contentType="text/html;charset=GB2312" %>
<html>
   <head>
     <title> 使用jquery ajax显示JSON数据</title>
     <meta http-equiv="Content-Type" content="text/html; charset=GB2312">
     <script language="javascript" src="./js/jquery.js"></script>
     <script language="javascript" src="./js/json.js"></script>
   </head>
   <body>
     <h1>JSON 数据显示.</h1>
     <input type="button" value="JsonView" onClick="jsonview();">
     <div id="dateMessage">
         <table id="planTable">
             <tr><td> 名称</td><td>年龄</td><td>邮箱</td></tr>
         </table>
     </div>
   </body>
</html>
<script language="javascript">
     function jsonview(){
    alert("ERROR");
    $.getJSON("http://localhost:8080/myServlets/JsonViewServlet",null,function call(data){
         wirteHtml(data);
    alert("corret!");
     });}
     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[i].name);
              var newLine = $("#planTable").length;
              var row = planTable.insertRow(newLine);
              var col = row.insertCell(0);
              col.innerHTML = continents[i].name;
              col = row.insertCell(1);
              col.innerHTML = continents[i].age;
              col = row.insertCell(2);
              col.innerHTML = continents[i].email;
         }
     }
</script>

其实很简单，纠结了一天，小菜的一天就这样没了~~

walkaway11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
json学习(二)

接着json学习（一），使用jquery发送请求道serlvet，返回json字符串，然后在浏览器中显示。1.首先需要下载它的依赖包commons-beanutils-1.8.3.jarcommons-collections-3.2.1.jarcommons-lang.jarcommons-logging.jarezmorph-1.0.6.jarjson-lib-2.1.jar将这些依赖包加入到classpath中,同时将其放在D:/tomcat/lib中。然后需要下
复制链接

扫一扫

专栏目录