jQuery中发起Ajax请求最常用的三个方法

Posted 是这般没趣

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery中发起Ajax请求最常用的三个方法相关的知识,希望对你有一定的参考价值。

一、什么是Ajax

        Ajax的全称是Asynchronous javascript And XML(异步JavaScript和XML

       我们可以理解为:在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式就是Ajax,它可以帮助我们轻松实现网页与服务器之间的数据交互

二、什么是jQuery中的Ajax

       浏览器中提供的XMLHttpRequest用法比较复杂,所以jQuery对XML进行了封装,提供了一系列Ajax相关的函数,极大地降低了Ajax的使用难度

       上面的相关知识我们简要了解一下即可,接下来我们就切入正题,来讲一讲jQuery中发起Ajax请求最常用的三个方法,分别是$.get( ) 、$.post( ) 、$.ajax( )

三、$.get( )函数

      功能单一、专门用来发起get请求,将服务器上的资源请求到客户端来进行使用

1、$.get( )发起不带参数的请求

      直接提供请求的URL地址和请求成功之后的回调函数即可

<button class="btnGet">get发起不带参数的请求</button>    
  <script>
     $(function(){
        $(".btnGet").on("click",function(){
           // 使用get发起不带参数的请求
           $.get('url地址',function(res){
           // 打印返回的数据
           console.log(res);
              })
          })
      })
  </script>

2、$.get( )发起带参数的请求

<body>
    <button id="btnGetInfo">发起带参数的get请求</button>
    <script>
       $(function(){
          $("#btnGetInfo").on("click",function(){
             //将服务器上id为1的数据请求到客户端
             $.get('url地址',{id:1},function(res){
                console.log(res);
                })
            })
        })
    </script>

       所以从上面我们可以看出,$.get( )函数在发起请求时要请求的资源地址是必须要指定的,请求期间要携带的参数和成功后的回调函数不是必需的。

四、$.post( )函数

       功能单一、专门用来发起post请求向服务器提交数据

<button id="btnPost">post向服务器提交数据</button>
    <script>
      $(function(){
         $("#btnPost").on("click",function(){
             $.post('url地址',{要传给服务器的内容},function(res){
                    console.log(res);
                })
            })
        })

    </script>

五、$.ajax( )函数

       相比$.get( ) 和$.post( )函数,jQuery中提供的$.ajax( )函数是一个功能比较综合的函数,允许我们对Ajax请求进行更详细的配置

<body>
    <button id="btnGet">使用ajax发起请求</button>
    <script>
        $(function(){
            $("#btnGet").on("click",function(){
                $.ajax({
                    //请求的方式:get/post
                    type:' ', 
  
                    //请求的url地址
                    url:' ',

                    //这次请求要携带的数据(不需要参数可以省略)
                    data:{ },

                    //请求成功之后的回调函数
                    success:function(res){ }
                })
            })
        })
    </script>

以上是关于jQuery中发起Ajax请求最常用的三个方法的主要内容,如果未能解决你的问题,请参考以下文章

Web常用对象

jQuery中的Ajax

jQuery学习之jQuery Ajax用法详解(转)

AJAXjQuery中AJAX请求常见常用的几种方法

jQuery常用方法

jQuery学习之jQuery Ajax用法详解