作为一名后端开发，一直不想去过多的了解前端，导致心里有了一道屏障，可是要成为一名全栈工程师，这是必经之路。
正巧现在独立负责一个项目，前后端都是我的事儿，得了，不逼逼，不抱怨，干就完了。
jquery的大名如雷贯耳，而其对XHR(XMLHttpRequest)的封装也已经非常好用了，今天我们就从0开始学习如何发送请求。
准备工作
为了能够前后端共同调试，我建议自己写一个后端应用，方便我们测试。
我用的是Python，框架是flask。只需要几行代码就搞定了。
如果你也是用的flask，记得解决一下跨域的问题，参考传送门里的面CORS。
应用端口就用的默认端口5000。如图：
image.png
到目前为止，后端已经搞定了。我们需要些前端代码了。
不知道你用的什么编辑器，不过用什么都没关系，我用的vscode。
然后，你需要建立一个项目文件(方便以后继续研究jquery使用)，在这个文件中新建一个index.html和一个名叫“js”的文件夹。这个js文件夹用来存放jquery.js，这个jquery.js需要你去官网上下载，或者随便百度一个即可，我用的版本是1.3。下载完了复制到项目中的js文件夹中就OK。
然后你就可以正式开始了。
jquery的get请求
先贴代码，再解释。
'''
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<title>jquery发送请求</title>
</head>
<body>
<button id="btn">点击发送ajax请求</button>
<div id="d-text"></div>
<!-- js脚本 -->
<script>
$(function() {
$('#btn').click(function() {
// ajax
$.ajax({
type: "GET",
url: "http://127.0.0.1:5000/",
dataType: 'json',
success: function(result) {
// alert(result);
var re = JSON.stringify(result);
// 把返回的文本填充到d-text中
$('#d-text').html(re);
}
});
});
});
</script>
</body>
</html>
'''
在使用jquery.js之前，一定要先引用，而且要放在<head>标签之内，因为这样会先加载jquery再加载页面。虽然这样性能有待提高，但是这不是我们今天的目标，直接pass。
接下来你需要写个<button>标签，用click时间来触发ajax请求。
然后写个<div>标签，用来把你的请求回来的内容显示出来。
最后就是<script>标签了，这里的js代码会使用jquery来操纵我们刚才写的两个标签，并发送一个get请求到我们最开始写的后端应用上。
以上就是大体流程，下面说说里面调用的函数。
$function(func);
它会让页面加载完DOM后开始执行。func是一个参数，这个参数是一个js函数。
$('#btn')
这是jquery的选择器的写法，意思是说，选择id为btn的DOM元素。
$('#btn').click(func)
监听这个id为btn的DOM的点击事件，一旦用户点击了，就会执行click()中的func函数。
$.ajax({dict})
在点击事件中，我们写了一个ajax请求，并向里面传入了一个字典参数。
这个字典中的参数，其实就是配置ajax请求的配置项。我们可以这么理解。
- type：请求的类型，可以是GET/POST等HTTP请求类型。
- url：请求的后端应用的API，你想把这个请求发到哪，那么url就是对应的API。
- dataType: 数据类型。
- success：成功回调函数，当我们成功请求了API之后，就会调用success里的函数。success中的参数result，就是请求返回后解析出来的数据(HTTPResponse)。一般这里都是放了一些操作数据的逻辑代码。我只是简单的把它们放到div中显示出来而已。
注意：JSON.stringify(result)，js中格式化json字符串的方式。
OK，这样你就能用jquery发送get请求了，至于POST等其他类型的请求，明天再写。
网友评论