js进阶 14-3 如何接收load函数从后台接收到的返回数据
一、总结
一句话总结：load方法的回调函数的参数即可接收从后台的返回数据。
1、load方法的回调函数的参数是什么？
语法：load(url,data,function(response,status,xhr))
回调函数参数含义
1. responseTxt-包含调用成功时的结果内容
2. statusTXT-包含调用的状态：可能是"success"、"notmodifide"、"error"、'timeout"、"abort"或"parsererror"中的一个，最长见的是：succes成功;error错误
3. Xhr-经过jQuery封装的XMLHttpRequest对象（保留其本身的所有属性和方法）
2、load的参数中的回调函数的参数中的xhr的属性中包括访问的信息，那么和第一个参数responseTxt的写法区别是什么？
xhr的属性是text，比如访问返回信息，xhr的属性是responseText，而第一个参数是txt
22 $('#test').load('test1.php',{
23 password:'123456'
24 },function(responseTxt,statusTxt,xhr){
25 //alert(responseTxt)
26 //$('#test').html(responseTxt+'谢谢访问')
27 //alert(statusTxt)
28 //if (statusTxt=='success') {alert('数据加载成功')}else(alert('出错了'))
29 //alert(xhr.responseText)
30 alert(xhr.statusText)
31 })
二、如何接收load函数从后台接收到的返回数据
1、相关知识
load()方法
jQuery load()方法作用是从服务器加载数据，是一个简单但强大的AJAX方法。
- .load()从服务器加载数据，然后把返回到HTML放入匹配元素。
语法：load(url,data,function(response,status,xhr))
1.必需的URL参数规定您希望加载的URL。
2.可选的data参数规定与请求一同发送的查询字符串键/值对集合。
3.可选的callback参数是load()方法完成后所执行的函数名称
- 回调函数参数含义
1. responseTxt-包含调用成功时的结果内容
2. statusTXT-包含调用的状态：可能是"success"、"notmodifide"、"error"、'timeout"、"abort"或"parsererror"中的一个，最长见的是：succes成功;error错误
3. Xhr-经过jQuery封装的XMLHttpRequest对象（保留其本身的所有属性和方法）
2、代码
html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <style> 4 </style> 5 <head> 6 <meta charset="UTF-8"> 7 <title>演示文档</title> 8 <script type="text/javascript" src="jquery-3.1.1.min.js"></script> 9 <style type="text/css"> 10 </style> 11 </style> 12 </head> 13 <input type="button" id="btn" value="Ajax测试"> 14 <div id="test"></div> 15 <body> 16 <script type="text/javascript"> 17 $(function(){ 18 $('#btn').click(function(){ 19 //get方式提交数据 20 // $('#test').load('test.php?password=1234560') 21 //post方式提交数据 22 $('#test').load('test1.php',{ 23 password:'123456' 24 },function(responseTxt,statusTxt,xhr){ 25 //alert(responseTxt) 26 //$('#test').html(responseTxt+'谢谢访问') 27 //alert(statusTxt) 28 //if (statusTxt=='success') {alert('数据加载成功')}else(alert('出错了')) 29 //alert(xhr.responseText) 30 alert(xhr.statusText) 31 }) 32 }) 33 }) 34 </script> 35 </body> 36 </html>
php
1 <?php 2 /* 3 //echo "51自学网"; 4 //get方式提交数据 5 if ($_GET['password']=='123456') { 6 echo "登陆成功"; 7 }else{ 8 echo "密码错误"; 9 } 10 */ 11 //post方式提交数据 12 if ($_POST['password']=='123456') { 13 echo "登陆成功"; 14 }else{ 15 echo "密码错误"; 16 } 17 ?>