一、FormData方法
作用:
模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。异步上传二进制文件
使用
在原生ajax中的使用
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中的使用
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形式的数据)
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形式的数据)
// 将表单中用户输入的内容转换为对象类型
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').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中的使用
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);
});