Ajax-请求参数传递

最新推荐文章于 2024-05-24 10:14:06 发布

vvvvv_2

最新推荐文章于 2024-05-24 10:14:06 发布

阅读量541

点赞数

本文链接：https://blog.csdn.net/qq_36663526/article/details/107910504

版权

ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

传递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)
})

在这里插入图片描述

vvvvv_2

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax-请求参数传递

传递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&g
复制链接

扫一扫

专栏目录