Ajax请求参数

article/2025/9/20 23:02:11

Ajax请求参数

  • GET请求参数的传递
    • 创建服务器
    • 通过表单访问服务器
  • POST请求参数的传递
    • application/x-www-form-urlencoded参数的接收与发送
      • 创建服务器
      • 通过表单访问服务器
    • JSON格式数据的发送与接收
      • 创建服务器
      • 通过表单访问服务器

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>

在这里插入图片描述


http://chatgpt.dhexx.cn/article/n1D8DXYy.shtml

相关文章

Ajax请求以及发送Ajax请求的方式

Ajax请求以及发送Ajax请求的方式

1.在写C语言时候&#xff0c;写了好长时间&#xff0c;终于开始运行了&#xff0c;结果出现了这种情况&#xff0c;以前就没见过。 原来是自己的函数名写错了&#xff0c;main写成了amin.所以写代码一定要细心&#xff0c;不然会给你带来很失望的心情。 2.Ajax请求步骤 //1.创…
阅读更多...
html的ajax请求

html的ajax请求

页面中ajax发起请求&#xff0c;controller接收数据并处理 这次ajax的测试以访问html的方式配置 配置yml文件&#xff1a; 然后在 src/main/webapp下创建一个html页面 创建controller&#xff1a; 运行项目就可以访问到index.html&#xff1a; 引入jquery&#xff1a; 修改…
阅读更多...
Ajax请求详解

Ajax请求详解

Ajax请求 一、什么是Ajax二、Ajax原理是什么三、Ajax的使用1.创建Ajax核心对象XMLHttpRequest(记得考虑兼容性)2.向服务器发送请求3.服务器响应处理&#xff08;区分同步跟异步两种情况&#xff09;①同步处理②异步处理③GET和POST请求数据区别 四、结束语五、jQuery的ajax函数…
阅读更多...
Ajax原理一篇就够了

Ajax原理一篇就够了

前言 AJAX即“Asynchronous Javascript And XML”，是指一种创建交互式网页应用的网页开发技术。AJAX 是一种用于创建快速动态网页的技术。它可以令开发者只向服务器获取数据（而不是图片，HTML文档等资源），互联网资源的传输变得前所未有的轻量级和纯粹，这激发了广大开发者的…
阅读更多...
Ajax请求

Ajax请求

ajax请求简介&#xff1a; ajax是利用前端的技术&#xff0c;向服务器发送一个异步请求 原有的请求在请求后需要刷新整张页面&#xff0c;但是用ajax请求后只需要刷新一部分页面即可&#xff1b; xhr基础属性&#xff1a; Jquery与ajax&#xff1a;使用$.ajax({}) Ajax的html…
阅读更多...
Ajax请求的五个步骤

Ajax请求的五个步骤

目录 Ajax请求的五个步骤 一、定义 1、什么是Ajax 2、同步与异步的区别 3、ajax的工作原理 二、实现AJAX的基本步骤 1、创建XMLHttpRequest对象 2、创建HTTP请求 3、设置响应HTTP请求状态变化的函数 4、设置获取服务器返回数据的语句 5、发送HTTP请求 6、局部更新 …
阅读更多...
详解Ajax请求

详解Ajax请求

目录 1.$.get()函数的语法 2.$.get()发起不带参数的请求 3.$.get()发起带参数的请求 4.$.post()函数的语法 5.$.post()向服务器提交数据 6.$.ajax()函数的语法 7.使用$.ajax()发起GET请求 ​8.使用$.ajax()发起POST请求 1.$.get()函数的语法 jQuery中$.get()函数的功能单…
阅读更多...
linux下输入法，中英文自由切换，仍无法输入中文

linux下输入法，中英文自由切换，仍无法输入中文

1、安装中文输入法&#xff1a;yum install "Chinese Support" 2、中英文切换&#xff1a;Super空格 &#xff08;其中Super键在Ctrl和Alt之间&#xff09; 也可以直接点击右上角进行切换 3、设置输入源&#xff1a;如果直接选择汉语的话&#xff0c;即使中英文可以…
阅读更多...
Linux配置中文输入法图文教程

Linux配置中文输入法图文教程

原来的设置中&#xff0c;从中文切换到英文或者从英文切换为中文&#xff08;跨语言&#xff09;时&#xff0c;总要使用不同的快捷键。在这个教程中&#xff0c;我们将使用controlshift来完成所有输入法的切换&#xff08;无论是否跨语言&#xff09;。 首先在键盘设置中&…
阅读更多...
「 Linux 」“安装中文输入法方法”讲解

「 Linux 」“安装中文输入法方法”讲解

