Ajax请求参数

已于 2022-02-15 18:37:08 修改
阅读量6.2k 收藏 8
点赞数 2
分类专栏： node.js 文章标签： ajax 服务器 javascript
于 2022-02-14 19:08:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shao_xuan_/article/details/122913947
版权

Ajax请求参数

GET请求参数的传递

设置open()方法中的第1个参数为“get”，表示设置get请求方式。

xhr.open('get', 'http://localhost:3000/demo.html?username=zhangsan &age=20');
xhr.send();

“?”后面的“username=zhangsan&age=20”表示GET请求参数,
多个参数时需要使用“&”符号连接。

创建服务器

创建服务器将客户端请求的数据给发送出去。

const express = require('express');
const path = require('path');
const app = express();
app.all('*', function(req, res, next) {//处理跨域问题

    res.header("Access-Control-Allow-Origin", "*");

    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');

    res.header("Access-Control-Allow-Headers", "X-Requested-With");

    res.header('Access-Control-Allow-Headers',['mytoken','Content-Type'])

    next();

});
app.use(express.static(path.join(__dirname, 'public')));
// 定义GET路由
app.get('/get', (req, res) => {
    res.send(req.query);
});
app.listen(3000);
console.log('服务器启动成功');

通过表单访问服务器

创建一个网页，然后通过一个表单来提交数据，再将服务器发送来的数据接收并在控制台打印出来。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="#" method="" style="width: 245px;">
        用户名：<input type="text" id="username" style="float: right;" /><br><br>
        年龄：<input type="text" id="age" style="float:right;" /><br><br>
        <input type="button" value="提交" id="btn" /><br><br>
    </form>
    <script>
        // 获取姓名文本框
        var username = document.getElementById('username');
        // 获取年龄文本框
        var age = document.getElementById('age');
        // 获取按钮元素
        var btn = document.getElementById('btn');
        // 为按钮添加单击事件
        btn.onclick = function () {
            // 获取用户在文本框中输入的值
            var nameValue = username.value;
            var ageValue = age.value;
            // 为按钮添加单击事件
            btn.onclick = function () {
                var xhr = new XMLHttpRequest();
                // 拼接请求参数
                var params = 'username=' + nameValue + '&age=' + ageValue;
                xhr.open('get', 'http://localhost:3000/get?' + params);
                xhr.onload = function () { console.log(JSON.parse(xhr.responseText)); };
                xhr.send();
            };

        };

    </script>

</body>

</html>

结果如下
在这里插入图片描述

POST请求参数的传递

使用第三方模块body-parser来处理POST请求参数
在server目录，下载body-parser模块，执行命令如下。

npm install body-parser@1.18.3 --save

请求消息是在HTTP请求和响应的过程中传递的数据块。
在这里插入图片描述Ajax对象中的setRequestHeader()方法用来设置请求消息中请求头信息。
基本语法格式：

xhr.setRequestHeader('Content-Type', '请求参数格式'); 
xhr.send(请求参数);

Content-Type是属性名称；第2个参数是请求参数的格式。
实例：

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

application/x-www-form-urlencoded请求参数的格式是用“&”符号连接多个“参数名称等于参数值”形式的数据。
如“name=zhangsan&age=20&sex=nan”。

xhr.setRequestHeader('Content-Type', 'application/json');

application/json请求参数的格式是JSON数据。
如“{name: ‘张三’, age: ‘20’, sex: ‘男’}”，如果有多个参数时需要使用“,”符号连接。

application/x-www-form-urlencoded参数的接收与发送

创建服务器

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const app = express();
app.all('*', function (req, res, next) {//处理跨域问题

    res.header("Access-Control-Allow-Origin", "*");

    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');

    res.header("Access-Control-Allow-Headers", "X-Requested-With");

    res.header('Access-Control-Allow-Headers', ['mytoken', 'Content-Type'])

    next();

});
app.use(express.static(path.join(__dirname, 'public')));
app.use(bodyParser.urlencoded({ extended: false }));

// 定义POST路由
app.post('/post', (req, res) => {
    res.send(req.body);
});
app.listen(3000);
console.log('服务器启动成功');

