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 方法的更多相关文章

  1. 用JQuery中的Ajax方法获取web service等后台程序中的方法

    用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...

  2. $.ajax()方法详解 jquery中的ajax方法

    jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...

  3. jQuery中的$.ajax()方法

    jQuery中的$.ajax()方法 $.ajax({ type:"POST", url:"../page/user.action?userId=" + use ...

  4. jquery中的ajax方法参数

    引用来自:http://www.cnblogs.com/tylerdonet/p/3520862.html jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String ...

  5. jquery中的ajax方法

    $.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Strin ...

  6. jquery中的ajax方法参数的用法和他的含义

    jquery中的ajax方法参数的用法和他的含义: 1.url:  要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type:  要求为String类型的参数,请求方式(pos ...

  7. jquery中的ajax方法参数总是记不住,这里记录一下。

    1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...

  8. jquery中的ajax方法详解

    定义和用法ajax() 方法通过 HTTP 请求加载远程数据.该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XML ...

  9. jQuery中操作Ajax方法小结

    有时候,越深入去了解一个点,越发觉得自己无知,而之前当自己晓得一两个片面的点还洋洋自得,殊不知,这是多么讽刺 jQery对Ajax操作进行了封装,常见的 ajax()属于最底层的方法,使用频率很高的 ...

  10. jquery中页面Ajax方法$.load的功能

    load语法 $(".selector").load("url", function(responseText, statusText, xmlhttprequ ...

随机推荐

  1. Ansible基础认识及安装使用详解(week5_day1_part1)--技术流ken

    Ansible简介 ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优点,实现了批量系统配置.批量 ...

  2. 小型音乐播放器插件APlayer.js的简单使用例子

      本篇博客将会给出一个小型音乐播放器插件APlayer.js的使用例子.关于APlayer.js的具体介绍和Github地址,可以参考: https://github.com/MoePlayer/A ...

  3. 【转载】ASP.NET工具类:文件夹目录Directory操作工具类

    在ASP.NET开发网站的过程中,有时候会涉及到文件夹相关操作,如判断文件夹目录是否存在.删除文件夹目录.创建文件.删除文件.复制文件夹等等.这一批有关文件目录的操作可以通过Directory类.Fi ...

  4. SqlServer 技术点总结(持续更新)

    本文是用于记录自己平时遇到的一些SQL问题或知识点,以便以后自己查阅,会持续的更新,增加内容.发在博客园也可以和各位博友共同学习交流,如文中记录的有错误之处希望指出,谢谢. 一.用SQL语句调用作业 ...

  5. [PHP] 算法-选择排序的PHP实现

    选择排序: 1.数组分成前后两个部分,前部分是排序的,后部分是无序的 2.两层循环,先假定当前循环的第一个索引为最小值,内部循环找比该索引还小的值,找到交换 for i;i<len;i++ mi ...

  6. mybatis_12延时加载_懒加载

    延时加载:也叫懒加载 2.1 延迟加载 延迟加载又叫懒加载,也叫按需加载.也就是说先加载主信息,在需要的时候,再去加载从信息. 在mybatis中,resultMap标签 的association标签 ...

  7. 学习HttpClient,从两个小例子开始

    前言 HTTP(Hyper-Text Transfer Protocol,超文本传输协议)在如今的互联网也许是最重要的协议,我们每天做的很多事情都与之有关,比如,网上购物.刷博客.看新闻等.偶尔你的上 ...

  8. cloudera manager 安装配置

    前面cloudera manager 环境准备和安装我参考的是: https://blog.csdn.net/m0_38017084/article/details/82218559 这篇博客,写的非 ...

  9. 7;XHTML表单

    1.表单的功能结构 2.文本栏.密码栏.隐藏栏 3.复选栏.单选栏 4.窗体栏位.区块栏位 5.按钮.图像按钮 6.允许上传文件 7.表单的外框和标题 8.元件的次序和快捷键 表单是提供让读者在网页上 ...

  10. Shell中判断语句if中-z至-d的意思

    [ -a FILE ] 如果 FILE 存在则为真. [ -b FILE ] 如果 FILE 存在且是一个块特殊文件则为真. [ -c FILE ] 如果 FILE 存在且是一个字特殊文件则为真. [ ...