一、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') { // 设置session req.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') { // 设置session req.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.email result[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中的使用
post请求方式<form id="form"> <input type="text" name="username" /> <input type="password" name="password" /> <input type="submit"/> </form>
服务器端：$('#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//默认阻止提交数据跳转 })
get请求方式app.post('/test', (req, res) => { res.send(req.body); });
服务器端：$('#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中的使用
post请求方式<form id="form"> <input type="text" name="username" /> <input type="password" name="password" /> <input type="submit"/> </form>
服务器端：$('#form').on('submit', function() { //将表单数据转为json格式的数据 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//默认阻止提交数据跳转 })
get请求方式app.post('/test', (req, res) => { res.send(req.body); });
服务器端：$('#form').on('submit', function() { //将表单数据转为json格式的数据 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); });