通过表单访问服务器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="#" method="" style="width: 245px;">
        用户名：<input type="text" id="username" style="float: right;" /><br><br>
        年龄：<input type="text" id="age" style="float:right;" /><br><br>
        <input type="button" value="提交" id="btn" /><br><br>
    </form>
    <script>
        // 为按钮添加单击事件
        btn.onclick = function () {
            // 获取用户在文本框中输入的值
            var nameValue = username.value;
            var ageValue = age.value;
            // 拼接请求参数
            var params = 'username=' + nameValue + '&age=' + ageValue;
            var xhr = new XMLHttpRequest();
            xhr.open('post', 'http://localhost:3000/post');
            // 设置请求参数格式的类型
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            // 获取服务器端响应的数据
            xhr.onload = function () {
                console.log(JSON.parse(xhr.responseText));
            };
            // 发送请求时，传入请求参数
            xhr.send(params);
        };
    </script>

</body>

</html>

在这里插入图片描述

JSON格式数据的发送与接收

创建服务器

创建服务器定义post路由，接收JSON格式数据，将客户端的数据发送出去。

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const app = express();
app.all('*', function (req, res, next) {//处理跨域问题

    res.header("Access-Control-Allow-Origin", "*");

    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');

    res.header("Access-Control-Allow-Headers", "X-Requested-With");

    res.header('Access-Control-Allow-Headers', ['mytoken', 'Content-Type'])

    next();

});
app.use(express.static(path.join(__dirname, 'public')));
// app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// 定义POST路由
app.post('/post', (req, res) => {
    res.send(req.body);
});
app.listen(3000);
console.log('服务器启动成功');

通过表单访问服务器

发送JSON格式数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="#" method="" style="width: 245px;">
        用户名：<input type="text" id="username" style="float: right;" /><br><br>
        年龄：<input type="text" id="age" style="float:right;" /><br><br>
        <input type="button" value="提交" id="btn" /><br><br>
    </form>
    <script>
        // 获取姓名文本框
        var username = document.getElementById('username');
        // 获取年龄文本框
        var age = document.getElementById('age');
        // 获取按钮元素
        var btn = document.getElementById('btn');
        // 为按钮添加单击事件
        btn.onclick = function () {
            var xhr = new XMLHttpRequest();
            // 获取用户在文本框中输入的值
            var nameValue = username.value;
            var ageValue = age.value;
            // 定义params对象
            var params = {};
            params['username'] = nameValue;
            params['age'] = ageValue;
            xhr.open('post', 'http://localhost:3000/post');
            // 设置请求参数格式的类型
            xhr.setRequestHeader('Content-Type', 'application/json');
            // 获取服务器端响应的数据
            xhr.onload = function () {
                console.log(JSON.parse(xhr.responseText));
            };
            // 发送请求时，传入请求参数
            xhr.send(JSON.stringify(params));
        };

    </script>

</body>

</html>

在这里插入图片描述

