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

最新推荐文章于 2024-08-09 17:26:52 发布

是这般没趣

最新推荐文章于 2024-08-09 17:26:52 发布

阅读量2.2k

点赞数 7

文章标签：前端 javascript jquery ajax echarts

本文链接：https://blog.csdn.net/Britney10_21/article/details/119269600

版权

这篇博客介绍了Ajax的基本概念，以及jQuery如何简化Ajax操作。重点讲解了jQuery中的$.get()、$.post()和$.ajax()函数，通过实例展示了它们在发起HTTP请求时的不同用法，特别是$.ajax()提供了更灵活的配置选项，允许自定义请求的各个方面。

摘要由CSDN通过智能技术生成

一、什么是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>