zoukankan      html  css  js  c++  java
  • ajax 与jsp servlet

     

    jQuery的Ajax实现异步传输List、Map_GOOD

    分类: JAVA WEB前端

    由于项目需要通过ajax得到后台的List对象里面的值,由于没有接触过json所以前期我只能先传字符串再在js里截取子串实现。闲暇时间摸索了一下关于json接受List对象的方法,步骤如下:
    1.首先下载json所以依赖的包, Json-lib 最新版 json-lib-2.3-jdk15.jar,其官方网站是:http://json-lib.sourceforge.net/可以直接 download,细心的你会发现其网站页面里面有提示它还需要其他包:
    Json-lib requires (at least) the following dependencies in your classpath: 
    jakarta commons-lang 2.4 
    jakarta commons-beanutils 1.7.0 
    jakarta commons-collections 3.2 
    jakarta commons-logging 1.1.1 
    ezmorph 1.0.6  



    其中一般项目中都会有前4个,所以只需要下载ezmorph 1.0.6  就可以了 



    下载地址分别是: 
    http://commons.apache.org/lang/ 
    http://commons.apache.org/beanutils/ 
    http://commons.apache.org/collections/ 
    http://commons.apache.org/logging/ 
    http://ezmorph.sourceforge.net/ 
    2.首先先见一个小web项目 
    先建一个User类: 

    package com.json; 

    public class User { 
        String username; 
        String password; 
    public String getUsername() { 
      return username; 

    public void setUsername(String username) { 
      this.username = username; 

    public String getPassword() { 
      return password; 

    public void setPassword(String password) { 
      this.password = password; 

       

    再建一个servlet 

    package com.json; 

    import java.io.IOException; 
    import java.io.PrintWriter; 
    import java.util.ArrayList; 
    import java.util.List; 

    import javax.servlet.ServletException; 
    import javax.servlet.http.HttpServlet; 
    import javax.servlet.http.HttpServletRequest; 
    import javax.servlet.http.HttpServletResponse; 

    import net.sf.json.JSONArray; 

    public class TestJson extends HttpServlet { 

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

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

      response.setContentType("text/html"); 
    String str= request.getParameter("name");//得到ajax传递过来的paramater 
      System.out.print(str); 
      PrintWriter out = response.getWriter(); 
      List list = new ArrayList();//传递List 
                      Map m=new HashMap();//传递Map   
      User u1=new User(); 
      u1.setUsername("zah"); 
      u1.setPassword("123"); 
      User u2=new User(); 
      u2.setUsername("ztf"); 
      u2.setPassword("456"); 
            list.add(u1); //添加User对象     
             list.add(u2);     //添加User对象 
         
              m.put("u1", u1); 
             m.put("u2", u2);  

       JSONArray jsonArray2 = JSONArray.fromObject( list );//转化成json对象
       JSONObject jo=JSONObject.fromObject(m);//转化Map对象


            out.print(jsonArray2);//返给ajax请求 
           out.print(jo);//返给ajax请求 



    配置好web.xml中的servlet映射,这一步就略了。 



    3.建立ajax实现 
    这里为了快速实现用的是jquery实现的。 

    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript"> 
         function test(){ 
          $.ajax({ 
           type:"POST", //请求方式 
           url:"testjson", //请求路径 
           cache: false,  
           data:"name=zah",  //传参 
           dataType: 'json',   //返回值类型 
                success:function(json){   
               alert(json[0].username+" "+ json[0].password);    //弹出返回过来的List对象 
                    } 
           }); 
          } 
    </script> 
      </head> 
      <body> 
        <input type="button" name="b" value="测试" onclick=test()> 
      </body> 


    测试开始,点击按钮弹出zah 123 
    json[0]就相当于u1对象 json[1]相当于u2对象,对于其属性的访问跟java对象一样,其他的Connection测试应该一样,

    访问Map的话直接把返回函数改成如下即可:

    success:function(json){    
              alert(json.u1.username) 
                    } 
        }直接跟上Key.属性即可访问Object对象。 


    文章出处:飞诺网(www.firnow.com):http://dev.firnow.com/course/4_webprogram/ajax/ajaxxl/20100721/476877.html


    CheckServlet.java源代码如下: 
    package ajax.servlet; 
    import java.io.IOException; 
    import java.io.PrintWriter; 
    import javax.servlet.ServletException; 
    import javax.servlet.http.HttpServlet; 
    import javax.servlet.http.HttpServletRequest; 
    import javax.servlet.http.HttpServletResponse; 
    /** 

    * @author Thinkpad 

    */ 
    public class CheckServlet extends HttpServlet { 
    public void doGet(HttpServletRequest request, HttpServletResponse response) 
       throws ServletException, IOException { 
      response.setContentType("text/html"); 
      response.setCharacterEncoding("UTF-8"); 
      PrintWriter out = response.getWriter(); 
      
      String name = request.getParameter("username"); 
      out.print("我是服务器,收到客户端的数据:"+name); 
      out.flush(); 
      out.close(); 

    public void doPost(HttpServletRequest request, HttpServletResponse response) 
       throws ServletException, IOException { 
      this.doGet(request, response); 



    3、编写客户端html文件 
    新建ajax.html文件 

    ajax.html文件源码如下: 


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    <html> 
      <head> 
        <title>ajax实现校验</title> 
        <mce:script type="text/javascript" src="jslib/jquery.js" mce_src="jslib/jquery.js"></mce:script>
    <mce:script type="text/javascript" src="jslib/verify.js" mce_src="jslib/verify.js"></mce:script>
      </head> 

      <body> 
       <input type="text" id="username"> 
        <input type="button" value="校验" onclick="verify()" > 
        <dir id="result"></dir> 
      </body> 
    </html> 

    4、下载jquery.js文件 
    下载地址:http://docs.jquery.com/Downloading_jQuery 
    下载后,将文件拷贝到文件结构中 

    5、编写verify.js文件 
    verify.js源代码如下: 


    function verify() { 
    // 注解 
    // alert("点击了按钮"); 
    // jquery查询节点的方法 
    var jqueryObj = $("#username"); 
    // 获取文本框中用户输入的数据 
    var username = jqueryObj.val(); 
    // alert(username); 
    // 将数据发送给服务器的servlet 
    $.get("servlet/CheckServlet?username=" + username, null, callback); 

    // 回调函数 
    function callback(data) { 
    // alert("收到服务器返回的数据"); 
    // alert(data); 
    var resultObj = $("#result"); 
    resultObj.html(data); 
    }

  • 相关阅读:
    java+selenium 3.x的火狐自动化测试环境
    Jmeter+badboy环境搭建
    Linux环境下搭建Tomcat+mysql+jdk环境
    线程池的配置说明
    关于事务的使用规范
    生产事故 java.lang.OutOfMemoryError: GC overhead limit exceeded
    linux检查网络运行情况命令
    百万数据迁移的线程分组
    XML报文拼接 乱码
    创建数据源、连接数据库
  • 原文地址:https://www.cnblogs.com/CooderIsCool/p/4815043.html
Copyright © 2011-2022 走看看