传递get请求参数
传递post请求参数
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
username: <input type="text" name="" id="username">
</p>
<p>
age: <input type="text" name="" id="age">
</p>
<p>
<input type="button" value="提交" id="btn">
</p>
<script>
var btn = document.querySelector('#btn')
var username = document.querySelector('#username')
var age = document.querySelector('#age')
btn.onclick = (() => {
var xhr = new XMLHttpRequest()
var usernameValue = username.value
var ageValue = age.value
// alert(usernameValue)
// alert(ageValue)
var params = 'username=' + usernameValue + '&age=' + ageValue
xhr.open('post','http://localhost:3000/post')
//设置请求参数格式的类型 post必须设置
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send(params)
xhr.onload = () => {
console.log(xhr.responseText);
}
})
</script>
</body>
</html>
app.js
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded())
app.post('/post',(req,res) => {
res.send(req.body)
})
效果:
需要注意的是如果设置了请求头,那么bodyParser也要设置解析格式
- app.use(bodyParser.urlencoded()):解析“ application/x-www-form-urlencoded ”这种格式的参数
- app.use(bodyParser.json()):解析“ application/json ”这种格式的参数
请求参数传递
传统网站表单提交
请求参数的格式
在ajax中需要自己拼接请求参数 根据请求参数的不同将其放在对应的位置上
- application/x-www-form-urlencoded
- application/json
在请求头中指定 Content-Type 属性的值是 application/json,告诉服务器端当前请求参数的格式是 json。
JSON.stringify() // 将json对象转换为json字符串
注意:get 请求是不能提交 json 对象数据格式的,传统网站的表单提交也是不支持 json 对象数据格式的。
向服务器端传递json格式数据
var xhr = new XMLHttpRequest()
xhr.open('post','http://localhost:3000/giveJson')
//通过请求头告诉服务器端客户端向服务器端传递的请求参数格式是什么
xhr.setRequestHeader('Content-Type','application/json')
//请求参数必须是字符串的形式,所以需要使用stringify转换
var text = ({name:'zz',age:6})
xhr.send(JSON.stringify(text));
xhr.onload = () => {
console.log(xhr.responseText);
}
app.js
const bodyParser = require('body-parser')
app.use(bodyParser.json()) //注意是与之前的urlencoded不同 用app.use(express.json())也可以
app.post('/giveJson',(req,res) => {
res.send(req.body)
})