jQuery —— Ajax

1. jQuery Ajax 简介

• jQuery 对 Ajax 操作封装了一套跨浏览器，方便用户使用的 Api；

 

2. jQuery Ajax Load 方法

• 远程请求，把请求的数据载入到 DOM 里；
• load( url , [,data] , [,callback])
  • Url：请求地址
  • Data:请求参数
  • Callback:请求完成后的回调方法

 

3. jQuery Ajax Get/Post 方法

• Ajax 请求后台；
• $.post(URL,data,callback);
  • Url：请求地址
  • Data:请求参数
  • Callback:请求完成后的回调方法

• <script type="text/javascript">
      $(document).ready(function(){
          $("#b1").click(function(){
              $("#d1").load("/HeadFirstJquery/ajax?action=load",{name:"张三",age:14},function(){
                  alert("执行完成");
              });
          });
          $("#b2").click(function(){
              $.post("/HeadFirstJquery/ajax?action=post",{id:1},function(data,textStatus){
                  alert("请求状态："+textStatus);
                  alert("返回数据："+data);
                  data=eval("("+data+")");
                  $("#name").val(data.name);
                  $("#age").val(data.age);
              });
          });
      });
  </script>

  public class AjaxServlet extends HttpServlet{
  
      private static final long serialVersionUID = 1L;
  
      @Override
      protected void doGet(HttpServletRequest request, HttpServletResponse response)
              throws ServletException, IOException {
          this.doPost(request, response);
      }
  
      @Override
      protected void doPost(HttpServletRequest request, HttpServletResponse response)
              throws ServletException, IOException {
          request.setCharacterEncoding("utf-8");
          String action=request.getParameter("action");
          if("load".equals(action)){
              this.load(request, response);
          }else if("post".equals(action)){
              this.post(request, response);
          }
      }
      
      private void load(HttpServletRequest request, HttpServletResponse response)
              throws ServletException, IOException {
          response.setContentType("text/html;charset=utf-8");
          String name=request.getParameter("name");
          String age=request.getParameter("age");
          System.out.println("name:"+name);
          System.out.println("age:"+age);
          PrintWriter out=response.getWriter();
          out.println("jquery Ajax");
          out.flush();
          out.close();
      }
      
      private void post(HttpServletRequest request, HttpServletResponse response)
              throws ServletException, IOException {
          response.setContentType("text/html;charset=utf-8");
          String id=request.getParameter("id");
          System.out.println("id:"+id);
          PrintWriter out=response.getWriter();
          out.println("{name:'张三',age:14}");
          out.flush();
          out.close();
      }
  
  }