微信扫一扫打赏支持

js进阶 14-3 如何接收load函数从后台接收到的返回数据

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 ?>

 

 

 

 

 
posted @ 2018-07-20 02:05  范仁义  阅读(1487)  评论(0)  编辑  收藏  举报