前言： html 中的form元素被称之为表单，form元素中的内容，蕴含有交互控制元件，其目标是用来向web 服务器提交信息，实现前后端的交互目标。相干根底内容参照form基础知识文档 ,文章将会启动一个node 后盾服务器，对前端form 表单的各种场景以及后端对申请后果的响应做一个演绎总结

1. node服务提供申请地址

   咱们通过express 来启动后盾服务，并且模仿两个后盾接口

const express = require('express')const app = express()const bodyParser = require('body-parser')// 解决申请 的content-type 为application/jsonapp.use(bodyParser.json())//解决申请的content-type 为application/x-www-form-urlencodedapp.use(bodyParser.urlencoded({  extended: false}))app.get('/user', (req, res) => {  console.log(req.query)  res.send('胜利接管')})app.post('/user', (req, res) => {  console.log(req.body)  res.send('胜利接管')})app.listen(3008, () => {  console.log('服务启动')})

2. 一般的form 表单提交

  form 表单通过method 的属性来确定提交给后盾的申请形式，两者的根本用法如下

<!-- form 表单post提交，默认会刷新到 action 页面 -->    <form action="http://localhost:3008/user" method="POST" name="post提交">      <p>name: <input type="text" name="username"></p>      <p>password: <input type="password" name="password"></p>      <input type="submit" value="提交">    </form>    <!-- form 表单get 提交, 默认刷新action 页面 -->    <form action="http://localhost:3008/user" method="GET" name="get提交">      <p>name: <input type="text" name="username"></p>      <p>password: <input type="password" name="password"></p>      <input type="submit" value="提交">    </form>

以下几点须要特地留神

  1. form 的提交行为须要通过type=submit实现
  2. form 中的method 属性不指定时， form 默认的提交形式为 get申请。
  3. form 表单的提交后会有默认行为，会跳转刷新到action 的页面
  4. form 表单的提交形式，==申请头默认的content-type 为 x-www-form-urlencoded==
  5. 当一个form 表单外部，所有的input 中只有一个 type='text' 的时候，enter 键会有默认的提交行为（留神前提条件）。

3. 阻止新页面跳转

从后面能够晓得，form 表单的提交会随同着跳转到action中指定 的url 链接，为了阻止这一行为，能够通过设置一个暗藏的iframe 页面，并将form 的target 属性指向这个iframe，以后页面iframe则不会刷新页面

<!-- 无刷新页面提交 -->    <form action="http://localhost:3008/user" method="POST" name="post提交" target="targetIfr">      <p>name: <input type="text" name="username"></p>      <p>password: <input type="password" name="password"></p>      <input type="submit" value="提交">    </form>    <iframe name="targetIfr" style="display:none"></iframe>

4. 脚本触发form 表单的提交行为

js事件触发表单提交，通过button、链接等触发事件，js调用submit()办法提交表单数据，jquery通过submit()办法

<!-- html --><!-- 通过js 进行表单的提交 存在问题，页面会跳转刷新-->    <form action="http://localhost:3008/user" method="POST" name="jsForm" target="targetIfr" id="jsForm">      <p>name: <input type="text" name="username"></p>      <p>password: <input type="password" name="password"></p>      <button id="btn">提交</button>    </form>    <!-- 通过jquery 进行表单的提交 存在问题，并阻止页面跳转刷新-->    <form action="http://localhost:3008/user" method="POST" name="jqueryForm" target="targetIfr" id="jqueryForm">      <p>name: <input type="text" name="username"></p>      <p>password: <input type="password" name="password"></p>      <button id="jqbtn">提交</button>    </form>
// jsvar btn = document.getElementById('btn')var jsForm = document.getElementById('jsForm')btn.onclick = function () {    jsForm.submit()}// jquery$('#jqbtn').click(function () {  $('#jqueryForm').submit(function () {    console.log('submit success')    return false  })})

阐明：

  1. 通过脚本提交行为仍然存在跳转 新页面刷新的问题
  2. 脚本中能够通过阻止默认行为来禁止页面跳转

5. ajax 提交申请

<!-- ajax 申请 -->    <form method="POST">      <p>name: <input type="text" name="username"></p>      <p>password: <input type="password" name="password"></p>      <div id="jqbtn">提交</div>    </form>
 $('#jqbtn').click(function () {      $.ajax({        url: 'http://localhost:3008/user',        type: 'POST',        data: JSON.stringify(params),        contentType: "application/json", // 默认以formdata模式发送给后盾        dataType: "json",        success: function (res) {          console.log(res)        }      })    })

注意事项：

  1. 通过ajax 申请模仿form 的提交须要留神 form 表单内 不容许 <button type="submit"></button>的存在，否则会和ajax 本身的申请相冲突
  2. ajax 申请中，默认的content-type 为'formdata',可依据本人的须要批改
  3. 后盾对不同的content-type 申请头的解决如下
// 解决申请 的content-type 为application/jsonapp.use(bodyParser.json())//解决申请的content-type 为application/x-www-form-urlencodedapp.use(bodyParser.urlencoded({  extended: false}))
  • ajax 申请须要解决跨域问题，而form 表单的默认提交不须要，起因是，==原页面用form 提交到另一个域名之后，原脚本无奈获取响应的内容，所以浏览器认为这是平安的，而ajax 须要解决响应的内容，浏览器则认为这是一种跨域的行为==
  • 为了解决ajax 的跨域问题，须要在后盾的代码中退出跨域的解决
const cors = require("cors")// 解决跨域app.use(cors())
  1. FormData 解决文件的上传

文件的上传，申请头中content-type 的模式须要批改为multipart/form-data， 相应的，只有将form的enctype 属性批改为enctype="multipart/form-data"即可

<!-- FormData -->    <form action="http://localhost:3008/user" method="POST" enctype="multipart/form-data">      <p><input type="file" name="file"></p>      <input type="submit" value="提交">    </form>

后盾解决局部，咱们须要额定装置formidable 依赖来解决form-data 格局的解析

const formidable = require('formidable')const form = new formidable.IncomingForm();app.post('/user', (req, res) => {  form.parse(req, function (err, fields, files) {    console.log(files)    res.send('胜利接管')  })})

7.总结

form 表单前后端的解决汇总如上，具体的代码能够参考 github