一、前言 每重装一次Linux系统都会被中文输入法打扰一下&#xff0c;把安装方法记录下来吧&#xff0c;方便操作。 二、技术实现 1. 点击屏幕右上角的螺丝口&#xff0c;选择“System Settings”&#xff1b; 2. 点击“Language suport”&#xff1a; 3. 弹出语言支持安装窗口…
阅读更多...
【Linux】安装中文输入法

【Linux】安装中文输入法

目录 1.安装中文输入2.设置输入法快捷键切换 1.安装中文输入 命令&#xff1a;sudo apt-get install ibus-pinyin 输入命令后重启一下&#xff1a;reboot 添加之后就可以在右上角选择了 2.设置输入法快捷键切换 右上角进入设置界面 默认的切换快捷键&#xff1a; 鼠标单击…
阅读更多...
Linux不能输入中文

Linux不能输入中文

Linux不能输入中文 文章目录 Linux不能输入中文1 目标2 环境3 修改配置3.1 服务器编码配置 1 目标 本文针对的问题是“Ubuntu 安装中文语言包”“Ubuntu Server中文问题”&#xff0c;“Ubuntu更改语言环境”&#xff0c;“Ubuntu locale的设定”&#xff0c;“cannot change …
阅读更多...
Linux之中文输入

Linux之中文输入

打开linux系统的应用程序选择系统工具点击设置选择区域和语言窗口 添加汉语中文输入源 使用win空格实现切换&#xff1b;或shift。
阅读更多...
linux下的中文输入法

linux下的中文输入法

最近折腾Ubuntu&#xff0c;之前一直是用英文显示系统&#xff0c;输入法也是Ubuntu14默认的拼音&#xff0c;一开始也没觉得不好&#xff0c;可是在vim编辑文档时 &#xff0c;需要添加注释&#xff0c;这就显得十分不方便&#xff0c;所以花点时间来解决这个问题&#xff0c;…
阅读更多...
ubuntu linux安装中文输入法+汉化（超详细过程）

ubuntu linux安装中文输入法+汉化（超详细过程）

汉化 1.打开settings 2.进入Region & Language 3.点击manage installed languages 4.点击下图按钮 5.安装简体中文 6.点击apply system-wide 7.把汉语往上移动 8.然后把formats改成china&#xff0c;再重启就可以了 安装中文输入法 1.ctrlaltt打开终端 2.输入sudo apt-get …
阅读更多...
Linux.Ubuntu.中文输入法设置

Linux.Ubuntu.中文输入法设置

Linux.Ubuntu.中文输入法设置(ibus-pinyin) Ubuntu version&#xff1a;ubuntu-12.04.5-desktop-amd64 安装ibus sudo apt-get install ibus IBus 全称 Intelligent Input Bus是下一代输入法框架&#xff08;或者说“平台”&#xff09;。 项目现托管于 Google Code - http…
阅读更多...
linux下安装中文输入法及vim支持中文的方法

linux下安装中文输入法及vim支持中文的方法

最近折腾Ubuntu&#xff0c;之前一直是用英文显示系统&#xff0c;输入法也是Ubuntu14默认的拼音&#xff0c;一开始也没觉得不好&#xff0c;可是在vim编辑文档时 &#xff0c;需要添加注释&#xff0c;这就显得十分不方便&#xff0c;所以花点时间来解决这个问题&#xff0c;…
阅读更多...
Kali linux 安装中文输入法

Kali linux 安装中文输入法

1.首先&#xff0c;设置源&#xff0c;在终端中键入如下代码&#xff0c;打开源设置文件 leafpad /etc/apt/sources.list将source.list文件清空&#xff0c;保存如下信息&#xff1a; deb http://http.kali.org/kali kali main non-free contrib deb-src http://http.kali.or…
阅读更多...
linux安装中文输入法详细版

linux安装中文输入法详细版

linux安装中文输入法 超详细版&#xff01; 作为一个linux的初学者来说&#xff0c;有时候在修改hostname和vim编辑器中时常会会用到中文输入法&#xff0c;发现Ctrl空格居然切换不了&#xff0c;浏览过百度及其cdns后现安装成功&#xff0c;结合百度网友及其csdn网友分享的经…
阅读更多...
【Linux】Linux使用中文输入法

【Linux】Linux使用中文输入法

使用系统自带的中文输入法 点击右上角进入设置 找到“Region & Language”&#xff0c;点击加号添加中文输入法 选择Chinese 选择Chinese (Intelligent Pinyin)&#xff0c;点击右上角Add 设置完成后右上角选择中文即可使用&#xff08;可使用Shift切换&#xff09;
阅读更多...
推荐文章

Copyright @ 2022~2023