【nodejs】使用put方式向后端提交数据

最新推荐文章于 2024-08-08 16:14:07 发布
最新推荐文章于 2024-08-08 16:14:07 发布
阅读量2.8k 收藏 2
点赞数
文章标签： 后端 javascript json ViewUI

页面代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <head>
  <title>Put data to db</title>
 </head>

 <body>
  <form id="form1">
    用户名：<input type="text" id="username" name="name" value=""><br/>
    密码  ：<input type="password" id="userpswd" name="pswd" value=""><br/>
    <input type="button" value="提交" onclick="submitData();"/>
  </form>
 </body>
</html>
<script type="text/javascript">
<!--
function submitData(){

    var obj={
        name:document.getElementById("username").value,
        password:document.getElementById("userpswd").value
    };

    var xhr=new XMLHttpRequest();
    xhr.open('put','index.html',true);

    xhr.onload=function(e){
        if(this.status==200){
            alert(this.response);
        }
    };

    xhr.send(JSON.stringify(obj));
}

//-->
</script>

后台代码：

'use strict';

var express=require('express');
var http=require('http');
var fs=require('fs');
var querystring=require('querystring');

var app=express();

var mysql=require('mysql');
var pool=mysql.createPool({
    host:'127.0.0.1',
    port:'3306',
    database:'test',
    user:'root',
    password:'12345678',
});

app.get('/index.html',function(req,rsp){
    //rsp.writeHead(200,{'Content-Type':'text/html'});    
    //fs.createReadStream('index.html').pipe(rsp);
    rsp.sendFile(__dirname+'/index.html');// 与上两句意义相同
});

app.put('/index.html',function(req,res){
    req.on('data',function(data){
        var obj=JSON.parse(data.toString());// 取得Ajax提交的参数
        console.log(obj);

        pool.getConnection(function(err,connection){
            if(err){
                res.send('Can not connect to MySql DB');
                console.log(err);
            }else{
                var str;
                connection.query('insert into emp set ?',{name:obj.name,password:obj.password},function(err,result){
                    if(err){
                        str='Insert failed';
                    }else{
                        str="Insert succeed";
                    }

                    connection.release();
                    res.send(str);
                })
            }
        });
    });
});

app.listen(8080,"127.0.0.1");

 

