你的位置:首页 > Java教程

[Java教程]AJax 使用Jquery


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

分类: Java Web 2012-11-02 21:53 3108人阅读 评论(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 - 包含
dataType

可选。规定预计的服务器响应的数据类型。

默认地,jQuery 将智能判断。

可能的类型:

  • "
  • "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

可选。规定预期的服务器响应的数据类型。

默认执行智能判断(

使用实例:

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

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

jQuery.ajax([settings]) 参数

描述
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?

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

同时又有个点击的按钮button

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

[javascript] view plaincopyprint?

  1. function usertoregister(){  
  2.         var name=$("input[name='registername']").val().trim();  
  3.         var email=$("input[name='registeremail']").val().trim();  
  4.         var password=$("input[name='registerpassword']").val().trim();  
  5.         var connect=$("input[name='registerconnect']").val().trim();  
  6.         var phone=$("input[name='registerphone']").val().trim();  
  7.         var address=$("input[name='registeraddress']").val().trim();  
  8.         var post=$("input[name='registerpost']").val().trim();  
  9.         var obj=new registerobj(name,password,email,connect,phone,address,post);  
  10.         var jsonstring=JSON.stringify(obj);  
  11.         $.ajax({  
  12.             type:"POST",  
  13.             url:"SearchVenderRegisterServlet",  
  14.             async:false,  
  15.             data:jsonstring+"\n",  
  16.             success:function(data,textStatus){  
  17.                 if(textStatus=="success"){  
  18.                     alert(data);  
  19.                     $("#loginorregister").dialog("close");  
  20.                 }  
  21.             }  
  22.         });  
  23.     }  

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

[javascript] view plaincopyprint?

  1. var name=$("input[name='registername']").val().trim();  
  2.         var email=$("input[name='registeremail']").val().trim();  
  3.         var password=$("input[name='registerpassword']").val().trim();  
  4.         var connect=$("input[name='registerconnect']").val().trim();  
  5.         var phone=$("input[name='registerphone']").val().trim();  
  6.         var address=$("input[name='registeraddress']").val().trim();  
  7.         var post=$("input[name='registerpost']").val().trim();  

然后生成一个javascript对象

[javascript] view plaincopyprint?

  1. var obj=new registerobj(name,password,email,connect,phone,address,post);  

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

[javascript] view plaincopyprint?

  1. function registerobj(name,password,email,connect,phone,address,post){  
  2.         this.name=name;  
  3.         this.password=password;  
  4.         this.email=email;  
  5.         this.connect=connect;  
  6.         this.phone=phone;  
  7.         this.address=address;  
  8.         this.post=post;  
  9.     }  

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

[javascript] view plaincopyprint?

  1. var jsonstring=JSON.stringify(obj);  

接下来就要用到今天的主角,$.ajax()咯,

[javascript] view plaincopyprint?

  1. $.ajax({  
  2.             type:"POST",  
  3.             url:"SearchVenderRegisterServlet",  
  4.             async:false,  
  5.             data:jsonstring+"\n",  
  6.             success:function(data,textStatus){  
  7.                 if(textStatus=="success"){  
  8.                     alert(data);  
  9.                     $("#loginorregister").dialog("close");  
  10.                 }  
  11.             }  
  12.         });  

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

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

[javascript] view plaincopyprint?

  1. async:false,  

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

[javascript] view plaincopyprint?

  1. data:jsonstring+"\n",  

你要传输的数据

[javascript] view plaincopyprint?

  1. success:function(data,textStatus){  
  2.                 if(textStatus=="success"){  
  3.                     alert(data);  
  4.                     $("#loginorregister").dialog("close");  
  5.                 }  
  6.             }  

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

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

[java] view plaincopyprint?

  1. public void doPost(HttpServletRequest request, HttpServletResponse response)  
  2.             throws ServletException, IOException {  
  3.   
  4.         response.setContentType("text/html");  
  5.         response.setCharacterEncoding("utf-8");  
  6.         PrintWriter out = response.getWriter();  
  7.         String json=getJsonString(request);  
  8.         System.out.println(json);  
  9.         JSONObject jsonObject=JSONObject.fromObject(json);  
  10.         User user=(User) JSONObject.toBean(jsonObject, User.class);  
  11.         System.out.println("username:"+user.getName());  
  12.         out.write("success");  
  13.         out.flush();  
  14.         out.close();  
  15.     }  
  16.       
  17. protected String getJsonString(HttpServletRequest request){  
  18.     StringBuffer json=new StringBuffer();  
  19.     try {  
  20.         String line=null;  
  21.         BufferedReader reader = request.getReader();  
  22.         while((line=reader.readLine())!=null){  
  23.             json.append(line);  
  24.         }  
  25.     } catch (IOException e) {  
  26.         // TODO Auto-generated catch block  
  27.         e.printStackTrace();  
  28.     }  
  29.     return json.toString();  
  30. }  

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

[java] view plaincopyprint?

  1. JSONObject jsonObject=JSONObject.fromObject(json);  
  2. User user=(User) JSONObject.toBean(jsonObject, User.class);  

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

[java] view plaincopyprint?

  1. public class User {  
  2.   
  3.     private String name=null;  
  4.     private String password=null;  
  5.     private String email=null;  
  6.     private String connect=null;  
  7.     private String phone=null;  
  8.     private String address=null;  
  9.     private String post=null;  
  10.       
  11.     public User(String name, String password, String email, String connect,  
  12.             String phone, String address, String post) {  
  13.         this.name = name;  
  14.         this.password = password;  
  15.         this.email = email;  
  16.         this.connect = connect;  
  17.         this.phone = phone;  
  18.         this.address = address;  
  19.         this.post = post;  
  20.     }  
  21.       
  22.     public User() {  
  23.     }  
  24.   
  25.     public String getName() {  
  26.         return name;  
  27.     }  
  28.     public void setName(String name) {  
  29.         this.name = name;  
  30.     }  
  31.     public String getPassword() {  
  32.         return password;  
  33.     }  
  34.     public void setPassword(String password) {  
  35.         this.password = password;  
  36.     }  
  37.     public String getEmail() {  
  38.         return email;  
  39.     }  
  40.     public void setEmail(String email) {  
  41.         this.email = email;  
  42.     }  
  43.     public String getConnect() {  
  44.         return connect;  
  45.     }  
  46.     public void setConnect(String connect) {  
  47.         this.connect = connect;  
  48.     }  
  49.     public String getPhone() {  
  50.         return phone;  
  51.     }  
  52.     public void setPhone(String phone) {  
  53.         this.phone = phone;  
  54.     }  
  55.     public String getAddress() {  
  56.         return address;  
  57.     }  
  58.     public void setAddress(String address) {  
  59.         this.address = address;  
  60.     }  
  61.     public String getPost() {  
  62.         return post;  
  63.     }  
  64.     public void setPost(String post) {  
  65.         this.post = post;  
  66.     }  
  67.       
  68. }  

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