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

ゞ浴缸里的玫瑰 2022-01-06 23:23 486阅读 0赞

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

转载于:https://www.cnblogs.com/Renyi-Fan/p/9339355.html