jQueryAjax学习心得

来源：互联网发布：陈赫的淘宝店叫什么编辑：程序博客网时间：2024/05/21 20:30

jQueryAjax使用起来非常方便,简单易用,整理了一些内容和大家分享一下:

页面代码:

  <body>    <form action="oneServlet" method="post" id="form">    姓名:<input type="text" name="name" /><br/>    年龄:<input type="text" name="age" /><br/>    </form>    <input type="button" value="提交" id="load" />    <div id="show"></div>  </body>

后台代码:

package com.zb.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;public class OneServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");String name = request.getParameter("name");String age = request.getParameter("age");PrintWriter out = response.getWriter();out.print("您的姓名是:"+name+";今年"+age+"岁;");out.flush();out.close();}}

1.使用load实现Ajax:

<script type="text/javascript">  $("#load").click(function(){  $("#show").load("oneServlet",$("#form").serializeArray());  });  </script>

2.使用$.ajax({})实现Ajax:

<script type="text/javascript">$("#load").click(function(){$.ajax({url:"oneServlet",data:$("#form").serializeArray()}).done(function(data,statusText){$("#show").empty;$("#show").append("服务器响应状态:"+statusText);$("#show").append(data);}).fail(function(){alert("响应失败");})});  </script>

这两种方式都可以简单的将后台响应内容在<div id="show"></div>中显示出来,只是load方法无需指定回调函数;

记得刚开始用jQueryAjax的时候代码是这样写的:

<script type="text/javascript">$("#load").click(function(){$.ajax({url:"oneServlet",data:$("#form").serializeArray(),success:function(msg){...},error:function(){...}})});  </script>

需要指定success和error属性来执行调用成功或调用失败的函数,而从jQuery1.5开始,$.ajax()方法返回的是一个叫Deferred的对象,可以通过done()方法来执行调用成功的函数,通过fail()方法来执行调用失败的函数,这两种方式其实同样都能实现想要的效果,不过就如同jQuery封装DOM对象给我们操作一样,Deferred对象也是经过封装的,统一处理回调函数的对象而已.喜欢用哪种还是仁者见仁智者见智.

0 0