chen西瓜

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Jquery使用AJax

Jquery使用AJax GET POST 方法

使用JQ框架来用axaj 可以省略很多步骤

因为很多东西已经被封装好到了jq里面了

那我们怎么来用它呢

首先 我们先去网站上搜索一个jq的cdn

将这个cdn引入到我们的项目文件中

然后我们可以通过这种方式来用我们的ajax

 <h2>发送ajax请求</h2>
  <button>GET</button>
  <button>POST</button>
  <button>通用型方法ajax</button>
</div>
  <script>
      $('button').eq(0).click(function(){
          $.get('http://localhost:8000/jq',{a:100,b:200},function(data){
              console.log(data);
          },'json');
           
      })
      //jquery的方法种使用$.请求类型(地址,参数,回调函数,'响应体数据类型')的方式
      //加了响应体数据类型的方式可以更加简便且不用转换自动转换成json对象形式
      $("button").eq(1).click(function(){
          $.post("http://localhost:8000/jq",{a:2,b:3},function(data){
              console.log(data);

          },'json')
      })
  </script>

上面代码中我们可以看到用jq可以省略很多代码 为我们的开发提供了更多的快捷

这段代码里面我分别用了两种请求方式 一种是get 一种是post

这个代码我们可以看出来是要比我们原来的代码少些了很多行 很多元素都被封装到了一起,也不用去增加数据转换代码

可以直接在代码段后端加上响应体类型 这样我们接收过来的json字符串会自动帮我们转换成对象

如果不加的它还是原来的字符型,所以这个不能忘记噢。

 

Jquery使用ajax的通用型方法Ajax

这种方法功能性要比前面写的两种方法全面一点,但是简便程度上来说 还是get post方法比较的好一点。

本篇笔记记录的这三种方法虽然说不是全面的描述jq的ajax的所有用法 但是对于基本的需求来说应该是

够用了,想要更加全面的jq AJAX用法大家可以去Jquery的官方文档里面查看 里面有更多详细的介绍;

我把这种方法也粘贴在下面让大家看一下

$('button').eq(2).click(function(){
          $.ajax({ //这里是一个对象
              //url
              url:'http://localhost:8000/jq',
              //参数
              data:{a:500,b:666},
              //请求类型
              type:'GET',
              //响应体结果设置
              dataType:'json',
              //成功的回调
              success:function(data){
                  console.log(data);
              },
              //超时的时间
              timeout:2000,
              //失败的回调
              error:function(){//网络请求超时等错误都能被error函数处理
                  console.log('出错咯!')
              },
              headers:{//请求头信息
                  c:11,
                  d:22
              }
             
          });
      });

 

 

posted on 2021-12-08 18:16  chen西瓜  阅读(155)  评论(0编辑  收藏  举报