jQuery实现Ajax的方法

jQuery中的ajax

jQuery中封装了很多可以实现异步交互的Ajax的方法，今天就来简单介绍一下，这些方法的具体用法

一、jQueryElement.load()

• 参数:url,[data],callback
• 注意:
  • 1.data不写默认用的方式是get。2.data有参数的话默认的方式就是post
  • 返回的内容会写在调用它的jQueryElement对象中

$(function () {
            $('#btn').click(function () {
                /**
                 * load()是实现ajax最简单的方法
                 * 参数:url,[data],[callback](返回结果的函数)
                 * 注意:1.data不写默认用的方式是get。2.data有参数的话默认的方式就是post
                 * */
                $('#btn').load('data.json',{name:'zjl'},function () {
                        console.log('加载成功！！')
                })
            })
  })

二、$.get()和$.post()

• 参数:url,data,callback,type(返回的数据类型)
• 注意:
  • 请求方法固定为get
  • 返回的结果会返回在callback的形参中
  • post的用法和get基本类似

 <script>
        $(function () {
            $('#btn').click(function () {
               /**
                * $.get()是实现ajax的方法，并且方法固定为get
                * 参数:url,data,callback,type(返回数据的类型)
                * 注意:返回的结果会在callback的形参中
                *
                * */
               $.get('data.json',{name:'zjl'},function (response) {
                   console.log(response)
               },'json')
            })
        })
    </script>

三、$.ajax()

$.ajax()是最灵活的ajax请求方法

• 参数:url,settings
• setting中常用的属性
  • type–请求的方法
  • data–发送到服务端的数据
  • dataType–客户端向服务端接受数据的格式
  • success–客户端返回数据的回调函数。有三个数据(data,textStatus,jqXHR)
    • data为返回的数据
    • textStatus为服务器的返回的状态信息
    • jqXHR为ajax原始对象
• 注意：settings是个对象，期中的值为key/value格式的

<script>
    $(function () {
        $('#btn').click(function () {
           $.ajax('data.json',{
               type:'get',
               data:{name:'zjl'},
               dataType:'text',
               success:function (data,textStatus,jqXHR) {
                   console.log(data,textStatus)
               }
           })
        })
    })
</script>

四、$.getScript()

getScript用于动态加载和执行js文件

• 参数：url,[callback]
• 注意：callback中的data为字符串格式的js文本
• 用途:动态加载js文件可以节省第一次加载页面时的时间

<script>
    $(function () {
        $('#btn').click(function () {
            /**
             * getScript用于动态加载和执行js文件
             * 参数:url,[callback]
             * callback中的data为字符串格式的js文本
             * 用途:动态加载js文件可以节省第一次加载页面时的时间
             * */
            $.getScript('test.js');
        })
    })
</script>

五、$.getJSON()

动态加载json数据

• 参数：url,data,callback
• 注意：请求方式只能是get，请求回来的数据在回调函数的形参中