有过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) | 可选。规定当请求成功时运行的函数。 额外的参数:
|
dataType | 可选。规定预计的服务器响应的数据类型。 默认地,jQuery 将智能判断。 可能的类型:
|
$.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() 设置任何选项的默认值。 |
$.ajax({ url: "test.html", context: document.body, success: function(){ $(this).addClass("done"); }});至于更加详细的参数信息大家可以点击此链接进行预读: http://www.w3school.com.cn/jquery/ajax_ajax.asp 或者我在接下面的代码中进行部分的讲解。
好了,例如我有个jsp文件SearchVender.jsp。里面有几个输入框:
- <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>
而我在script中的代码,当我点击按钮时
- 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");
- }
- }
- });
- }
- 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);
- 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;
- }
- 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");
- }
- }
- });
type指明发送数据以什么方式进行发送,有两种方法:get和post两种方法,假如我们不声明的话,系统会自动的帮我们判断的。
- async:false,
- data:jsonstring+"\n",
- success:function(data,textStatus){
- if(textStatus=="success"){
- alert(data);
- $("#loginorregister").dialog("close");
- }
- }
要了jsp端的代码已经看完了,接下来我们来看一下servlet端的代码
- 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();
- }
我已经上传上去了,其他的代码我也没什么好说的,只是一些简单的流操作,主要的是这两句
- JSONObject jsonObject=JSONObject.fromObject(json);
- User user=(User) JSONObject.toBean(jsonObject, User.class);
- 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;
- }
- }