使用Jquery--Jsp与servlet之间的数据交互

最新推荐文章于 2022-10-03 09:09:11 发布

javaPie

最新推荐文章于 2022-10-03 09:09:11 发布

阅读量1.9k

点赞数

分类专栏： jQuery

jQuery 专栏收录该内容

68 篇文章 3 订阅

订阅专栏

使用Jquery--Jsp与servlet之间的数据交互

分类： Java Web 2012-11-02 21:53 2904人阅读评论(4) 收藏举报

目录(?)[+]

有过java web开发经验的人都知道，Jsp与servlet之间的数据交互多种多样，但最常见的莫过于表单提交咯(这里我没说错吧— ,—),通过jsp标签form的action指定你要发送表单数据的目的地，在指定发送的方式(get或者post),点击提交按钮，而在servlet端使用request.getParameter(key)接收，这样就可以达到jsp与servlet之间的数据交互。而我今天要说的方法是通过Jquery的的ajax部分来进行与servlet交互。

了解jquery的人都知道，jquery本身就是一个javascript的轻量级框架，可以说是对javascript的一个很好的封装，其中最为精妙的莫过于对ajax操作的简化咯。。。简单，易上手。如果非要挑点毛病的话，我想只有一点吧(应该吧。。。。)：那就是不利于初学者的学习，因为jquery把这部分简化的太过于简单咯，对于初学者想了解其内部实现根本无从下手，让初学者只知道这样去做，但不知道为什么这样做。好了，废话不多说了，上正题吧。

jquery对于ajax的操作主要体现与几种方法：$.get(),$.post(),$.ajax().其中$.ajax()最难理解，也最难使用。而至于其他的方法大家可以去W3C或者通过其他的渠道了解，在这里我就不赘述咯(其实是我想偷懒。。。，交代的那么坦诚，估计没人喷了吧)~~~好了，来先说第一个$.get()。

$.get()其实功能跟使用form表单提交时，方式选择get传输是一样的。而它里面有几个参数：

url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(response,status,xhr)	可选。规定当请求成功时运行的函数。额外的参数： response - 包含来自请求的结果数据 status - 包含请求的状态 xhr - 包含 XMLHttpRequest 对象
dataType	可选。规定预计的服务器响应的数据类型。默认地，jQuery 将智能判断。可能的类型： "xml" "html" "text" "script" "json" "jsonp"

他的使用方法，eg:

$.get("demo_ajax_load.txt", function(result){
    $("div").html(result);
  });

而$.post()的用法跟get的用法大同小异，没多大的区别

语法

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

参数	描述
url	必需。规定把请求发送到哪个 URL。
data	可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR)	可选。请求成功时执行的回调函数。
dataType	可选。规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）。

使用实例：

$.post("demo_ajax_gethint.asp",{suggest:txt},function(result){
    $("span").html(result);
  });

要了，接下来重点我们介绍$.ajax()这个方法，前面的两个方法可以说是从这个方法进行延伸的，将其进行简化，演变出来的。下面我们同样的先来看一下$.ajax()的语法、参数。

语法

jQuery.ajax([settings])

参数	描述
settings	可选。用于配置 Ajax 请求的键值对集合。可以通过 $.ajaxSetup() 设置任何选项的默认值。

参数

描述

settings

可选。用于配置 Ajax 请求的键值对集合。

可以通过 $.ajaxSetup() 设置任何选项的默认值。

运用实例：

$.ajax({ url: "test.html", context: document.body, success: function(){
        $(this).addClass("done");
      }});

至于更加详细的参数信息大家可以点击此链接进行预读： http://www.w3school.com.cn/jquery/ajax_ajax.asp 或者我在接下面的代码中进行部分的讲解。

好了，例如我有个jsp文件SearchVender.jsp。里面有几个输入框：

