HackWeek踩坑记(5) - 通过$.ajax()传递JSON格式的数据

这其实是另一个组掉的坑,情况大致是这样:该组的后端写好了一个API路径,只接受POST方法,而且POST的数据只接受Content-Type为application/json格式的数据,也就是说前端写的XHR请求必须POST一个JSON格式的数据。而这也是问题的根源所在,因为该组的前端使用jQuery编写Ajax请求,在$.ajax({})中的data字段里注入的数据发送给API时变成了x-www-form-urlencoded格式,也就是说把JSON数据变成表单数据提交给了API,所以API才会一直报400错误。然而我之前似乎从来没有用过$.ajax()方法传递过JSON数据,当时我尝试过JSON.stringify()方法插入到data中,还是不奏效,之后去Google上找答案,才知道需要手动设置Request Header。但是这个方法必须在POST数据之前拿到原生的XHR对象,再通过XMLHttpRequest.setRequestHeader()来设置Content-Type改造后的代码示例如下:$.ajax({ type: 'POST', url: '/api/demo', dataType: 'json', beforeSend: function(xhr) { //此处通过函数传入XMLHttpRequest对象的实例 xhr.setRequestHeader('Content-Type', 'application/json') }, success: function(data) { //对回调函数传入的response进行处理…

HackWeek踩坑记(2) - 在Webpack中引入jQuery

第二个坑:在Webpack中引入jQuery jQuery从诞生起,就以其简洁、高效迅速得到开发者的认可,如今绝大多数网站都采用jQuery库。而在我们组的项目中,我也想使用jQuery编写Ajax、元素选取之类的代码,但是我发现直接在HTML入口文件src/index.html中加入一个引入jQuery的script标签似乎并不会其任何作用,相反,引入JS文件之后反而给整个项目带来一大堆的报错。我也尝试过很多种方法将jQuery代码放在不同的位置,但是都不奏效。所以迫于时间压力,我不得不放弃在项目中引入jQuery的想法,这也成了这个项目中最大的遗憾。 尝试引入 今天HackWeek刚结束,我就迫不及待开始在Google上查阅相关资料。在查阅资料的过程中,我偶然发现其实jQuery也可以向其他的库一样通过模块的方式引入,于是我尝试在项目根目录下执行npm install jquery,执行成功,随后我再去JS入口文件src/main.js中写入 import $ from 'jquery' 在页面写好一段jQuery代码,发现console还是报错: 回头一看main.js发现import jQuery的那一行代码还是灰色的,应该是还有哪个地方没有配置好导致$没被使用,造成在代码中使用$之后报错。 解决问题 最后我在百度中寻找到了一种比较可行的办法,大概的意思就是将jQuery库当做一个插件写入Webpack的基本配置文件中,大概的解决办法是: 先在src/main.js中写入:…