1、获取表单数据
//获取数据
function getAllData(){
let orderItem=[];
$(".passenger").each(function(index,ela){
let passenger = {};
const _this = $(ela);
passenger.passenger = _this.find("input[name=passenger]").val();
let num = parseInt(index)+1;
let sex = "passengerSex"+num;
passenger.passengerSex = _this.find('input[name='+sex+']:checked').val();
passenger.idType = _this.find("select").val();
passenger.idNumber = _this.find("input[name=idNumber]").val();
passenger.passengerPhone = _this.find("input[name=passengerPhone]").val();
passenger.passengerEmail = _this.find("input[name=passengerEmail]").val();
const flag = _this.find("input[name=idNumber]").prop("ky");
if(flag === "adult"){
passenger.price = adult_price;
passenger.fuelCosts = fue_money;
passenger.airportFee = airport_money;
passenger.totalPrice = parseInt(adult_price)+parseInt(fue_money)+parseInt(airport_money);
}else if(flag === "child"){
passenger.price = chil_price;
passenger.fuelCosts = fue_chil_money;
passenger.airportFee = airport_chil_money;
passenger.totalPrice = parseInt(chil_price)+parseInt(fue_chil_money)+parseInt(airport_chil_money);
}else if(flag === "baby"){
passenger.price = baby_price;
passenger.fuelCosts = fue_baby_money;
passenger.airportFee = airport_baby_money;
passenger.totalPrice = parseInt(baby_price)+parseInt(fue_baby_money)+parseInt(airport_baby_money);
}
orderItem.push(passenger);
});//end 循环设置乘机人信息
let order = {};
order.flightId = flightId;
order.contacts = $("input[name=contacts]").val();
order.contactsPhone = $("input[name=contactsPhone]").val();
order.contactsEmail = $("input[name=contactsEmail]").val();
order.clazz = type;
order.ticketCount = orderItem.length;/*parseInt($("#adult_num").text())+parseInt($("#chil_num").text())+parseInt($("#baby_num").text());*/
order.totalPrice = parseInt($("#totalPrice").text().replace(/\,/g,""));
let dataMap = new Map();
dataMap.set("item",orderItem);
dataMap.set("order",order);
console.log(dataMap);
console.log(dataMap.get("item"));
console.log(dataMap.get("order"));
//Map转为Json的方法
let obj= Object.create(null);
for (let[k,v] of dataMap) {
obj[k] = v;
}
console.log(obj);
return obj;
}
2、异步传输
//确认订单
$("#confrim").on("click",function(){
console.log("确认确认===>");
let passenger=true;
//检验乘机人信息
$(".passenger").each(function(index,ela){
let name = $(ela).find("input[name=passenger]");
let idNum = $(ela).find("input[name=idNumber]");
let phone = $(ela).find("input[name=passengerPhone]");
let email = $(ela).find("input[name=passengerEmail]");
name.removeClass("layui-form-danger");
idNum.removeClass("layui-form-danger");
phone.removeClass("layui-form-danger");
email.removeClass("layui-form-danger");
let name_tip = vailName(name);
let id_tip = vailId(idNum);
let phone_tip = vailPhone(phone);
let email_tip = vailEmail(email);
if(name_tip){
layer.tips(name_tip, name, {
tips: [1, '#0b1d29'] //还可配置颜色
});
name.focus();
name.addClass("layui-form-danger");
passenger = false;
return false;
}
if(id_tip){
layer.tips(id_tip, idNum, {
tips: [1, '#0b1d29'] //还可配置颜色
});
idNum.focus();
idNum.addClass("layui-form-danger");
passenger = false;
return false;
}
if(phone_tip){
layer.tips(phone_tip, phone, {
tips: [1, '#0b1d29'] //还可配置颜色
});
phone.focus();
phone.addClass("layui-form-danger");
passenger = false;
return false;
}
if(email_tip){
layer.tips(email_tip, email, {
tips: [1, '#0b1d29'] //还可配置颜色
});
email.focus();
email.addClass("layui-form-danger");
passenger = false;
return false;
}
});
if(passenger){
//检验联系人信息
const contact = $("input[name=contacts]");
const contactPhone = $("input[name=contactsPhone]");
const contactEmail = $("input[name=contactsEmail]");
contact.removeClass("layui-form-danger");
contactPhone.removeClass("layui-form-danger");
contactEmail.removeClass("layui-form-danger");
let contact_tip = vailName(contact);
let contactPhone_tip = vailPhone(contactPhone);
let contactEmail_tip = vailEmail(contactEmail);
if (contact_tip){
layer.tips(contact_tip, contact, {
tips: [1, '#0b1d29'] //还可配置颜色
});
contact.focus();
contact.addClass("layui-form-danger");
return;
}
if (contactPhone_tip){
layer.tips(contactPhone_tip, contactPhone, {
tips: [1, '#0b1d29'] //还可配置颜色
});
contactPhone.focus();
contactPhone.addClass("layui-form-danger");
return;
}
if (contactEmail_tip){
layer.tips(contactEmail_tip, contactEmail, {
tips: [1, '#0b1d29'] //还可配置颜色
});
contactEmail.focus();
contactEmail.addClass("layui-form-danger");
return;
}
}else{
return;
}
console.log("全部通过验证");
if(parseInt($("#baby_num").text()) > max_babyNum){
layer.alert("婴儿人数不能超过"+max_babyNum+"人", {icon: 0,anim: 6});
return;
}
if(parseInt($("#adult_num").text()) <= 0){
layer.alert("必须有一名成年人", {icon: 0,anim: 6});
return;
}
let data = getAllData();
var searching = layer.msg('正在下单,请稍后...', {
icon: 16, //加载图标
shade: 0.5,
time:false //取消自动关闭
});
$.ajax({
type:"post",
dataType:"json",
url:webSaveOrder(),
contentType : 'application/json;charset=utf-8',
data: JSON.stringify(data),
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("X-Auth0-Token", getToken("token"));
},
success:function(res){
layer.close(searching);
if(res.code !== 0){
layer.msg(res.msg,{icon: 0,anim: 6});
return;
}
layer.msg('下单成功,正在跳转确认页面,请稍后....', {
icon: 16, //加载图标
shade: 0.5,
time:false //取消自动关闭
});
window.location.href = getHost()+toConfirmOrder()+"/"+res.data;
},
error:function(){
layer.close(searching);
$.kyAlert("网络出错啦,请稍后再试试吧!",1000,"danger");
}
});
});
重点: contentType : 'application/json;charset=utf-8',
data: JSON.stringify(data),
$.ajax({
type:"post",
dataType:"json",
url:webSaveOrder(),
contentType : 'application/json;charset=utf-8',
data: JSON.stringify(data),
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("X-Auth0-Token", getToken("token"));
},
success:function(res){
layer.close(searching);
if(res.code !== 0){
layer.msg(res.msg,{icon: 0,anim: 6});
return;
}
layer.msg('下单成功,正在跳转确认页面,请稍后....', {
icon: 16, //加载图标
shade: 0.5,
time:false //取消自动关闭
});
window.location.href = getHost()+toConfirmOrder()+"/"+res.data;
},
error:function(){
layer.close(searching);
$.kyAlert("网络出错啦,请稍后再试试吧!",1000,"danger");
}
});
3、后台接收参数
public Object saveOrder(@RequestBody Map<String,Object> map , HttpServletRequest httpRequest){
Result result = new Result();
String token= TokenUtils.getToken(httpRequest);
WebUserTokenEntity entity=webTokenRedis.get(token);
if(EmptyUtils.isEmpty(entity)){
result.setCode(1);
result.setMsg("未登录或登录过期,请重新登录");
return result;
}
String userId = entity.getUserId().toString();
OrdersEntity ordersEntity = JSONObject.parseObject(JSONObject.toJSONString(map.get("order")),OrdersEntity.class);
ordersEntity.setUserId(userId);
String orderId = ID+snowFlake.nextId();
List<OrderItemEntity> oIList = JSONObject.parseArray(JSONObject.toJSONString(map.get("item")),OrderItemEntity.class);
//下面写业务需求
}
注意:
参数注解为:@RequestBody
不能直接 (OrdersEntity)map.get("order"),否则会报java.util.LinkedHashMap cannot be cast to xxx 类型转换错误。应该先将其转换成json字符串:JSONObject.toJSONString(map.get("order")),再转换成对应的类型:JSONObject.parseObject(JSONObject.toJSONString(map.get("order")),OrdersEntity.class);
此处使用的是com.alibaba.fastjson.JSONObject 阿里的JSON类