ajax2-ajax的post请求

简介: ajax2-ajax的post请求

image.png

// 引用expess框架
const express = require('express');
// 处理路径
const path = require('path');
const bodyParser = require('body-parser');
// 创建网站服务器
const app = express();
app.use(bodyParser.urlencoded());
app.get('/first', (req, res) => {
    res.send('hello geyao')
})
app.get('/responsdate', (req, res) => {
    res.send({ "name": "geyao" })
})
app.post('/post', (req, res) => {
    res.send(req.body);
})
app.get('/get', (req, res) => {
    res.send(req.query);
})
app.use(express.static(path.join(__dirname)));
// 监听端口
app.listen(3000);
console.log('网站服务器启动成功, 请访问localhost')

ajax3.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>
        <input type="text" id="username">
    </p>
    <p>
        <input type="text" id="age">
    </p>
    <p>
        <input type="button" value="提交" name="" id="btn">
    </p>
    <script>
        var btn = document.getElementById('btn');
        var username = document.getElementById('username');
        var password = document.getElementById('age');
        btn.onclick = function() {
            //1创建ajax对象
            var xhr = new XMLHttpRequest();
            //请求方式
            var nameValue = username.value;
            var ageValue = age.value;
            //
            var params = 'username=' + nameValue + '&&age=' + ageValue;
            xhr.open('post', 'http://localhost:3000/post');
            //设置参数请求格式类型
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send(params);
            //发送请求
            //获取数据
            xhr.onload = function() {
                console.log(xhr.responseText);
            }
        }
    </script>
</body>
</html>

image.png

相关文章
|
1月前
|
XML 前端开发 JavaScript
|
2月前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
59 22
|
2月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
38 18
|
2月前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
81 4
|
2月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
109 1
|
3月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
61 10
React技术栈-react使用的Ajax请求库实战案例
|
3月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
36 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
3月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
3月前
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
44 4
|
3月前
|
XML JavaScript 前端开发
jQuery - AJAX get() 和 post() 方法
jQuery - AJAX get() 和 post() 方法
27 6