一、get请求：
index.html
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<input type="button" value="Ajax" id="get-data"/>
<script type="text/javascript">
$(document).ready(function () {
$('#get-data').click(function (e) {
$.ajax({
url:'/get_data',
type:'get',
data:{},
success:function (data) {
console.log(data);
},
error:function (err) {
}
});
});
});
</script>
</body>
</html>test.js
const express = require("express");
const app = express();
//定义一个存放静态资源的目录
app.use('/src', express.static("src"));
app.get("/index.html", function(req, res, next){
res.sendFile( __dirname + "/" + "index.html" );
})
app.get("/get_data", function(req, res, next){
var obj = {
title:'耶鲁留学生的2000张自拍照',
src:'腾讯新闻',
content:'推动新一代人工智能健康发展 更好造福世界各国人民'
}
res.json(obj);
})
const server = app.listen(8080, function(){
console.log("启动成功！");
})二、post请求：
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<form action="/get_data" method="POST">
First Name: <input type="text" id="first-name"> <br>
Last Name: <input type="text" id="last-name">
<input type="button" value="提交" id="get-data"/>
</form>
<script>
$(function(){
$("#get-data").click(function(){
$.ajax({
type: "POST",
url: '/get_data',
data: {'firstName': $("#first-name").val(), 'lastName': $("#last-name").val()},
dataType: "json",
success: function (data) {
console.log(data);
},
error: function (data) {
console.log(data);
}
})
})
})
</script>
</body>
</html>index.js：
let express = require("express");
let app = express();
let bodyParser = require("body-parser");
let urlencodedParser = bodyParser.urlencoded({extended: false});
app.get("/index", function(req, res, next){
res.sendFile(__dirname + "/views/" + "index.html")
})
app.post("/get_data", urlencodedParser, function(req, res, next){
let response = {
first_name: req.body.firstName,
last_name: req.body.lastName
}
res.type("application/json");
res.jsonp(response);
});
app.listen(8080, function(){
console.log("开始请求");
})三、JSONP（只有get方法支持）：
8080端口：
let express = require("express");
let app = express();
app.use("/public", express.static("public"));
app.get("/index", function(req, res, next){
res.sendFile(__dirname + "/" + "views/index.html");
});
app.get("/get_data", function(req, res, next){
let response = {
"title": "耶鲁留学生的2000张自拍照",
"content": "耶鲁留学生的2000张自拍照，耶鲁留学生的2000张自拍照，耶鲁留学生的2000张自拍照，耶鲁留学生的2000张自拍照，耶鲁留学生的2000张自拍照"
};
res.type('application/json');
res.jsonp(response);
});
app.listen(8080, function(){
console.log("开始执行请求");
});8000端口：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<input type="button" value="获取数据" id="get-data"/>
<script>
$(function(){
$("#get-data").click(function(){
$.ajax({
type: "GET",
url: 'http://127.0.0.1:8080/get_data',
data: {},
dataType: "jsonp",
success: function(data){
console.log(data);
},
error: function(data){
}
})
})
})
</script>
</body>
</html>
