1. GET 请求

应用：ajax 进行表单提交，服务器端获取请求参数

在客户端，我们要把姓名和年龄拼接成请求参数的格式
格式如下：username=123&age=456
在传统表单提交中，请求参数 是自动拼接好的，而ajax 中这个参数需要我们自己去拼接
并且，这个参数需要放在请求地址的后面

03-传递get请求参数.html 部分代码：

btn.onclick = function() {// 2. 在用户点击按钮的时候去创建 ajax 对象，然后去发送请求var xhr = new XMLHttpRequest()// 用户点击按钮的时候，我们也要获取到 两个文本框的值var nameValue = username.valuevar ageValue = age.value// 自己拼接请求参数var params = 'username=' + nameValue + '&age=' + ageValue// 配置 ajax 对象xhr.open('get', 'http://localhost:3000/get?' + params)// 发送请求xhr.send()// 获取服务器端响应的数据xhr.onload = function() {console.log(xhr.responseText);}}

app.js 对应代码：

// 对应 03html文件
app.get('/get', (req, res) => {// req.query 返回的就是客户端传来的 get请求参数res.setHeader("Access-Control-Allow-Origin", "*") // 允许跨域res.send(req.query) // 把 get请求参数 响应到客户端
});

浏览器中的 network 显示：

浏览器中的 控制台 显示：

2. POST 请求

post请求参数要放到 send（）方法中
xhr.setRequestHeader()方法是用来设置 请求报文当中的报文头信息
第一个参数是报文属性名称 ，第二个参数是 报文属性对应的值
如果请求参数的类型是：username=123&age=45，则第二个参数是’application/x-www-form-urlencoded’

注意：服务器端要获得post 请求参数，需要借助中间件 body-parser。然后就可以使用 req.body 获得post 请求参数。（以前的方法）

但是，在新的语法中，不再需要body-parser这个中间件了，express框架已经实现了对post 参数的解析。

//express框架已经实现了对post 参数的解析。const app = express();// app.use(bodyParser.urlencoded());  这个语法已被弃用app.use(express.json())
app.use(express.urlencoded({ extended: false }))并且，获取post参数方法依旧是req.body

04-传递post请求参数.html部分代码：

var params = 'username=' + nameValue + '&age=' + ageValue// 配置 ajax 对象xhr.open('post', 'http://localhost:3000/post')// 设置请求参数的格式的类型(post请求必须要设置)xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')// 发送请求xhr.send(params)// 获取服务器端响应的数据xhr.onload = function() {console.log(xhr.responseText);}

app.js 对应的代码：

// 对应 04html文件
app.post('/post', (req, res) => {res.setHeader("Access-Control-Allow-Origin", "*") // 允许跨域res.send(req.body) // 响应给客户端
});

3. 请求报文

在 HTTP 请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，这些数据和信息要遵守规定好的格式。

报文分为 报文头 和 报文体
报文头和报文体在请求的过程中，整体被发送到服务器端。

报文头：

报文头中存储的是一些键值对信息，可以理解为：客户端向服务端说的话
例如，示例中的 Content-Type 就属于报文头信息

报文体：

主要存储一些内容，比如 post请求参数。

ajax 传递请求参数相关推荐

ajax传递多参数类型,Ajax传递不同类型的参数
1.目录结构: 1.传递普通的参数 2.传递对象 3.传递List 4.传递数组 1.1 前端页面前端页面.png 1.2 HTML代码注意:需要引入layui噢 button{ margin-t ...
ajax的请求参数详解以及前后台交互详解
function rejectSub(){//从隐藏域中拿到userIDvar userId = $("input:hidden[name='userId']").val();va ...
gin ajax 获取请求参数,gin请求参数处理
本章介绍Gin框架获取请求参数的方式 1.获取Get 请求参数 Get请求url例子:/path?id=1234&name=Manu&value=111 获取Get请求参数的常用函数: ...
jquery 乱码传参_jquery ajax传递中文参数乱码问题及解决方法说明
jQuery传递中文参数乱码,原因是默认的传递方式没有采用UTF-8,所有我们可以在传递参数的时候对参数进行编码,然后再操作,代码如下,红色的代码为传递的参数,已标注 smsubmitclick = ...
ajax传递map参数给后端
向后端传递一个参数 /*** 前端ajax代码部分*/var map = '{"account":"' + account + '"}'; //设定一个事件触发 ...
ajax传递数组参数
var arr=new Array(); arr[0]='param'; arr[1]='param2'; $.ajax({url:请求地址,data:{params:arr},type:" ...
Ajax——设置请求参数
1.目录结构 2.需求: 点击按钮获取服务端响应的结果 3. 代码展示 <!DOCTYPE html> <html lang="en"> <head& ...
gin ajax 获取请求参数,go的gin框架从请求中获取参数的方法
前言: go语言的gin框架go里面比较好的一个web框架, github的start数超过了18000.可见此框架的可信度如何获取请求中的参数假如有这么一个请求: POST /post/te ...
ajax传递复杂参数
使用mvc测试Demo ================view================ @{ViewBag.Title = "Index";Layout = null; ...
ajax get传递数组参数吗,ajax 传递数组参数
我的参数中有数组: 比如var req = { ids: [1, 2, 3]} ajax 写法必须把 req 进行字符串化,然后设置 contentType: "application/js ...

ajax 传递请求参数

传统表单提交

1. GET 请求

应用：ajax 进行表单提交，服务器端获取请求参数

2. POST 请求

3. 请求报文

ajax 传递请求参数相关推荐

最新文章

热门文章