• 浅析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();
        }

    运行效果如下:

  • 相关阅读:
    实例 find
    实例 历史命令查找
    Crontab
    find命令
    实例 tar备份以日期命名
    断开网络驱动器后图标不消失
    Windows7系统下优化固态硬盘
    目标进程已退出,但未引发 CoreCLR 启动事件
    md5 helper
    List<T> or IList<T>
  • 原文地址:https://www.cnblogs.com/gaojiang/p/3063258.html
Copyright © 2020-2023  润新知