浅析jquery+ajax+json

json是一种从服务器端到js中传输数据的数据格式，这里就不多说了。就小谈一下，jquery中用json传输数据，应用到ajax中的例子吧，开发中会用到。

一、准备工作。

1、使用json需要用到几个包：commons-beanutils-1.8.0.jar、commons-collections.jar、commons-lang-2.4.jar、commons-logging.jar、ezmorph-1.0.6.jar、json-lib-2.3-jdk15.jar。

2、jquery的脚本文件：jquery.js。

二、这里就是用AJAX访问后台的Servelt，如果是Struts，则同理，将url改一下，即可。

1、以json传输Object类型的数据。

jsp主要代码如下：

<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
    <script type="text/javascript">
        function test(){
            var myDate = new Date();
            var mytime=myDate.getTime(); //获取当前时间
            $.getJSON(
                    "<%=basePath%>SelectServlet" ,
                    "tid=" +mytime,     //带一个参数过去，可以解决ajax缓存的问题,如果后台需要，这里还可以带别的的参数过去，用&分开就行了
                    function(msg) {
                        alert("name:"+msg.stuName);
                    }
                );
        }
    </script>
  </head>
  
  <body>
    <input type="button" onclick="test()" value="按钮">
  </body>

 

Student对象如下：

public class Student {

    private int stuId;
    private String stuName;
    public int getStuId() {
        return stuId;
    }
    public void setStuId(int stuId) {
        this.stuId = stuId;
    }
    public String getStuName() {
        return stuName;
    }
    public void setStuName(String stuName) {
        this.stuName = stuName;
    }
    
}

 

SelectServlet中的doGet方法如下：

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        
        //将Student转换成JSON对象，传递到前台
        Student stu = new Student();
        stu.setStuId(1);
        stu.setStuName("gaojiang");
        JSONObject obj = JSONObject.fromObject(stu);
        
        out.print(obj);
        out.flush();
        out.close();
    }

 

运行效果如下：

 

 

2、以json传输List<Map>类型的数据。

jsp代码如下：

    <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
    <script type="text/javascript">
        function test(){
            $.getJSON(
                    "<%=basePath%>SelectServlet" ,
                    function(msg) {
                        var str = "";
                        for(var i=0;i<msg.length;i++){
                            str+=msg[i].key+",";
                        }
                        alert("str:"+str);
                    }
                );
        }
    </script>
  </head>
  
  <body>
    <input type="button" onclick="test()" value="按钮">
  </body>

Servlet代码如下：

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html");
        PrintWriter out = response.getWriter();

        List<Map<String,String>> list = new LinkedList<Map<String,String>>();
        for(int i=0;i<5;i++){
            Map<String,String> map = new HashMap<String, String>();
            map.put("key","value"+i);
            list.add(map);
        }
        
        //转换成JSON对象，传到前台去
        JSONArray obj = JSONArray.fromObject(list);
        
        out.print(obj);
        out.flush();
        out.close();
    }

运行效果如下：

posted on 2013-05-06 18:04  过省  阅读(383)  评论(0)  编辑  收藏  举报

导航