三默网为您带来有关“前端ajax实现post和get请求完整案例”的文章内容，供您阅读参考。
前端ajax实现post和get请求完整案例
2023-01-21 19:30:42
一、接口
① 进入Powershell
② express app 创建项目
③ 输入 cnpm i 下载依赖包
④ 输入 cnpm i nodemon --s 下载nodemon
⑤ 修改package.json文件
"scripts": {
"start": "node ./bin/www",
"dev": "nodemon ./bin/www"
}
⑥ 输入 npm run dev 运行项目
⑦ 浏览器输入 localhost:3000 访问服务
⑧ 解决跨域访问问题，在 app.js 中输入如下内容：
var cors = require('cors');
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
app.use(cors());
⑨ 在index.js中写post接口和get接口
router.get('/userd', function(req, res, next) {
const username=req.query.username
const password=req.query.password
res.send({username,password})
});
router.post('/user', function(req, res, next) {
const username=req.body.username
const password=req.body.password
res.send({username,password})
});
二、前端发送POST请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>POST</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<input type="text" name="" value="" id="name">
<input type="text" id="id" name="" value="">
<div class="" id="submit">点击</div>
<script type="text/javascript">
$('#submit').on('click',function(){
var data={
username:$("#name").val(),
password:$("#id").val()
}
$.ajax({
url:"http://localhost:3000/user",
type:'post',
dataType:'json',
data:data,
success:function(data){
console.log(data)
}
})
})
</script>
</body>
</html>
三、前端发送GET请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GET</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<input type="text" name="" value="" id="name">
<input type="text" id="id" name="" value="">
<div class="" id="submit">点击</div>
<script type="text/javascript">
$('#submit').on('click',function(){
var data={
username:$("#name").val(),
password:$("#id").val()
}
$.ajax({
type: "GET",
url: 'http://localhost:3000/userd?' + data.username + '&' + data.password,
contentType: 'application/json;charset=utf-8', //设置请求头信息
dataType: "json",
data:data,
success: function (res) {
console.log(res)
}
})
})
</script>
</body>
</html>