Nodejs之http的表单提交

之前介绍了http模块的请求与响应的过程，也介绍了TCP协议的客户端与服务端的数据传输，http协议是TCP上层协议。这里创建了一个简单的web服务器，并对提交表单数据进行处理，根据了不起的Node.js一书总结。

POST方法提交表单数据

　　之前也总结过，向服务器提交数据需要使用POST方法，GET方法的请求信息都在查询字符串中，没有请求体，而POST方法的传输的数据都在请求体中，故提交表单数据时需要使用POST方法。

　　req是请求信息，req.url表示请求的地址，当服务器运行之后，req请求的网址为127.0.0.1:3000，此时req.url为‘/'，则返回的是一串表单数据，在表单数据中设置了method是post，action是‘/url'，表面提交数据的方式是POST，将数据提交的地址为127.0.0.1:3000/url，而提交之后要获取新的页面即127.0.0.1:3000/url，此时req.url为‘/url'，故显示的另一个页面。

 //提交表单数据
 var http=require('http');
 var querystring=require('querystring');

 var server=http.createServer(function (req,res) {
 //req.url不同则返回的页面不同
 if('/'==req.url){
  res.writeHead(200,{'Content-Type':'text/html'});
  res.write([
  '<form method="post" action="/url">',
  '<h1>My Form</h1>',
  '<fieldset>',
  '<label>Personal Information</label>',
  '<p>What is your name?</p>',
  '<input type="text" name="name">',
  '<button>submit</button>',
  '</form>'
  ].join(''));
  res.end();
 }else if('/url'==req.url&&req.method=='POST'){
  var reqBody='';
  req.on('data',function (data) {
  reqBody += data;
  });
  req.on('end',function () {//用于数据接收完成后再获取
  res.writeHead(200,{'Content-Type':'text/html'});
  res.write('you have sent a '+req.method+' request\n');
  res.write('<p>Content-Type:'+req.headers['content-type']+'</p>'
   +'<p>Data:your name is '+querystring.parse(reqBody).name+'</p>');
  res.end();
  })
 }else{
  res.writeHead(404);
  res.write('Not Found');
  res.end();
 }
 }).listen(3000,function () {
 console.log('server is listening 3000');
 });

　　提交之后，需要获取请求信息的请求体，因为POST方法中信息都在请求体中，用req绑定data事件获取数据，这里需要注意的是必须得在数据接收完成后再对数据进行操作，即必须绑定end事件监听请求信息是否传输完成。

　　querystring是查询字符串模块，用于对查询字符串的解析，parse方法将查询字符串解析成一个对象。在git中运行服务器，得到页面是这样的：