[html]view plaincopyprint? 
    
 <div class="registerinput" style="display: none;margin-top: 40px;">  
             <form style="margin-right: 50px;text-align: right;">  
                 <label style="font-size: 1em">名称</label><input type="text" name="registername" title="请输入你的真实姓名"><br>  
                 <label style="font-size: 1em">邮箱</label><input type="text" name="registeremail" title="请输入邮箱地址，格式:xxx@xxx.com/cn"><br>  
                 <label style="font-size: 1em">密码</label><input type="password" name="registerpassword" title="请输入密码，密码内不能有非法字母，eg:#、$、&..."><br>  
                 <label style="font-size: 1em">联系人</label><input type="text" name="registerconnect" title="请输入联系人名字"><br>  
                 <label style="font-size: 1em">联系电话</label><input type="text" name="registerphone" title="请输入联系人的电话号码"><br>  
                 <label style="font-size: 1em">地址</label><input type="text" name="registeraddress" title="请输入你目前的居住地址"><br>  
                 <label style="font-size: 1em">邮编</label><input type="text" name="registerpost" title="请输入你目前的居住地址的邮编">  
             </form>  
             <!--<input type="button" name="yes" value="确定" style="margin-top: 30px;">-->  
         </div>  

同时又有个点击的按钮button

而我在script中的代码，当我点击按钮时

[javascript]view plaincopyprint? 
    
 function usertoregister(){  
         var name=$("input[name='registername']").val().trim();  
         var email=$("input[name='registeremail']").val().trim();  
         var password=$("input[name='registerpassword']").val().trim();  
         var connect=$("input[name='registerconnect']").val().trim();  
         var phone=$("input[name='registerphone']").val().trim();  
         var address=$("input[name='registeraddress']").val().trim();  
         var post=$("input[name='registerpost']").val().trim();  
         var obj=new registerobj(name,password,email,connect,phone,address,post);  
         var jsonstring=JSON.stringify(obj);  
         $.ajax({  
             type:"POST",  
             url:"SearchVenderRegisterServlet",  
             async:false,  
             data:jsonstring+"\n",  
             success:function(data,textStatus){  
                 if(textStatus=="success"){  
                     alert(data);  
                     $("#loginorregister").dialog("close");  
                 }  
             }  
         });  
     }  

就会调用usertoregister()这个方法，此方法先获取各个输入框内的值

[javascript]view plaincopyprint? 
    
 var name=$("input[name='registername']").val().trim();  
         var email=$("input[name='registeremail']").val().trim();  
         var password=$("input[name='registerpassword']").val().trim();  
         var connect=$("input[name='registerconnect']").val().trim();  
         var phone=$("input[name='registerphone']").val().trim();  
         var address=$("input[name='registeraddress']").val().trim();  
         var post=$("input[name='registerpost']").val().trim();  

然后生成一个javascript对象

[javascript]view plaincopyprint? 
    
 var obj=new registerobj(name,password,email,connect,phone,address,post);  

当然，此对象你也得在javascript内声明

[javascript]view plaincopyprint? 
    
 function registerobj(name,password,email,connect,phone,address,post){  
         this.name=name;  
         this.password=password;  
         this.email=email;  
         this.connect=connect;  
         this.phone=phone;  
         this.address=address;  
         this.post=post;  
     }  

然后我们将javascript对象转换成json字符串

[javascript]view plaincopyprint? 
    
 var jsonstring=JSON.stringify(obj);  

接下来就要用到今天的主角，$.ajax（）咯，

[javascript]view plaincopyprint? 
    
 $.ajax({  
             type:"POST",  
             url:"SearchVenderRegisterServlet",  
             async:false,  
             data:jsonstring+"\n",  
             success:function(data,textStatus){  
                 if(textStatus=="success"){  
                     alert(data);  
                     $("#loginorregister").dialog("close");  
                 }  
             }  
         });  

这部分的代码中的参数含义是：

type指明发送数据以什么方式进行发送，有两种方法：get和post两种方法，假如我们不声明的话，系统会自动的帮我们判断的。

[javascript]view plaincopyprint? 
    
 async:false,  

则是声明该请求时异步的还是同步的，true代表异步，false代表同步，默认为true。

[javascript]view plaincopyprint? 
    
 data:jsonstring+"\n",  

