经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery中Ajax的使用
来源:cnblogs  作者:小白可别不举铁  时间:2021/5/6 17:55:57  对本文有异议

在使用原生Ajax发送一个请求时,过程多少有点繁琐,jQuery中对于Ajax请求有它自己的封装好的函数,使用起来分方便。

?在jQuery中有专门的Ajax封装,具体参照JQuery-Ajax参考手册网址

这里用一段练习代码展示下使用方法:

  1. //使用要引入jQuery文件 <script src="../jq/jquery-1.12.4.min.js"></script>
  2. $.ajax({
  3. url:"http://localhost:3000/users",
  4. type:"get",
  5. dataType:"json",
  6. data:{"id":3},
  7. beforeSend:function(xhr){
  8. console.log("before send");
  9. },
  10. success:function(data){
  11. console.log(data);
  12. },
  13. error:function(){
  14. console.log("请求error");
  15. },
  16. complete:function(xhr){
  17. console.log("complete");
  18. console.log(xhr);
  19. }
  20. })

关于jQuery中$.ajax() 的几个参数介绍:

  • url:请求地址;

  • type:请求方法,默认为”get";

  • dataType:服务端响应数据类型;

  • contentType:请求体内容的类型,默认“application/x-www-form-urlencode”;

  • data:需要传输到服务器的数据,如果是get则通过、url传递;post则通过请求体传递;

  • timeout:请求超时时间;

  • beforeSend:请求发起之前触发;

  • success:请求成功之后触发(响应状态码200);

  • error:请求失败触发;

  • complete:请求完成后触发(不管成功与否)

jQuery中其他请求:

  • $.get(),获取数据

    jQuery中get请求快捷方法:$.get(url,data,callback回调函数,返回的数据格式datatype);

    1. //发送 get请求
    2. $.get("http://localhost:3000/liuyan",{"content":"hi"},
    3. function(data){
    4. console.log(data);
    5. });
  • $.post,添加数据

    $.post(url,data,callback)

    1. //发送post请求 $.post(url,data,callback,datatype)
    2. $.post("http://localhost:3000/liuyan",{"content":"ajax","userId":1},
    3. function(data){
    4. console.log(data);
    5. })
  • $.put,更改数据

    1. //put 请求
    2. $.ajax({
    3. url:"http://localhost:3000/liuyan/5",//需要在地址上标出改的主键
    4. type:"put",
    5. dataType:"json",
    6. data:{"content":"put 请求啊"},//改的内容
    7. success:function(data){
    8. console.log(data)
    9. }
    10. })
  • $delete,删除数据

    1. //删除数据 delete请求
    2. $.ajax({
    3. url:"http://localhost:3000/liuyan/6",
    4. type:"delete",
    5. success:function(data){
    6. console.log(data);
    7. }
    8. })
    1. //删除数据 delete请求
    2. $.ajax({
    3. url:"http://localhost:3000/liuyan/6",
    4. type:"delete",
    5. success:function(data){
    6. console.log(data);
    7. }
    8. })
  • $.ajaxSetup() 方法设置全局 AJAX 默认选项。

    1. $.ajaxSetup({
    2. url:"https://localhost:3000",
    3. type:post
    4. });
    5. $.ajax({
    6. data:{"name":"value"}
    7. });
  • 等等还有很多方法,可以参考jquery-Ajax手册。

原文链接:http://www.cnblogs.com/dreamtown/p/14729001.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号