Node.js AJAX JS DOM前后台交互详细步骤手把手（图解）

最新推荐文章于 2024-08-28 19:01:32 发布

D_evin_

最新推荐文章于 2024-08-28 19:01:32 发布

阅读量980

点赞数 8

文章标签： javascript ajax node.js dom 大前端

本文链接：https://blog.csdn.net/D_evin_/article/details/120069043

版权

本文详述了使用Node.js搭建后台，通过AJAX进行浏览器请求的步骤，涵盖GET、POST、PUT、DELETE四种方式。同时，讲解了DOM的基本操作，包括元素查询、事件绑定、innerHTML及value属性的使用，提供了实战练习和清空多余空格的trim()方法。

摘要由CSDN通过智能技术生成

前后台交互步骤

一、搭建后台

1.创建项目目录basepro

2.创建项目目录中的静态文件夹public

3.安装依赖

首先这样做会生成一个package.json的配置文件，并在里面增加相应的版本信息，以后运行程序时，安装依赖包可以直接 npm install xxx

其次，安装npm install express时项目目录会创建node_modules目录，并在该目录下多了所有依赖的包。

4. 创建app.js作为项目的入口文件，用于创建应用程序对象

- 引入express

- 创建WEB服务器

- 监听8080端口

- 托管静态资源./public文件

- 创建get方式请求的路由，并查看参数和给予返回值

- 解析表单中的 url-encoded 格式的数据

- 创建post方式请求的路由，并查看参数和给予返回值

- 创建put方式请求的路由，并查看参数和给予返回值

- 创建delet方式请求的路由，并查看参数和给予返回值

5. 运行 app.js

//在当前目录下的终端中输入npm install express 安装
//1.引入express
var express = require('express');
//2.创建web服务器，实例化
var app = express();
//3.设置端口
app.listen(8080);
/* 4.静态资源托管express.static()将静态资源的
目录放入到参数中，不是必须只有这一个文件目录可以托管,
也不是只有这一个文件目录可以 */
app.use(express.static('./public'));
//5.在终端启动服务器node app.js
//6.给前台一个接口地址,因为前台发请求用的get，后台交互数据，也用的get
//地址路径（字符串格式）
//接收前台？方式传递的参数
app.get('/getpar1',(req,res)=>{
    console.log(req.query)
})

//接收post方法的接口地址
//接收之前，需要单独解析通过urlencoded传递的格式
app.use(express.urlencoded({extended:false}))
app.post('/ajaxpost',(req,res)=>{
    console.log(req.body)
    res.send('post方式返回值')
})

//接收put方法的接口地址
app.put('/ajaxput',(req,res)=>{
    console.log(req.body);
    res.send('put方式返回值');
})

//接收delete方法的接口地址
app.delete('/ajaxdel/:names',(req,res)=>{
    console.log(req.params);
    res.send('delete方法返回值')
})