一、FormData方法
作用:
模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。异步上传二进制文件使用
在原生ajax中的使用
<form id="form"> <input type="text" name="username" /> <input type="password" name="password" /> <input type="button"/> </form>
var form = document.getElementById('form'); // 将html表单转换为formData表单对象var formData = new FormData(form );// 创建ajax对象var xhr = new XMLHttpRequest();// 对ajax对象进行配置xhr.open('post', 'http://localhost:3001/login');// 当发送跨域请求时，携带cookie信息xhr.withCredentials = true;// 发送请求并传递请求参数xhr.send(formData);// 监听服务器端给予的响应内容xhr.onload = function () {console.log(xhr.responseText);}
服务器端：
app.post('/login', (req, res) => {// 创建表单解析对象var form = formidable.IncomingForm();// 解析表单form.parse(req, (err, fields, file) => {// 接收客户端传递过来的用户名和密码const {username, password } = fields;// 用户名密码比对if (username == 'test' && password == '123456') {// 设置sessionreq.session.isLogin = true;res.send({message: '登录成功'});} else {req.session.isLogin = false;res.send({message: '登录失败, 用户名或密码错误'});}})})
注意:
Formdata 对象不能用于 get 请求，因为对象需要被传递到 send 方法中，而 get 请求方式的请求参数只能 放在请求地址的后面。服务器端 bodyParser 模块不能解析 formData 对象表单数据，我们需要使用formidable模块进行解析。
在jquery中的使用
<form id="form"> <input type="text" name="username" /> <input type="password" name="password" /> <input type="button"/> </form>
let form = document.querySelector('#form');$.ajax({type:"post",url:"/login",data:formData,success:function(res){},processData: false,contentType: false,error:function(xhr){console.log(xhr)}})
服务器端：
app.post('/login', (req, res) => {// 创建表单解析对象var form = formidable.IncomingForm();// 解析表单form.parse(req, (err, fields, file) => {// 接收客户端传递过来的用户名和密码const {username, password } = fields;// 用户名密码比对if (username == 'test' && password == '123456') {// 设置sessionreq.session.isLogin = true;res.send({message: '登录成功'});} else {req.session.isLogin = false;res.send({message: '登录失败, 用户名或密码错误'});}})})
二、SerializeArray方法
作用:
将表单中的数据自动拼接成数组形式使用
在原生ajax中的使用(发送json形式的数据)<form id="form"> <input type="text" name="username" /> <input type="password" name="password" /> <input type="submit"/> </form>
function serialize2Json(form) {var result = {};// [{name: 'email', value: '用户输入的内容'}]var f = form.serializeArray();f.forEach(function(item) {// result.emailresult[item.name] = item.value;});return result;}$('#form').on('submit', function() {let result = serialize2Json($(this)); //将表单数据转为json格式的数据// 创建ajax对象var xhr = new XMLHttpRequest();// 对ajax对象进行配置xhr.open('post', 'http://localhost:3001/json');// 当发送跨域请求时，携带cookie信息xhr.withCredentials = true;// 设置请求参数格式的类型（post请求必须要设置）xhr.setRequestHeader('Content-Type', 'application/json');// 发送请求并传递请求参数xhr.send(JSON.stringify(result ));// 将json对象转换为json字符串发送// 监听服务器端给予的响应内容xhr.onload = function () {console.log(xhr.responseText);}// return false//默认阻止提交数据跳转})
服务器端：
app.post('/json', (req, res) => {res.send(req.body);});
在jquery中的使用(发送json形式的数据)
<form id="form"> <input type="text" name="username" /> <input type="password" name="password" /> <input type="submit"/> </form>
// 将表单中用户输入的内容转换为对象类型 function serializeObject (obj) {// 处理结果对象 var result = {}; // [{name: 'username', value: '用户输入的内容'}, {name: 'password' , value: '123456'}] var params = obj.serializeArray(); // 循环数组 将数组转换为对象类型 $.each(params, function (index, value) {result[value.name] = value.value; }) // 将处理的结果返回到函数外部 return result; }$('#form').on('submit', function() {//将表单数据转为json格式的数据let result = serialize2Json($(this)); $.ajax({type:"post",url:"/json",// 向服务器端发送的请求参数// name=zhangsan&age=100// data: {// name: 'zhangsan',// age: 100// },data: JSON.stringify(result),// 指定参数的格式类型contentType: 'application/json',success:function(res){},error:function(xhr){console.log(xhr)}})// return false//默认阻止提交数据跳转})
服务器端：
app.post('/json', (req, res) => {res.send(req.body);});
三、Serialize方法
作用:
将表单中的数据自动拼接成字符串类型的参数注：(参数名称=参数值&参数名称=参数值)
使用
在原生ajax中的使用<form id="form"> <input type="text" name="username" /> <input type="password" name="password" /> <input type="submit"/> </form>
post请求方式
$('#form').on('submit', function() {var params = $('#form').serialize();// username=''&age=''// 创建ajax对象var xhr = new XMLHttpRequest();// 对ajax对象进行配置xhr.open('post', '/test');// 当发送跨域请求时，携带cookie信息xhr.withCredentials = true;// 设置请求参数格式的类型（post请求必须要设置）xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');// 发送请求并传递请求参数xhr.send(params);// // 监听服务器端给予的响应内容xhr.onload = function () {console.log(xhr.responseText);}// return false//默认阻止提交数据跳转})
服务器端：
app.post('/test', (req, res) => {res.send(req.body);});
get请求方式
$('#form').on('submit', function() {var params = $('#form').serialize();// username=''&age=''// 创建ajax对象var xhr = new XMLHttpRequest();// 对ajax对象进行配置xhr.open('get', 'http://localhost:3001/test?'+params);// 当发送跨域请求时，携带cookie信息xhr.withCredentials = true;// 发送请求并传递请求参数xhr.send();// // 监听服务器端给予的响应内容xhr.onload = function () {console.log(xhr.responseText);}// return false//默认阻止提交数据跳转})
服务器端：
app.get('/test', (req, res) => {res.send(req.query);});
在jquery中的使用
<form id="form"> <input type="text" name="username" /> <input type="password" name="password" /> <input type="submit"/> </form>
post请求方式
$('#form').on('submit', function() {//将表单数据转为字符串类型的数据var params = $('#form').serialize(); $.ajax({type:"post",url:"/test",data:params,// 指定参数的格式类型contentType: 'application/x-www-form-urlencoded',success:function(res){console.log(res)},error:function(xhr){console.log(xhr)}})// return false//默认阻止提交数据跳转})
服务器端：
app.post('/test', (req, res) => {res.send(req.body);});
get请求方式
$('#form').on('submit', function() {//将表单数据转为字符串类型的数据var params = $('#form').serialize(); $.ajax({type:"get",url:"/test",data:params,success:function(res){console.log(res)},error:function(xhr){console.log(xhr)}})// return false//默认阻止提交数据跳转})
服务器端：
app.get('/test', (req, res) => {res.send(req.query);});
