当前位置:首页 » HTML/CSS

jQuery 之ajax请求

2013-11-18 21:00 本站整理 浏览(6)

jQuery.ajax();

0、jQuery AJAX 请求

请求 描述

$(selector).load(url,data,callback) 把远程数据加载到被选的元素中

$.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中

$.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据

$.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据

$.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据

$.getScript(url,callback) 加载并执行远程的 JavaScript 文件

(selector) jQuery 元素选择器语法

(url) 被加载的数据的 URL(地址)

(data) 发送到服务器的数据的键/值对象

(callback) 当数据被加载时,所执行的函数

(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)

(options) 完整 AJAX 请求的所有键/值对选项

1、回调函数:

说明:如果要处理$.ajax();得到的数据,需要使用回调函数。

beforeSend、 error,dataFilter,success,complete.

* beforeSend :在发送请求之前调用,并且传入了一个XMLHttpRequest作为参数;

* error : 在请求出错时调用,传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象;

* dataFilter : 在请求成功之后调用,传入返回的数据以及"dataType"参数的值。

并且必须返回新的数据(可能处理过的),传递给success回调函数。

* success 当请求之后调用。传入返回后的数据,以及包含成功代码的字符串;

* complete 当请求完成之后调用这个函数,无论成功或失败,传入XMLHttpRequest对象,以及一个

包含成功或错误代码的字符串;

2、数据类型:

$.ajax() 函数依赖服务器提供的信息来处理返回的数据;

通过dataType 选项可以指定其他不同数据处理方式;xml,html,json,jsonp,script,text;

注意:text 和html 类型返回的数据不会经过处理;数据仅仅简单的将XMLHttpRequest 的

responseText 或 responseHTML属性传递给success回调函数

3、案例:

//加载并执行一个js文件:

$.ajax({

url:"${pageContext.request.contextPath}/test.js",

type:"post",

dataType:"script"

});

4、保存数据到服务器,成功时显示信息:

$.ajax({

url:'${pageContext.request.contextPath}/MyServlet',

type:'post',

data: 'name=John&location=Boston',

success:function(data)

{

alert(data);

}

});

注意:data的方式传入方式有两种: data: {name:"rencai",password:"123"},

//服务器端

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html");

response.setCharacterEncoding("UTF-8");

response.setHeader("Cache-Control","no-cache");

PrintWriter out = response.getWriter();

System.out.println(request.getParameter("name"));

out.println("服务器响应了"); //这是服务器的响应要求

out.flush();

out.close();

}

5、载入一个html网页

$.ajax({

url: "test1.html",

cache: false,

success: function(html){

$("#results").append(html);

}

});