实战里踩过 jQuery 的那些坑

最新推荐文章于 2022-02-09 09:00:00 发布

风动之石

最新推荐文章于 2022-02-09 09:00:00 发布

阅读量518

点赞数

分类专栏：实战经验

本文链接：https://blog.csdn.net/cxl444905143/article/details/43635749

版权

实战经验专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我是先学习的原生 js，只拿过原生 js 写过一些简单的小练习。在做实际项目时，使用 jQuery ，但是因为没有系统学习过，而是以项目驱动学习，用到哪，查到哪，经常会踩到一些坑，在此一并记录，希望自己以后不会再在同一个问题上栽跟头。

一、jQuery Ajax

文件上传及 url 默认编码问题、content-type 问题

jQuery Ajax 默认会给传入的 data 进行 url 编码，如果有时候需要上传文件，就不需要使用 url 编码。

<input type="file" class="btn btn-primary h-image-input">

var form = new FormData();
form.append("photo", $(".h-image-input")[0].files[0]);
$.ajax({
    type:"POST",
    url:"/hotel/picupload",
    processData: false,  // 不对数据进行 url 编码处理
    contentType: false,  // 设置此处，不设置content-type， formdata会自动设置
    data: form,
    dataType: "json",
    //成功返回之后调用的函数             
    success: function(data) {
    },
    error: function () {
    }
});

processData：当设置 data 选项为对象（或将对象作为第二个参数传递给 jQuery.get() 和相关方法）时，jQuery 通常会将该对象转换成字符串，该字符串遵守标准的 HTML “application/x-www-form-urlencoded” 格式。如果想省略该步骤（比如想将 Document 对象作为 POST 请求体发送），请设置该项为 false。
contentType：请求需要的 HTTP Content-Type 头。默认是 “application/x-www-form-urlencoded”。这是 HTML 表单和绝大部分服务器脚本使用的正常值。如果将 Type 选项设置为 “POST” ，想发送纯文本或 XML 文档作为请求体时，需要设置该选项。如果需要上传文件，需要将该项设置为 “multipart/form-data”，如果设置该项为 false，XMLHTTPRequest 的 send() 方法会自动设置 “Content-Type” 头。详情请见《Javascript 权威指南（第6版）》P499、557

jQuery(function ($) { ... } )

单独实例化问题

在各 js 文件里都有 $(function () {...}) 或者 jQuery(function ($) {...}) ，但是这些是在 DOMReady 后执行的不同的函数，里面的局部变量不能相互使用，有各自的闭包。（其实这不是 jQuery 的坑，而是正宗的 js 函数和闭包问题，只是自己踩了...）