努力做一只合格的前端攻城狮
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
浅析jQuery Ajax请求参数和返回数据的处理
11-23
在本文中，我们将深入探讨jQuery Ajax请求的参数设置、数据处理以及返回数据的优雅处理方式。 首先，$.ajax()函数是最通用的Ajax请求方法，它接受一个包含各种配置选项的对象作为参数。这些选项包括URL、请求类型...
ajax快速解决参数过长无法提交成功的问题
12-10
查了很多资料都说，get方法的参数是有限制的，post方法的参数的长度是无限制，这也是post相比get的优势一直。 在ajax中使用post方法，用常规... data: “requestTag=”+tag+"&content="+content, //请求参数 url: "po
ajax 传递请求参数
weixin_47505105的博客
03-08 5810
传统表单提交， GET 请求方式， POST 请求方式， 请求报文
用ajax向后台传参的几种方式
热门推荐
走了两万五千里的钉子的博客
05-07 4万+
用ajax传参的几种方式
Ajax请求：请求参数
最新发布
weixin_47700705的博客
05-24 111
Ajax请求：请求参数。
ajax传递参数
不相信有天赋，只相信有努力。
06-14 3509
这两天在做一个短信发送平台，在做的过程中又遇到了一些问题。以前公司的项目是基于springmvc框架搭建的，有很多东西都是框架内已经考虑好的，开发者只需要简单地按照步骤来实现即可。 现在在新公司里，项目完全是基于servlet+jsp搭建的内部框架使用的，所以为了熟悉使用原生的servlet和jsp，自己做的短信发送平台也都基于servlet和jsp。 在使用ajax请求后台servlet的内
vue课程75 axios是只专注于网络请求的库
geyaoisnice的博客
07-01 226
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D...
HTTP请求中的header query 和body
xu282934741的博客
03-21 2万+
HTTP请求中 header query 和 body的区别 header显而易见是请求头 query是指请求的参数，一般是指URL中？后面的参数 如http://10.6.6.6:8080/api/v1/namespaces?pretty=true中 pretty=true就是query body是指请求体中的数据 ...
C# 如何使用ajax请求
08-18
C# 如何使用ajax请求 C# 使用ajax请求是指在C# 项目中使用ajax技术来实现异步更新网页的内容。ajax即“Asynchronous Javascript And XML”（异步JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页...
ajax请求添加自定义header参数代码
01-18
$.ajax({ type: post, url:http://127.0.0.1:4564/bsky-app/template/testPost, contentType: application/json;charset=utf-8, data :JSON.stringify({bodyName:sdfsdf,date:2017-11-28 07:34:01,price: 10.5,...
AJAX请求最常用的几个写法
m0_57768599的博客
08-08 437
·XMLHttpRequest() 视图(View): 控制器(Controller)：action传参 ·$.ajax() 法一： 视图(View): 控制器(Controller)： 法二： 视图(View): 控制器(Controller)： ·$.get() 视图(View): serialize()序列表表格内容为字符串 url:待载入页面的URL地址 data:待发送 Key/value 参数。 callback:载入成...
使用Ajax传递get请求参数
forljnlearning的博客
07-03 7924
<!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>
Ajax学习日志（三）—— 如何传递get请求参数
kokunka的博客
03-26 4166
Ajax入门（三）一、如何传递get请求参数1.1) 在app.js创建新路由1.2) 在public文件夹新建一个html文件1.3）运行 一、如何传递get请求参数 1.1) 在app.js创建新路由 之前的app.js的初始化内容 // 创建路由 注意：路由一定是在监听端口的前面 app.get('/responseData', (req, res) => { // send方法也可以输入json对象 res.send({"name":"黄超帅", "age": 18, "hob
Ajax请求参数，get与post
tony的专栏
10-24 1694
使用Ajax向服务器发送请求参数就可以向服务器“索取”不同的信息了，同一般的表格提交一样，用Ajax提交请求同样有GET与POST之分。 使用GET方法 使用GET方法想服务器床底参数的方法比较直接，就是将构建好的请求字符串添加到url后面。例如下面的示意代码： var name = document.getElementById('username').value; var gen
Ajax请求参数解释
weixin_30530939的博客
10-23 580
ajax常用的两个请求是get和post，而springmvc的控制层可以接收ajax请求。 但是这个过程非常灵活，变化很大，容易出错。 $.ajax({ url : SITE_PATH + "/userLogRecord/getList", type : 'POST', async : false, contentType : 'applica...
关于Ajax请求传递数组参数的解决办法
qq_40943363的博客
09-07 4425
使用Ajax发送请求，而请求参数是一个数组，请求了多次都报400的错误，最后终于找到了解决办法！ Ajax请求 var sealList=['1','2','3']; $.ajax({ type: "post", url: "${viayieContextPath}/seal/carcelSeal", dataType: "json", content...
ajax请求参数什么意思,关于ajax请求的参数
weixin_31764271的博客
08-05 118
繁星点点滴滴这个实际上就是问ajax的原理和用法吧,包括请求头,请求行和请求主体;1.先创建一个XMLHttpRequest:(IE支持ActiveXObject) var xhr=new XMLHttpRequest();2.请求行:xhr.open('get','url')//第一个参数可以是get或者post或者put3.请求头:xhr.setRequestHeader('"Conte...
$.ajax请求参数
12-02
$.ajax()方法是jQuery中用于异步请求的核心方法，它的参数非常多，下面是一些常用的参数： 1. url：请求的地址。 2. type：请求的类型，例如GET、POST等。 3. data：发送到服务器的数据，可以是对象或字符串。 4. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

努力做一只合格的前端攻城狮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值