这是我参与「4月日新计划更文活动」的第20天。
今天带着大家一起来看一下如何调用一个ajax的请求。
前面已经把简单的html布局，css的样式，和简单的js都学会了。
现在到了真正要做项目，跟后端进行接口对接的时候了，所以这里教大家怎么通过ajax调用后端的接口。
我用最简单的jquery的ajax给大家做演示吧。
如果有不太清楚ajax请求的调用参数的朋友，可以先找一下这部分的基础文档学习一下。
先来一个简单的例子给大家看一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>实现ajax请求</title>
</head>
<body>
<button id="send">点击请求接口</button>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(function(){
$('#send').click(function(){
$.ajax({
type: "GET",
url: "https://www.baidu.com/getUserInfo",
data: {
username: '神厨小福贵'
},
dataType: "json",
success: function(data){
console.log('data>>>>', data);
}
});
});
});
</script>
</html>
上面是一段请求用户数据的ajax请求接口。
这里的接口地址是: www.baidu.com/getUserInfo…
上面的www.baidu.com 一般是公司的服务器对应的域名地址，而/getUserInfo就是对应具体的接口，用来实现某个具体的功能的。
一般在命名上会根据业务的需求要命名。
比如这里就命名为getUserInfo，前端一看就知道是一个get请求，而作用呢就是获取用户的具体信息。
再往下看就是data和dataType，分别表示具体的入参数据跟入参的数据格式。
这里特别需要注意的是接口请求的数据格式一定要跟你对接的后端问清楚，因为接口的数据类型有json、xml、html、text、script和jsonp。
定义不同的数据类型，返回过来的数据格式也很不一样。有时候你可能参数对了，但是因为数据类型选择错了，调试了半天就是调不通，这就会让人非常烦躁。
除了上面的dataType之外，还有一个参数也非常重要，那就是contentType。contentType的类型有application/x-www-form-urlencoded、multipart/form-data、text/plain、application/json。
它这个是针对不同的业务场景选择不同的类型。
比如前面两个主要用于表单的提交，text/plain是纯文本类型数据，多用于get请求；
而application/json定义的是JSON数据类型，常用于POST请求发送JSON格式的数据。也是我在跟后端对接的时候遇到最多的数据类型的情况。
以上就是我今天学习的如何使用ajax进行数据调用的知识点。
看到掘金上的好文章，如果对你有帮助，顺手点个赞，或者把文章收藏。不用担心找不到了，以后也能经常收到类似好回答，我会持续进行更新。
