第1章 WEB前端开发工程师-jQuery框架 1-23: jQuery Ajax$.get()和$.post()

 

                                            jQuery Ajax$.get()和$.post()

本节课所讲内容：

1.Ajax 概述

2.load()方法

3.$.get()和$.post()

4.$.getScript()和$.getJSON()

5.$.ajax()方法

6.表单序列化

                                                                   主讲教师：Head老师

 

三．$.get() 和$.post()

.load()方法是局部方法，因为他需要一个包含元素的 jQuery 对象作为前缀。而$.get()和

$.post()是全局方法，无须指定某个元素。对于用途而言，.load()适合做静态文件的异步获取，

而对于需要传递参数到服务器页面的，$.get()和$.post()更加合适。

$.get()方法有四个参数，前面三个参数和.load()一样，多了一个第四参数 type，即服务

器返回的内容格式：包括 xml、html、script、json、jsonp 和 text。第一个参数为必选参数，

后面三个为可选参数。

//使用$.get()异步返回 html 类型

$(function(){ 

                             $('input').click(function(){      

                                        $.post('test.php',{       

                                                    url:'head'

                                        },function(response, status, xhr){        

                                                    if(status=='success'){  

                                                                $('#ad').html(response);

                                                    }

                                        })

                             })

                 })

PHP文件

if($_GET['url']=='head'){  

                 echo '数据请求成功，或得Head老师的QQ';

     }else{  

                 echo '数据请求失败';

     }

 

     if($_POST['url']=='head'){       

                 echo '数据请求成功，或得Head老师的QQ:3069433707';

     }else{  

                 echo '数据请求失败';

     }

注意：第四参数 type 是指定异步返回的类型。一般情况下 type 参数是智能判断，并不

需要我们主动设置，如果主动设置，则会强行按照指定类型格式返回。

 

$.post()方法的使用和$.get()基本上一致，他们之间的区别也比较隐晦，基本都是背后的

不同，在用户使用上体现不出。具体区别如下：

1.GET 请求是通过 URL 提交的，而 POST 请求则是 HTTP 消息实体提交的；

2.GET 提交有大小限制（2KB），而 POST 方式不受限制；

3.GET 方式会被缓存下来，可能有安全性问题，而 POST 没有这个问题；

4.GET 方式通过$_GET[]获取，POST 方式通过$_POST[]获取。

四．$.getScript() 和$.getJSON()

jQuery 提供了一组用于特定异步加载的方法：$.getScript()，用于加载特定的 JS 文件；

$.getJSON()，用于专门加载 JSON 文件。

有时我们希望能够特定的情况再加载 JS 文件，而不是一开始把所有 JS 文件都加载了，

这时课时使用$.getScript()方法。

$('input').click(function(){

                                               $.getScript('test.js');

                                    })

                       

            $('input').click(function(){       

                                               $.getJSON('test.json',function(response, status, xhr){ 

                                                           alert(response[0].url);

                                               });

                                    })