weixin_33842328
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端 POST/PUT/PATCH 给后端的数据方式
山茶树和葡萄树
08-02 3205
前端 POST/PUT/PATCH 给后端的数据，主要有三类数据方式： 1、application/ x-www-form-urlencoded 2、multipart/form-data 3、application/json 第 1 类，原生 form 默认的提交方式，所有表单(扁平)数据会被处理成键值对形式(key1=value1&key2=value2)发送给后端，其中 key/va...
node学习笔记（二）（ajax方式向node后台提交数据）
撒由那拉
11-28 356
一：通过ajax向node后台提交数据过程（附前后台代码），并总结post与get的区别POST前台代码//CSS简单给点样式 <style> form{ width: 200px; height: 200px; margin: 100px auto; } #content{
Nodejs 发起http请求（客户端 get post put delete）
热门推荐
Andy Tools
03-14 2万+
Nodejs本身自带的http模块可以支持get和post 操作，但没有找到put操作。 本文档使用的是request模块实现。主要用于测restfulAPI客户端使用。 request模块文档：https://www.npmjs.com/package/request 使用前请引入request模块 1 HTTP方法的基本概念 Http定义了与服务器交互的不同方法，最基本的方法有4种，...
Required request body is missing的问题
A_droid的博客
08-17 1061
在开发中，使用@RequestBody出现这个报错。 前端用put请求传里一个字符串，后端用String类型来接收。 我百度回来的结果是，主要都是这两个问题导致的报错 1.传递过来的属性为空 2.GetMapping不支持@RequestBody注解 我的解决方法都不是用上边这两种方法解决的，因为put请求对应着修改，虽然前端只传过来一个name的值，但是后端只需要用一个包含name字段的对象来接受即可，springmvc会帮我们自动把值赋上。 ...
关于HTTP提交方式之PUT
Flying_in_the_world的专栏
12-17 586
Http定义了与 服务器的交互方法，其中除了一般我们用的最多的GET,POST 其实还有PUT和DELETE   根据RFC2616标准（现行的HTTP/1.1）其实还有OPTIONS,GET,HEAD,POST,PUT,DELETE,TRACE,CONNECT   简单地结束一下吧。   1、PUT: 把消息本体中的消息发送到一个URL,跟POST类似，但不常
BlogBackend:Nodejs MongoDb 博客后端
06-16
3. **创建新文章**: 设计一个POST请求路由，接收前端提交的文章数据并保存到数据库。 4. **更新文章**: 提供一个PUT请求路由，允许用户更新已有的文章。 5. **删除文章**: 创建一个DELETE请求路由，用于删除指定ID的...
教学评估后端：教学评估后端，使用nodejs koa2框架
02-07
5. 验证与校验：在接收到用户提交的数据时，进行数据验证和格式校验，确保数据的完整性和正确性。 文件名"TeachingEvaluation-backend-master"可能表示这是一个项目的主分支，包含了项目源代码的所有文件和目录。...
reactjs-nodejs-mysql-crud:使用Nodejs后端，UI的reactjs和数据库MySQL进行CRUD（创建读取更新删除）的简单方法
03-05
- **创建（Create）**：当用户在React前端提交新数据时，前端会发送POST请求到Node.js服务器，服务器接收到请求后，使用SQL的INSERT语句将数据插入到MySQL数据库。 - **读取（Read）**：GET请求通常用于获取数据，...
wetube：使用Vanila和NodeJS克隆Youtube
02-18
- **RESTful API设计**：创建符合REST原则的API接口，用于前端与后端的数据交换，如GET（获取数据）、POST（创建数据）、PUT（更新数据）和DELETE（删除数据）。 - **中间件**：Express中的中间件用于处理请求、...
wetube:使用Vanilla和NodeJS克隆Youtube
03-18
【标题】：WeTube——使用Vanilla和NodeJS克隆YouTube 在当今互联网时代，视频分享平台如YouTube已经成为人们获取信息、娱乐休闲的重要途径。为了学习和实践Web开发技术，许多开发者选择通过克隆类似YouTube的网站...
前端如何提交数据给后端(包含前端和后端代码)
yvge669的博客
04-30 5092
前端使用Ajax将Json数据提交到Spring Boot后端
axios的put/post请求携带一个string 类型的参数， 前端代码和后端接收方法
weixin_52221334的博客
03-26 5378
前端可以发送简单的js对象给后端，后端使用**@ResponseBody**注解接收即可。类型的参数，此时后端仍可以通过**@RequestParam。想要让后端支持接收单个字段，前端就必须是。请求，后端想要接收单个参数，则需要传入。@RequestBody**注解接收。
Node.js —— HTTP请求方法：get,head,put,delete,post
starter_____的博客
11-30 6658
一、标准Http协议支持六种请求方法： 1、GET 2、POST 3、PUT 4、Delete 5、HEAD 6、Options 二、不同请求方法的用途： 1，GET： GET可以说是最常见的了，它本质就是发送一个请求来取得服务器上的某一资源。资源通过一组HTTP头和呈现据（如HTML 文本，或者图片或者视频等）返回给客户端。GET请求中，永远不会包含呈现数据。 2，HEAD： H
【Nodejs】使用put方式向后端查询数据并在页面显示
weixin_34365417的博客
04-10 694
前端代码： &lt;!DOCTYPE html&gt; &lt;html lang="utf-8"&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;head&gt; &lt;title&gt;get data from db&
nodejs - 关于jquery的put、delete ajax请求变成options的解决办法
u013767689的博客
03-03 4705
情况介绍：node.js做后端服务器，3000的端口。前端浏览器是webstorm自带的63342端口。涉及到跨域访问 代码如下。 jquery: 此时使用执行put请求，调用上面的posthandler方法 之前说过，如果是post和get方法，那么都可以正常使用，如app.get和app.post这些都是可以的。但是如果采用app.put方法，则会提示options。表现为下面...
uniapp获取头像文件（二进制文件显示图片）
最新发布
weixin_62639453的博客
08-08 275
由于在获取头像文件过程中，传递参数之后，请求成功了，但是后端给我返回了一串二进制数据流，傻傻的我，以为是乱码，跑去问后端大哥，人家跟我说这不是二进制吗，突然就觉得自己傻傻的。首先，我把他封装成一个工具，方法调用，不然每次都在页面上写一堆，因为请求头像的地方挺多。代码写的还是有些问题，还有这个方法只是其一，等发现好一点的办法再更新！
CAS5.3自定义登录校验规则
梧桐树的博客
08-04 315
前一篇文章中已经用到了这个抽象类, 这次要要做的还是改造它, 我们可以在之前的基础上来改造/*** 自定义登录拦截器*/@Setter@Override//查询用户信息//仅判断用户是否输入了自己的手机号,需要自行修改} else {throw new RuntimeException("验证码错误");} else {throw new RuntimeException("用户名或密码错误");} else {
nodejs如何写一个后端
04-04
1. 安装Node.js：首先需要安装Node.js，可以从官网下载并安装。 2. 创建项目：在命令行中进入项目目录，使用npm init命令创建一个新的项目。 3. 安装依赖：使用npm install命令安装需要的依赖，如express、body-parser等。 4. 创建服务器：使用express框架创建一个服务器，监听请求并返回响应。可以使用app.get()和app.post()等方法设置路由和处理请求的函数。 5. 连接数据库：如果需要连接数据库，可以使用mongoose等库连接MongoDB或者Sequelize等库连接MySQL等关系型数据库。 6. 部署上线：使用pm2等工具将后端项目部署到云服务器上线。 7. 测试接口：使用Postman等工具测试接口是否正常工作。 示例代码： ``` const express = require('express'); const bodyParser = require('body-parser'); const mongoose = require('mongoose'); const app = express(); const port = process.env.PORT || 3000; app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); mongoose.connect('mongodb://localhost:27017/mydb', { useNewUrlParser: true, useUnifiedTopology: true }).then(() => { console.log('Database connected'); }).catch((err) => { console.log('Error:', err); }); app.get('/', (req, res) => { res.send('Hello World!'); }); app.post('/login', (req, res) => { const { username, password } = req.body; // Check username and password // If valid, return JWT token // Otherwise, return error message }); app.listen(port, () => { console.log(`Server listening on port ${port}`); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值