提交数据后：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • angularjs $http实现form表单提交示例

    需求:请求第三方后台接口返回一段html字符串如下,由前端去实现form表单的POST提交, 说明:form表单submit()实现自动提交input标签hidden,注意script代码中的document.redirect.submit(); <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head

  • Nodejs下用submit提交表单提示cannot post错误的解决方法

    <span style="font-size:18px;"><form action="/registOK" method="get"> <p>用户名:<input type="text" id="userName" name="userName"></p> <p>密码:<input type="pa

  • httpclient模拟post请求json封装表单数据的实现方法

    废话不说上代码: public static String httpPostWithJSON(String url) throws Exception { HttpPost httpPost = new HttpPost(url); CloseableHttpClient client = HttpClients.createDefault(); String respContent = null; // json方式 JSONObject jsonParam = new JSONObject(

  • nodejs 实现模拟form表单上传文件

    nodejs 实现模拟form表单上传文件

    以前项目里有这个方法,最近在客户那里出问题了,同事说,这个方法从来就没管用过,SO,用了一天时间把这个方法给搞出来了(觉得花费的时间长了点),分享之. 代码及测试用例: var http = require('http'); var path = require('path'); var fs = require('fs'); function postFile(fileKeyValue, req) { var boundaryKey = Math.random().toString(16);

  • 全面解析node 表单的图片上传

    node 全面解析表单的图片上传 ,multiparty解析与内容类型的HTTP请求multipart/form-data,也被称为文件上传. multiparty安装 npm install multiparty html代码 <form action="/api/uppic" method="post" > <input type="file" name="pic" > <input type

  • Nodejs之http的表单提交

    Nodejs之http的表单提交

    之前介绍了http模块的请求与响应的过程,也介绍了TCP协议的客户端与服务端的数据传输,http协议是TCP上层协议.这里创建了一个简单的web服务器,并对提交表单数据进行处理,根据了不起的Node.js一书总结. POST方法提交表单数据 之前也总结过,向服务器提交数据需要使用POST方法,GET方法的请求信息都在查询字符串中,没有请求体,而POST方法的传输的数据都在请求体中,故提交表单数据时需要使用POST方法. req是请求信息,req.url表示请求的地址,当服务器运行之后,req请求

  • Asp.Net模拟表单提交数据和上传文件的实现代码

    如果你需要跨域上传内容到另外一个域名并且需要获取返回值,使用Asp.Net的作为代理是最好的办法,要是客户端直接提交到iframe中,由于跨域是无法用javascript获取到iframe中返回的内容的.此时需要在自己的网站做一个动态页作为代理,将表单提交到动态页,动态页负责将表单的内容使用WebClient或HttpWebRequest将表单数据再上传到远程服务器,由于在服务器端进行操作,就不存在跨域问题了. WebClient上传只包含键值对的文本信息示例代码: 复制代码 代码如下: str

  • JSP之表单提交get和post的区别详解及实例

    JSP之表单提交get和post的区别详解及实例

    JSP之表单提交get和post的详解及实例 一 get和post的区别 二 实战(post方式提交) 1.login.jsp <%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %> <% String path = request.getContextPath(); String basePath = req

  • Vue form 表单提交+ajax异步请求+分页效果

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="UTF-

  • 把HTML表单提交的数据转化成XML文件

    通常,在asp中进行的form表单提交的数据都被写进数据库管理系统中去,如果你想要你的数据是方便携带的数据,你可以把它写进一个XML文件中去.这种方法是跨平台的,因此你所收集的信息不需要进行转换. 为了实现上面的想法,你必须先利用Microsoft XMLDOM建立一个XML文件,Microsoft XMLDOM对象有一个扩展对象库,它可以创建组成XML文件所需要的元素.属性.属性值.     当XMLDOM对象实例化以后,必须对各个元素进行引用来建立XML的结构,下面的例子就是先建立根元素,并

  • AngularJS表单提交实例详解

    本文实例讲述了AngularJS表单提交.分享给大家供大家参考,具体如下: AngularJS中的数据绑定 AngularJS创建实时模板来代替视图,而不是将数据合并进模板之后更新DOM.任何一个独立视图组件中的值都是动态替换的. ng-app属性声明所有被其包含的内容都属于这个AngularJS应用,这也是我们可以在Web应用中嵌套AngularJS应用的原因.只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS影响. 当AngularJS认为某个值可能发生变化时,它会运行

  • AngularJS模仿Form表单提交的实现代码

    废话不多说了,直接给大家贴代码了. $http({ url: "http://localhost:10086/yuanxin/Conference/ImportExcelDataForBusRoute", method: 'Post', headers: { 'Content-Type': 'multipart/form-data' }, data: { BusRoute: file, ConferenceID: "1" }, transformRequest: f

  • JS去掉字符串前后空格、阻止表单提交的实现代码

    $.trim(str) jQuery内部实现为: function trim(str){ return str.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,''); } 使用JS和JQuery 阻止表单提交的两种方法 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk">

  • 利用JavaScript阻止表单提交的两种方法

    在JavaScript中,阻止表单默认提交行为的方法有两种,分别是: (1) return false 示例代码 <form name="loginForm" action="login.aspx" method="post"> <button type="submit" value="Submit" id="submit">Submit</button&g

随机推荐