600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > jq实现ajax访问服务器 jQuery实战读书笔记(第八章 使用 Ajax 与服务器通信)

jq实现ajax访问服务器 jQuery实战读书笔记(第八章 使用 Ajax 与服务器通信)

时间:2021-06-23 17:16:32

相关推荐

jq实现ajax访问服务器 jQuery实战读书笔记(第八章 使用 Ajax 与服务器通信)

1. 加载内容到元素中

1.1 使用 jQuery 加载内容

load(url, parameters, callback)

url - 服务器端资源的URL

parameters - 作为请求参数传递的数据,可以是字符串(作为查询字符串),也可以是对象(属性会被序列化为正确编码的参数),或者对象组成的数组。如果是对象或数组,则使用POST请求,如果省略或者指定为字符串,则使用GET请求。

callback - 回调函数,传入的参数是响应文本、状态字符串(通常是 success)以及XHR实例,函数上下文是目标元素。

示例:

$('#someContainer').load('someResource');

$('.injectMe').load("/someResource div");

序列化表单数据:serialize() 返回格式化的查询字符串

serializeArray() 返回表单数据组成的数组

1.2 加载动态的 HTML 片段

$("#bootChooserControl").load("/jqia2/action/fetchBootStyleOptions");

$("#bootChooserControl").change(function(event){

$("#productDetailPane").load("/jqia2/action/fetchProductDetails",

{style: $(event.target).val()},

function(){$("[value='']", event.target).remove();}

);

});

2. 发起 GET 和 POST 请求

上面的示例,第2个load()实际上发送的是POST请求,这并不合理,可以改用另一个函数来发起 Ajax 请求。

2.1 使用 GET 获取数据

$.get(url, parameters, callback, type)

url - 服务器端资源的URL

parameters - (字符串|对象|数组)

callback - 可选的回调函数,在请求成功完成时调用。参数是响应主体和文本信息,以及XHR实例。

type - 指定如何解析响应主体,(可选)可以是:html、text、xml、json、script或jsonp。

示例:

$("#bootChooserControl").change(function(event){

$.get("/jqia2/action/fetchProductDetails",

{style: $(event.target).val()},

function(resposne){

$("#productDetailPane").html(response);

$("[value='']", event.target).remove();

} // fn

); // get

});

2.2 获取 JSON 数据

$.getJSON(url, parameters, callback)

2.3 发起 POST 请求

$.post(url, parameters, callback, type)

2.4 实现级联下拉列表

$('#bootChooserControl').load('/jqia2/action/fetchBootStyleOptions');

$('#bootChooserControl').change(function(event){

$('#productDetailPane').load('/jqia2/action/fetchProductDetails',

$(this).serialize()

);

$('#colorChooserControl').load('/jqia2/action/fetchColorOptions',

$(this).serialize(),

function(){

$(this).attr('disabled',false);

$('#sizeChooserControl').attr('disabled',true).html("");

}

);

});

$('#colorChooserControl').change(function(event){

$('#sizeChooserControl').load('/jqia2/action/fetchSizeOptions',

$('#bootChooserControl,#colorChooserControl').serialize(),

function(){

$(this).attr('disabled',false);

}

);

});

$('#selectionsPane').change(function(event){

$('[value=""]',event.target).remove();

});

3. 完全控制 Ajax 请求

3.1 发起带所有参数的Ajax请求

$.ajax(options)

3.2 设置请求默认值

$.ajaxSetup(options)

示例:

$.ajaxSetup({

type: 'POST',

timeout: 5000,

dataType: 'html'

});

3.3 处理 Ajax 事件

局部事件和全局事件。

局部事件由回调函数来处理,全局事件可以通过bind()创建事件处理器。全局事件会广播到DOM中的每个元素上。

事件名称

ajaxStart

beforeSend

ajaxSend

success

ajaxSuccess

error

ajaxError

complete

ajaxComplete

ajaxStop

除了使用bind(),还提供了快捷函数:

ajaxComplete(callback)

ajaxError(callback)

ajaxSend(callback)

ajaxStart(callback)

ajaxStop(callback)

ajaxSuccess(callback)

4. 整合所有知识

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。