js进阶 14-4 $.get()方法和$.post()方法如何使用

一、总结

一句话总结：$.get（URL,callback); $.post(URL,data,callback); callback函数和load()方法里面的callback一样。

1、load方法和$.get()以及$.post()方法的区别是什么（load也可以实现ajax的post和get请求）？

load方法是局部变量，前面需要加上监听对象，监听对象就是返回结果放置的元素
$.get()以及$.post()时全局方法，不必加上监听对象

20             // $('#test').load('test.php?password=1234560')

40                   $.get('testGet.php',{password:'123456'},function(responseTxt,statusTxt){
41                       // alert(responseTxt)
42                       $('#test').html('responseTxt:'+responseTxt+'<br/>'+'status: '+statusTxt)
43                   })

2、$.get()提交数据四种方法？

a、url中?接参数

b、字符串（jquery1.3之后支持）

c、json对象

20                   //get方式提交数据1
21               /*
22                   $.get('test.html',function(data,statusTxt){
23                       alert(data)
24                       alert(statusTxt)
25                   })    
26              
27                   //get方式提交数据2
28                   $.get('testGet.php?password=123456',function(responseTxt,statusTxt){
29                       // alert(responseTxt)
30                       $('#test').html('responseTxt:'+responseTxt+'<br/>'+'status: '+statusTxt)
31                   })
32         
33                //get方式提交数据3
34                   $.get('testGet.php','password=123456',function(responseTxt,statusTxt){
35                       // alert(responseTxt)
36                       $('#test').html('responseTxt:'+responseTxt+'<br/>'+'status: '+statusTxt)
37                   })
38                   
39                    //get方式提交数据4
40                   $.get('testGet.php',{password:'123456'},function(responseTxt,statusTxt){
41                       // alert(responseTxt)
42                       $('#test').html('responseTxt:'+responseTxt+'<br/>'+'status: '+statusTxt)
43                   })
44              
45                //post方式提交数据1
46                   $.post('testPost.php',{password:'123456'},function(responseTxt,statusTxt){
47                       // alert(responseTxt)
48                       $('#test').html('responseTxt:'+responseTxt+'<br/>'+'status: '+statusTxt)
49                   })

二、$.get()方法和$.post()方法如何使用

1、相关知识

get()和post()方法

两种在客户端和服务器端进行请求-响应的常用方法是：GET和POST.
GET基本上用于从服务器获得（取回）数据。注释：GET方法可能返回缓存数据。
POST也可用于从服务器获取数据。不过，POST方法不会缓存数据，并且常用于连同请求一起发送数据。

$.get（URL,callback);
参数
1. 第一个参数是我们希望请求的URL;
2. 第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
$.post(URL,data,callback);
参数
1. 必需的URL参数规定您希望请求的URL。
2. 可选的data参数规定连同请求发送的数据
3. 可选的callback参数是请求成功后所执行的函数名。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态
4. type：返回内容格式,xml,html,script,json,text,_default。

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 <body>
14     <input type="button" id="btn" value="Ajax测试">
15     <div id="test"></div>
16 <script type="text/javascript">
17 $(function(){
18         $(function(){
19             $('#btn').click(function(){
20                   //get方式提交数据1
21               /*
22                   $.get('test.html',function(data,statusTxt){
23                       alert(data)
24                       alert(statusTxt)
25                   })    
26              
27                   //get方式提交数据2
28                   $.get('testGet.php?password=123456',function(responseTxt,statusTxt){
29                       // alert(responseTxt)
30                       $('#test').html('responseTxt:'+responseTxt+'<br/>'+'status: '+statusTxt)
31                   })
32         
33                //get方式提交数据3
34                   $.get('testGet.php','password=123456',function(responseTxt,statusTxt){
35                       // alert(responseTxt)
36                       $('#test').html('responseTxt:'+responseTxt+'<br/>'+'status: '+statusTxt)
37                   })
38                   
39                    //get方式提交数据4
40                   $.get('testGet.php',{password:'123456'},function(responseTxt,statusTxt){
41                       // alert(responseTxt)
42                       $('#test').html('responseTxt:'+responseTxt+'<br/>'+'status: '+statusTxt)
43                   })
44              
45                //post方式提交数据1
46                   $.post('testPost.php',{password:'123456'},function(responseTxt,statusTxt){
47                       // alert(responseTxt)
48                       $('#test').html('responseTxt:'+responseTxt+'<br/>'+'status: '+statusTxt)
49                   })
50                */
51    //post方式提交数据2
52               $.post('testPost.php','password=123456',function(responseTxt,statusTxt){
53                       // alert(responseTxt)
54                       $('#test').html('responseTxt:'+responseTxt+'<br/>'+'status: '+statusTxt)
55                   })
56         })
57     })
58 })
59 </script>
60 </body>
61 </html>

php（post请求和get请求）

get

1 <?php
2     //get方式提交数据
3     if ($_GET['password']=='123456') {
4         echo "登陆成功";
5     }else{
6         echo "密码错误";
7     }
8 
9 ?>

post

1 <?php
2     // //post方式提交数据
3     if ($_POST['password']=='123456') {
4         echo "登陆成功";
5     }else{
6         echo "密码错误";
7     }
8 ?>