一、JQuery Ajax简介:
Ajax是与服务器交换数据的技术,实现异步更新。
二、JQuery Ajax load()方法:
JQuery load()方法从服务器加载元素,并将返回的数据放入到被选元素中。
语法:$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
1、URL案例
(1)以下是用JQ-Ajax技术来更新一个div区域的内容:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
7 <script>
8 $(function() {
9 $("button").click(function() {
10 $("#div1").load("1.txt");
11 });
12 });
13 </script>
14 </head>
15 <body>
16 <div class="div1" id="div1">注意目录和修改相同的字符编码</div>
17 <button>Ajax-获取txt文件</button>
18 </body>
19 </html>
运行结果如下所示:
点击按钮后:(改变的文字首先要存放在一个txt文件中)
(2)txt文件中还可以放置标签,html中部分代码如下:
1 <script>
2 $(function() {
3 $("button").click(function() {
4 $("#div1").load("1.txt #p1"); /*url参数中可以写JQ选择器,表示下载1.txt文件内容中的id为p1的内容*/
5 });
6 });
7 </script>
2、callback案例:
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含 XMLHttpRequest 对象
(1)callback返回成功案例
1 <script>
2 $(function() {
3 $("button").click(function() {
4 $("#div1").load("1.txt",function(responseTxt,statusTxt,xhr) {
5 if(statusTxt=="success")
6 alert("外部内容加载成功!");
7 if(statusTxt=="error")
8 alert("error:"+xhr.status+":"+xhr.statusTxt);
9 });
10 });
11 });
12 </script>
结果:
(2)callback返回失败案例
1 <script>
2 $(function() {
3 $("button").click(function() {
4 $("#div1").load("2.png",function(responseTxt,statusTxt,xhr) { /*没有2.png这个文件*/
5 if(statusTxt=="success")
6 alert("外部内容加载成功!");
7 if(statusTxt=="error")
8 alert("error:"+xhr.status+":"+xhr.statusTxt);
9 });
10 });
11 });
12 </script>
结果:
三、JQuery get()和post()方法:
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法:$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
$.post() 方法通过 HTTP POST 请求向服务器提交数据。
语法:$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
1、get案例:
1.html部分代码:
1 <script>
2 $(function() {
3 $("button").click(function() {
4 $.get("1.php",function(data,status) {
5 alert("数据:"+data+"\n状态"+status);
6 })
7 });
8 });
9 </script>
1.php代码:
<?php
echo '这个是php文件中的数据';
?>
结果:
2、post()方法 该方法自己未试验成功,大家可以多给指导,以下是网站代码
html代码:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>菜鸟教程(runoob.com)</title>
6 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
7 </script>
8 <script>
9 $(document).ready(function(){
10 $("button").click(function(){
11 $.post("/try/ajax/demo_test_post.php",{
12 name:"菜鸟教程",
13 url:"http://www.runoob.com"
14 },
15 function(data,status){
16 alert("数据: \n" + data + "\n状态: " + status);
17 });
18 });
19 });
20 </script>
21 </head>
22 <body>
23
24 <button>发送一个 HTTP POST 请求页面并获取返回内容</button>
25
26 </body>
27 </html>
demo_test_post.php文件代码:
1 <?php
2 $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
3 $url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
4 echo '网站名: ' . $name;
5 echo "\n";
6 echo 'URL 地址: ' .$url;
7 ?>
结果:
四、$.ajax()方法:执行异步ajax请求
语法:$.ajax({name:value, name:value, ... })
1 <script type="text/javascript">
2 $(function() {
3 $("button").click(function() {
4 $.ajax({
5 url:"1.txt",
6 success:function(result){
7 $("#div1").html(result);
8 }
9 });
10 $.ajax();
11 });
12 });
13 </script>
结果:
五、$.ajaxPrefilter() 方法: 在每个请求发送之前且被$.ajax()处理之前,处理自定义Ajax选项或修改已经存在选项
六、$.ajaxSetup() 方法:为将来的ajax请求设置默认值
语法:$.ajaxSetup({name:value, name:value, ... })
1 <script type="text/javascript">
2 $(function() {
3 $("button").click(function() {
4 $.ajaxSetup({
5 url:"1.txt",
6 success:function(result){
7 $("div").html(result);
8 }
9 });
10 $.ajax();
11 });
12 });
13 </script>
结果:
七、$.ajaxTransport()方法: 创建处理Ajax数据实际传送的对象
八、$.getJSON() 方法:使用http get请求从服务器加载JSON编码的数据
语法:$(selector).getJSON(url,data,success(data,status,xhr))
九、$.getScript()方法: 使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript
十、$.param()方法: 创建数组或对象的序列化表示形式(可用于 AJAX 请求的 URL 查询字符串)
十一、$.post() 方法:使用 AJAX 的 HTTP POST 请求从服务器加载数据
十二、ajaxComplete() 方法:规定 AJAX 请求完成时运行的函数
十三、ajaxError() 方法:规定 AJAX 请求失败时运行的函数
十四、ajaxSend() 方法:规定 AJAX 请求发送之前运行的函数
十五、ajaxStart() 方法:规定第一个 AJAX 请求开始时运行的函数
十六、ajaxStop() 方法:规定所有的 AJAX 请求完成时运行的函数
十七、ajaxSuccess()方法: 规定 AJAX 请求成功完成时运行的函数
十八、load()方法: 从服务器加载数据,并把返回的数据放置到指定的元素中
十九、serialize()方法: 编码表单元素集为字符串以便提交
二十、serializeArray() 方法:编码表单元素集为 names 和 values 的数组
二十一、Jquery中如何将数组转化为json字符串,然后再转化回来?
{ } 和数组 [ ] 组成
JSON.stringify(arr):将json对象arr转化为字符串类型;
JSON.parse(obj):将字符串类型的json数据转化为json对象;
(1)从服务器端接收数据:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h2>使用 XMLHttpRequest 来获取文件内容</h2>
<p>文件内容是标准的 JSON 格式,可以使用 JSON.parse 方法将其转换为 JavaScript 对象。</p>
<p id="demo"></p>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
};
xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);
xmlhttp.send();
</script>
<p>查看 JSON 文件数据 <a href="/try/ajax/json_demo.txt" target="_blank">json_demo.txt</a></p>
</body>
</html>
结果:
(2)解析异常 (JSON不能存储日期对象和函数,解决:先将其转换成字符串,再将其转换为对象)
代码1:
var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text, function (key, value) {
if (key == "initDate") {
return new Date(value);
} else {
return value;
}});
document.getElementById("demo").innerHTML = obj.name + "创建日期:" + obj.initDate;
代码2:
var text = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.alexa = eval("(" + obj.alexa + ")");
document.getElementById("demo").innerHTML = obj.name + " Alexa 排名:" + obj.alexa();