分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

JQuery的get、post、ajax方法

发布时间:2023-09-06 01:13责任编辑:董明明关键词:暂无标签

1.jQuery $.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

 jQuery.get( url, [data], [callback] ):
 
参数:
 
url (String) :  发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示,会做为QueryString附加到请求URL中。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
 
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。示例代码:

1.1 $.get()代码:

 
 $.get("./Ajax.aspx", 
?{Action:"get",Name:"lulu"},
function (data, textStatus){
alert(data);
alert(textStatus);
alert(this);
}
data: 返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.
this :  在这里this指向的是Ajax请求的选项配置信息
textStaus:请求状态:success,error等等。当然这里捕捉不到error,因为error的时候根本不会运行该回调函数

2.jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

语法:

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.post() 连同请求一起发送数据:

2.1 $.post()代码:

$.post("Ajax.aspx", { Action: "post", Name: "lulu" },function (data, textStatus){// data 可以是 xmlDoc, jsonObj, html, text, 等等.//this; // 这个Ajax请求的选项配置信息,请参考jQuery.get()说到的thisalert(data.result);}, "json");

后端代码:

Response.ContentType = "application/json";Response.Write("{result: ‘" + Request["Name"] + ",你好!(这消息来自服务器)‘}");

如果你设置了请求的格式为"json",此时你没有设置Response回来的ContentType 为:Response.ContentType = "application/json"; 那么你将无法捕捉到返回的数据。

3.jQuery Ajax 事件

Ajax请求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery这里有两种Ajax事件:局部事件 和 全局事件。

3.1 局部事件

 局部事件就是在每次的Ajax请求时在方法内定义的。

3.2 全局事件

 全局事件是每次的Ajax请求都会触发的,它会向DOM中的所有元素广播。

3.3 AJAX参数详细列表:

参数名类型描述
urlString(默认: 当前页地址) 发送请求的地址。
typeString(默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
timeoutNumber设置请求超时时间(毫秒)。此设置将覆盖全局设置。
asyncBoolean(默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
beforeSendFunction发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。
function (XMLHttpRequest) {
this; // the options for this ajax request
}
cacheBoolean(默认: true) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。
completeFunction请求完成后回调函数 (请求成功或失败时均调用)。参数: XMLHttpRequest 对象,成功信息字符串。
function (XMLHttpRequest, textStatus) {
this; // the options for this ajax request
}
contentTypeString(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
dataObject,
String
发 送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 ‘&foo=bar1&foo=bar2‘。
dataTypeString预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:
"xml": 返回 XML 文档,可用 jQuery 处理。
"html": 返回纯文本 HTML 信息;包含 script 元素。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
errorFunction(默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。
function (XMLHttpRequest, textStatus, errorThrown) {
// 通常情况下textStatus和errorThown只有其中一个有值
this; // the options for this ajax request
}
globalBoolean(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModifiedBoolean(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
processDataBoolean(默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。
successFunction请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态
function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
this; // the options for this ajax request
}

3.4 ajax实例代码:

 $(document).ready(function() { ???????????jQuery("#clearCac").click(function() { ???????????????jQuery.ajax({ ???????????????????url: "/Handle/ajax.aspx", ???????????????????type: "post", ???????????????????data: { id: ‘0‘ }, ???????????????????dataType: "json", ???????????????????success: function(msg) { ???????????????????????alert(msg); ???????????????????}, ???????????????????error: function(XMLHttpRequest, textStatus, errorThrown) { ???????????????????????alert(XMLHttpRequest.status); ???????????????????????alert(XMLHttpRequest.readyState); ???????????????????????alert(textStatus); ???????????????????}, ???????????????????complete: function(XMLHttpRequest, textStatus) { ???????????????????????this; // 调用本次AJAX请求时传递的options参数 ???????????????????} ???????????????}); ???????????}); ???????});

JQuery的get、post、ajax方法

原文地址:http://www.cnblogs.com/sagacity-shen/p/7580832.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved