共计 4136 个字符,预计需要花费 11 分钟才能阅读完成。
前言: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/json
app.use(bodyParser.json())
// 解决申请的 content-type 为 application/x-www-form-urlencoded
app.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>
以下几点须要特地留神
- form 的提交行为须要通过 type=submit 实现
- form 中的 method 属性不指定时,form 默认的提交形式为 get 申请。
- form 表单的提交后会有默认行为,会跳转刷新到 action 的页面
- form 表单的提交形式,== 申请头默认的 content-type 为 x-www-form-urlencoded==
- 当一个 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>
// js
var 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
})
})
阐明:
- 通过脚本提交行为仍然存在跳转 新页面刷新的问题
- 脚本中能够通过阻止默认行为来禁止页面跳转
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)
}
})
})
注意事项:
- 通过 ajax 申请模仿 form 的提交须要留神 form 表单内 不容许
<button type="submit"></button>
的存在,否则会和 ajax 本身的申请相冲突 - ajax 申请中,默认的 content-type 为 ’formdata’, 可依据本人的须要批改
- 后盾对不同的 content-type 申请头的解决如下
// 解决申请 的 content-type 为 application/json
app.use(bodyParser.json())
// 解决申请的 content-type 为 application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({extended: false}))
- ajax 申请须要解决跨域问题,而 form 表单的默认提交不须要,起因是,== 原页面用 form 提交到另一个域名之后,原脚本无奈获取响应的内容,所以浏览器认为这是平安的,而 ajax 须要解决响应的内容,浏览器则认为这是一种跨域的行为 ==
- 为了解决 ajax 的跨域问题,须要在后盾的代码中退出跨域的解决
const cors = require("cors")
// 解决跨域
app.use(cors())
- 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
正文完
发表至: javascript
2020-09-16