jQuery -- 光阴似箭（五）：AJAX 方法
jQuery -- 知识点回顾篇（五）：AJAX 方法
1. $.ajax 方法：用于执行 AJAX（异步 HTTP）请求。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js" ></script>
<script type="text/javascript" >
$(function(){
//语法格式：$.ajax({name:value, name:value, ... })
//该参数规定 AJAX 请求的一个或多个名称/值对。
$("#btn_ajax").click(function(){
$.ajax({
url:"Test_ajax.aspx",
success:function(result){
$("#myDiv1").html(result);
}
});
});
});
</script>
</head>
<body>
<button type="button" id="btn_ajax">ajax</button>
<div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;">
</div>
</body>
</html>
2. $.ajaxSetup() 方法：为将来的 AJAX 请求设置默认值。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
//语法格式：$.ajaxSetup({name:value, name:value, ... })
//该参数为带有一个或多个名称/值对的 AJAX 请求规定设置。
$("#btn_ajax").click(function(){
$.ajaxSetup({
url:"Test_ajax.aspx",
success:function(result){
$("#myDiv1").html(result);
}
});
$.ajax();
});
});
</script>
</head>
<body>
<button type="button" id="btn_ajax">ajax</button>
<div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;">
</div>
</body>
</html>
3. $.get() 方法：使用 HTTP GET 请求从服务器加载数据。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js" ></script>
<script type="text/javascript" >
$(function(){
//语法格式：$.get(URL,data,function(data,status,xhr),dataType)
//URL: 必需参数。规定您需要请求的 URL。
//data: 可选参数。规定连同请求发送到服务器的数据。
//function(data,status,xhr)：可选参数。规定当请求成功时运行的函数。
//dataType：可选参数。规定预期的服务器响应的数据类型。
$("#btn_ajax").click(function(){
$.get("Test_ajax.aspx",function(data){
alert("数据: " + data );
});
});
});
</script>
</head>
<body>
<button type="button" id="btn_ajax">ajax</button>
<div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;">
</div>
</body>
</html>
4. $.getJSON() 方法：使用 AJAX 的 HTTP GET 请求获取 JSON 数据。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("#btn_ajax").click(function(){
//语法格式： $(selector).getJSON(url,data,success(data,status,xhr))
//url：必需参数。规定将请求发送到哪个 URL。
//data：可选参数。规定发送到服务器的数据。
//success(data,status,xhr)：可选参数。规定当请求成功时运行的函数。
$.getJSON("Test_ajax.aspx",function(result){
$("myDiv1").text(result);
});
});
});
</script>
</head>
<body>
<button type="button" id="btn_ajax">ajax</button>
<div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;">
</div>
</body>
</html>
5. $.getScript() 方法：使用 AJAX 的 HTTP GET 请求获取和执行 JavaScript。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("#btn_ajax").click(function(){
//语法格式： $(selector).getScript(url,success(response,status))
//url: 必需参数。规定将请求发送到哪个 URL。
//success(response,status)： 可选参数。规定当请求成功时运行的函数。
$.getScript("Test_ajax_script.js");
});
});
</script>
</head>
<body>
<button type="button" id="btn_ajax">ajax</button>
<div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;">
</div>
</body>
</html>
6. $.param() 方法创建数组或对象的序列化表示形式。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
personObj=new Object();
personObj.name="xiaohuzi";
personObj.age=26;
personObj.web="xiaohuzi.test.com";
//语法格式：$.param(object,trad)
//object: 必需参数。规定要序列化的数组或对象。
//trad: 可选参数。布尔值，指定是否使用参数序列化的传统样式。
$("#btn_ajax").click(function(){
$("#myDiv1").text($.param(personObj));
});
});
</script>
</head>
<body>
<button type="button" id="btn_ajax">ajax</button>
<div id="myDiv1" style="height:30px;padding: 10px;border:2px solid blue;">
</div>
</body>
</html>
7. $.post() 方法：使用 HTTP POST 请求从服务器加载数据。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
//语法格式：$(selector).post(URL,data,function(data,status,xhr),dataType)
//URL: 必需参数。规定将请求发送到哪个 URL。
//data: 可选参数。规定连同请求发送到服务器的数据。
//function(data,status,xhr): 可选参数。规定当请求成功时运行的函数。
//dataType: 可选参数。规定预期的服务器响应的数据类型。
$("#btn_ajax").click(function(){
$.post("Test_ajax.aspx",function(data){
alert("Data: " + data );
});
});
});
</script>
</head>
<body>
<button type="button" id="btn_ajax">ajax</button>
<div id="myDiv1" style="height:30px;padding: 10px;border:2px solid blue;">
</div>
</body>
</html>
8. ajaxComplete() 方法：规定 AJAX 请求完成时运行的函数。
ajaxStart() 方法：规定 AJAX 请求开始时运行的函数。
ajaxSend() 方法：规定 AJAX 请求即将发送时运行的函数。
ajaxError() 方法：规定 AJAX 请求失败时运行的函数。
ajaxStop() 方法：规定所有的 AJAX 请求完成时运行的函数。
ajaxSuccess() 方法：规定 AJAX 请求成功完成时运行的函数。
load() 方法：从服务器加载数据，并把返回的数据放置到指定的元素中。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
//语法格式：$(document).ajaxSend(function(event,xhr,options))
//function(event,xhr,options) 必需。规定当请求成功时运行的函数。
$(document).ajaxSend(function(){
$("#myDiv1").css("border","5px solid pink");
});
//语法格式：$(document).ajaxStart(function())
//function(): 必需参数。规定当 AJAX 请求开始时运行的函数。
$(document).ajaxStart(function(){
$("#myDiv1").css("display","block");
});
//语法格式：$(document).ajaxStop(function())
//function(): 必需参数。规定所有的 AJAX 请求完成时运行的函数。
$(document).ajaxStop(function(){
$("#myDiv1").css("border","3px solid green");
});
//语法格式：$(document).ajaxError(function(event,xhr,options,exc))
//function(event,xhr,options,exc)：必需参数。规定当请求失败时运行的函数。
$(document).ajaxError(function(){
$("#myDiv1").css("border","3px solid red");
});
//语法格式：$(document).ajaxSuccess(function(event,xhr,options))
//function(event,xhr,options): 必需参数。规定如果请求成功时运行的函数。
$(document).ajaxSuccess(function(){
$("#myDiv1").css("border","3px solid yellow");
});
//语法格式：$(document).ajaxComplete(function(event,xhr,options))
//function(event,xhr,options)： 必需参数。规定当请求完成时运行的函数。
$(document).ajaxComplete(function(){
$("#myDiv1").css("display","none");
}); //语法格式：$(selector).load(url,data,function(response,status,xhr))
//url：必需参数。规定您需要加载的 URL。
//data：可选参数。规定连同请求发送到服务器的数据。
//function(response,status,xhr)：可选参数。规定 load() 方法完成时运行的回调函数。
$("#btn_ajax").click(function(){
$("#txt").load("Test_ajax.aspx");
});
});
</script>
</head>
<body>
<button type="button" id="btn_ajax">ajax</button>
<div id="myDiv1" style="height:30px;padding: 10px;border:2px solid blue;">
</div>
</body>
</html>
9. serialize() 方法：通过序列化表单值创建 URL 编码文本字符串。
serializeArray() 方法：通过序列化表单值来创建对象（name 和 value）的数组。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
//语法格式：$(selector).serialize()
//您可以选择一个或多个表单元素（如输入和/或文本区），或表单元素本身。
//序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
$("#btn_serialize").click(function(){
$("#myDiv1").text($("form").serialize());
});
//语法格式：$(selector).serializeArray()
//serializeArray() 方法通过序列化表单值来创建对象（name 和 value）的数组。
//您可以选择一个或多个表单元素（如输入和/或文本区），或表单元素本身。
$("#btn_serializeArray").click(function(){
x=$("form").serializeArray();
$.each(x, function(i, field){
$("#myDiv2").append(field.name + ":" + field.value + " ");
});
});
});
</script>
</head>
<body>
<form action="">
姓名: <input type="text" name="Name" value="XiaoHuzi" /><br>
年龄: <input type="text" name="Age" value="26" /><br>
工作: <input type="text" name="Job" value="IT" /><br>
</form>
<button type="button" id="btn_serialize">serialize</button>
<button type="button" id="btn_serializeArray">serializeArray</button>
<div id="myDiv1" style="height:30px;padding: 10px;border:2px solid blue;">
</div>
<div id="myDiv2" style="height:30px;padding: 10px;border:2px solid green;">
</div>
</body>
</html>
jQuery -- 光阴似箭（五）：AJAX 方法的更多相关文章
- 用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
- $.ajax()方法详解 jquery中的ajax方法
jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...
- jQuery中的$.ajax()方法
jQuery中的$.ajax()方法 $.ajax({ type:"POST", url:"../page/user.action?userId=" + use ...
- jquery中的ajax方法参数
引用来自:http://www.cnblogs.com/tylerdonet/p/3520862.html jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String ...
- jquery中的ajax方法
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Strin ...
- jquery中的ajax方法参数的用法和他的含义
jquery中的ajax方法参数的用法和他的含义: 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(pos ...
- jquery中的ajax方法参数总是记不住，这里记录一下。
1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...
- jquery中的ajax方法详解
定义和用法ajax() 方法通过 HTTP 请求加载远程数据.该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XML ...
- jQuery中操作Ajax方法小结
有时候,越深入去了解一个点,越发觉得自己无知,而之前当自己晓得一两个片面的点还洋洋自得,殊不知,这是多么讽刺 jQery对Ajax操作进行了封装,常见的 ajax()属于最底层的方法,使用频率很高的 ...
- jquery中页面Ajax方法$.load的功能
load语法 $(".selector").load("url", function(responseText, statusText, xmlhttprequ ...
随机推荐
- 隐马尔可夫模型（HMM）及Viterbi算法
HMM简介 对于算法爱好者来说,隐马尔可夫模型的大名那是如雷贯耳.那么,这个模型到底长什么样?具体的原理又是什么呢?有什么具体的应用场景呢?本文将会解答这些疑惑. 本文将通过具体形象的例子来引 ...
- asp.net core webapi 生成导出excel
/// <summary> /// 下载订单 /// </summary> /// <param name="model"></param ...
- @Html.Partial 和 @Html.RenderPartial 异同
相同点:这两个的性质都是一样, 作用都是将View给镶入进来 不同点: Partial 回传的一个Object (MvcHtmlString), 回传一个String 把一堆Html给回传出来, 然后 ...
- 博客使用base64编码图片测试
为了解决发博客时需要先要上传,所以查了一下这个方法 1.把本地图片转为base64编码的字符串, 网上有很多提供这个功能的网站,转换后像这样 data:image/jpeg;base64,/9j/4A ...
- MHA高可用
MHA(Master High Availability)目前在 MySQL 高可用方面是一个相对成熟的解决方案,它由日本 DeNA 公司 youshimaton(现就职于 Facebook 公司)开 ...
- SQL 注入漏洞
首先要知道sql注入形成的原因:用户输入的数据被sql解释器执行 sql注入又分:数字型,字符型,cookie 注入,post注入,延时注入,搜索注入,base64注入 如何甄别一个模块是否有sql注 ...
- 第三讲 smart qq 登录成功后获取 vfwebqq ，psessionid，hash
public static void Login_GetPHV() { string urldata = "{\"ptwebqq\":\"#{ptwebqq}\ ...
- C#设计模式之六适配器模式（Adapter Pattern）【结构型】
一.引言 从今天开始我们开始讲[结构型]设计模式,[结构型]设计模式有如下几种:适配器模式.桥接模式.装饰模式.组合模式.外观模式.享元模式.代理模式.[创建型]的设计模式解决的是对象创建的问题,那[ ...
- Js中的闭包原理
要了解清楚js中的闭包制机,那么得先了解全局执行环境.块级执行环境.函数执行环境.变量对象.环境栈.作用域链.摧毁执行环境. 全局执行环境 全局执行环境指的是最外层的执行环境.在web中全局执行环境被 ...
- vue-cli 3.x 开发插件并发布到 npm
为了摆脱咸鱼的身份,我给自己定了一个开源项目的目标 于是抽空写了一个 textarea,打算发布到 npm 的时候却遇到了问题 之前用 vue-cli 2.x 的时候,打包配置项非常透明,可以很容易的 ...