Ajax(二) — Ajax初步 : $.post 方法与 $.ajax 方法

来源:互联网 发布:数据恢复培训 编辑:程序博客网 时间:2024/06/10 19:52

1.$.post方法

通过远程 HTTP POST 请求载入信息。

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。

post.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script src="../../js/jquery-1.7.2.js"></script><script src="post.js"></script></head><body></body></html>
post.js

$(function(){/** * 该方法是jquery对最原始的ajax请求做的封装 * 参数1:   url * 参数2:   客户端传递的参数 * 参数3:   回调函数:需要注意两点: * 1.是服务器成功返回时要执行的函数 * 2.该回调函数必须是readyState的值为4,status的值为200时,才能调用 * (一旦服务端出错,status状态码改变,回调函数不再执行) * 参数4:   返回内容的格式,一般都是json */$.post("../../AjaxPostServlet",null,function(data){alert(data);//data就是服务器端的返回值});/** * 注意:post方法只能接受到服务端响应成功后的结果,如果服务器端失败,那么post方法是无法接受到的 * 对于Servlet而言,如果内部出错,service方法的调用者会更改status的值 * 但是Struts2不会修改status的值,无论服务端是否出错,ajax都只是感应正确的返回 */});
Servlet

package cnc.cil.ajax.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 AjaxPostServlet extends HttpServlet {public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html");PrintWriter out = response.getWriter();//int i = 10 / 0;out.println("$.post -> success");out.flush();out.close();}}
2.$.ajax 方法

通过 HTTP 请求加载远程数据。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。

最简单的情况下,$.ajax()可以不带任何参数直接使用。

注意,所有的选项都可以通过$.ajaxSetup()函数来全局设置。

回调函数

如果要处理$.ajax()得到的数据,则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

  • beforeSend 在发送请求之前调用,并且传入一个XMLHttpRequest作为参数。
  • error 在请求出错时调用。传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话)
  • dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。
  • success 当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
  • complete 当请求完成之后调用这个函数,无论成功或失败。传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串。
ajax.js

$(function(){// json {key:value,key:value}$.ajax({url:"../../AjaxAjaxServlet",success:function(){//如果服务器端成功响应,则执行该函数alert("success");},error:function(){ //如果服务器端错误,则响应该函数alert("error");},type:'POST'  //默认是GET});});

即使是服务端出错$.ajax方法也可以接受,所以,一般采用$.ajax的方式


0 0
原创粉丝点击