你要传输的数据

[javascript]view plaincopyprint? 
    
 success:function(data,textStatus){  
                 if(textStatus=="success"){  
                     alert(data);  
                     $("#loginorregister").dialog("close");  
                 }  
             }  

当请求成功时执行的函数，其中data代表返回的数据，textStatus代表返回的状态："success"、"fail"

要了jsp端的代码已经看完了，接下来我们来看一下servlet端的代码

[java]view plaincopyprint? 
    
 public void doPost(HttpServletRequest request, HttpServletResponse response)  
             throws ServletException, IOException {  
   
         response.setContentType("text/html");  
         response.setCharacterEncoding("utf-8");  
         PrintWriter out = response.getWriter();  
         String json=getJsonString(request);  
         System.out.println(json);  
         JSONObject jsonObject=JSONObject.fromObject(json);  
         User user=(User) JSONObject.toBean(jsonObject, User.class);  
         System.out.println("username:"+user.getName());  
         out.write("success");  
         out.flush();  
         out.close();  
     }  
       
 protected String getJsonString(HttpServletRequest request){  
     StringBuffer json=new StringBuffer();  
     try {  
         String line=null;  
         BufferedReader reader = request.getReader();  
         while((line=reader.readLine())!=null){  
             json.append(line);  
         }  
     } catch (IOException e) {  
         // TODO Auto-generated catch block  
         e.printStackTrace();  
     }  
     return json.toString();  
 }  

再次过程中我们需要导入JSON的jar包和其辅助包，至于有需要的人可以到我的资源下载
我已经上传上去了，其他的代码我也没什么好说的，只是一些简单的流操作，主要的是这两句

[java]view plaincopyprint? 
    
 JSONObject jsonObject=JSONObject.fromObject(json);  
 User user=(User) JSONObject.toBean(jsonObject, User.class);  

头一句的作用是将一个json字符串转换成一个json对象，第二句则是将一个json对象转换成一个java对象。当然，毫无疑问的，我们同样的也必须要一个对应的java对象。

[java]view plaincopyprint? 
    
 public class User {  
   
     private String name=null;  
     private String password=null;  
     private String email=null;  
     private String connect=null;  
     private String phone=null;  
     private String address=null;  
     private String post=null;  
       
     public User(String name, String password, String email, String connect,  
             String phone, String address, String post) {  
         this.name = name;  
         this.password = password;  
         this.email = email;  
         this.connect = connect;  
         this.phone = phone;  
         this.address = address;  
         this.post = post;  
     }  
       
     public User() {  
     }  
   
     public String getName() {  
         return name;  
     }  
     public void setName(String name) {  
         this.name = name;  
     }  
     public String getPassword() {  
         return password;  
     }  
     public void setPassword(String password) {  
         this.password = password;  
     }  
     public String getEmail() {  
         return email;  
     }  
     public void setEmail(String email) {  
         this.email = email;  
     }  
     public String getConnect() {  
         return connect;  
     }  
     public void setConnect(String connect) {  
         this.connect = connect;  
     }  
     public String getPhone() {  
         return phone;  
     }  
     public void setPhone(String phone) {  
         this.phone = phone;  
     }  
     public String getAddress() {  
         return address;  
     }  
     public void setAddress(String address) {  
         this.address = address;  
     }  
     public String getPost() {  
         return post;  
     }  
     public void setPost(String post) {  
         this.post = post;  
     }  
       
 }  

好了，全部代码就已经结束咯~~~呵呵呵呵呵呵呵呵呵。。。飘过，睡去咯。。。。

javaPie

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用Jquery--Jsp与servlet之间的数据交互

使用Jquery--Jsp与servlet之间的数据交互分类： Java Web2012-11-02 21:53 2904人阅读评论(4) 收藏举报目录(?)[+]有过java web开发经验的人都知道，Jsp与servlet之间的数据交互多种多样，但最常见的莫过于表单提交咯(这里我没说错吧— ,—),通过jsp标签form的action指定你要发送
复制链接

扫一扫

专栏目录