jQuery Ajax的理解

最新推荐文章于 2023-12-21 08:15:00 发布

qq_975443629

最新推荐文章于 2023-12-21 08:15:00 发布

阅读量156

点赞数 1

分类专栏： jQuery Ajax 文章标签： Ajax请求 jQuery

本文链接：https://blog.youkuaiyun.com/qq_42039970/article/details/88362809

版权

jQuery 同时被 2 个专栏收录

2 篇文章

订阅专栏

Ajax

1 篇文章

订阅专栏

本文详细介绍了Ajax的概念，解释了如何通过异步JavaScript和XML技术更新网页的部分内容而无需重新加载整个页面，从而提高网站性能和用户体验。同时，深入探讨了jQuery中的$.ajax()函数，展示了其在POST请求中的具体应用，包括设置请求方式、路径、数据、缓存策略、数据处理方式、内容类型以及各种回调函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、什么是Ajax?
Ajax 全称为：“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML(标准通用标记语言的子集)），利用了一系列交互式网页应用相关的技术所形成的结合体。使用Ajax，无需加载整个网页的情况下，就能更新部分网页的技术，对提升网站性能、用户体验有很大的帮助。
2、$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

最简单的情况下，$.ajax()可以不带任何参数直接使用。

 $.ajax({
    type: "post",  //请求方式
    url: "/api/v1/common/upload_file",  //请求路径
    data:data, //发送到服务器的数据
    cache:false,//数据不缓存
    processData:false,    //false:传送数据之前不对数据进行格式化
    contentType: "application/x-www-form-urlencoded",//post请求体的默认内容编码类型是url( "application/x-www-form-urlencoded"),根据需求来改变，如为文件格式改为contentType:false,
    beforeSend: function (xhr) {//发送之前执行，此处可以添加一个loading效果
    /* console.group(string label)
     * 在调试面板中创建一个新的分组。随后输出的内容都会被添加一个缩进，表示该内容属于当前分组。调用 console.groupEnd之后分组结束
     */
     console.group('ajax发送之前执行');
     console.log(xhr);
     console.groupEnd();
     },
     success: function (response) {// 请求成功时的回调函数
     console.group('ajax请求成功');
     console.log(response);
     console.groupEnd();
     $('#imgCtrl').attr('src', response.info);
     },
     complete: function (xhr) {// 请求完成的回调函数，不管成功与否都会执行， 此处删除loading效果
     console.group('ajax请求完成');
     console.log(xhr);
     console.groupEnd();
     },
     error: function (err) {// 请求失败的回调函数
     console.group('ajax请求失败');
     console.log(err);
     console.groupEnd();
     }
  });

post请求体请点击：https://blog.youkuaiyun.com/qq_42039970/article/details/88363081