jquery 用ajax给后端传递json格式数据以及遇到的坑。
需求是这样的,一个列表,点击一个按钮弹窗,然后填写内容,发出请求,弹窗消失,问题就是点击发送请求以后,弹窗消失了,但后台请求也cancele了,之前是没有问题的,同样的代码,突然出了问题,页面是这样:
点击短信发送弹出页面:
点击确定按钮,发出请求,点击确定,弹窗消息,请求也取消了,坑就在于,请求还没有返回,弹窗就消失了,所以请求也就取消了。解决办法就是在请求返回体中close这个弹窗。
下面是代码
首先是父页面代码
function queryGroupTree()
{
var url = ctx + "sms/smsGroup/treeData";
var options = {
url: url,
expandLevel: 2,
onClick : zOnClick
};
$.tree.init(options);
function zOnClick(event, treeId, treeNode) {
if(treeNode.id==1){
$("#tree_1_a").unbind('click')
}else{
$("#userList").show();
$("#groupId").val(treeNode.id)
$("#sendSms").show();
table.options.createUrl = prefix + "/add/"+treeNode.id
table.options.importUrl = prefix + "/importData/"+treeNode.id
$.table.search();
}
}
}
function sendSms(){
var groupId = $("#groupId").val();
var options = {
title: '短信发送',
full:true,
url: "/sms/groupUser/toListForSend/"+groupId,
callBack: doSubmit
};
$.modal.openOptions(options);
}
function doSubmit(index, layero){
layero.find("iframe")[0].contentWindow.submitHandler();
/* var rows = layero.find("iframe")[0].contentWindow.getSelections();
if (rows.length == 0) {
$.modal.alertWarning("请至少选择一条记录");
return;
}
$.modal.close(index);*/
//queryGroupUserList();
}
这是请求父页面左边树的前端请求,点击短信发送会调用sendSms()方法、回调子页面中的submitHandler()方法。
/* 添加用户-选择用户-提交(子页面调用父页面形式) */
function submitHandler(index, layero) {
var rows = $.table.selectFirstColumns();
if (rows.length == 0) {
$.modal.alertWarning("请至少选择一条记录");
return;
}
$("#mobiles").val(rows.join())
if ($.validate.form()) {
if($.trim($("#content").val())=="") {
$.modal.alertError("短信内容不能为空")
return false;
}
if($("input[name='instantFlag']:checked").val()==0 && $("#smsSendTime").val()=="") {
$.modal.alertError("发送时间不能为空")
return false;
}
var params = {
smsSendTime:$("#smsSendTime").val(),
content:$("#content").val(),
instantFlag:$('input:radio[name="instantFlag"]:checked').val(),
mobiles:rows.join(),
temMobiles:$("#temMobiles").val()
}
$.ajax({
type: "post",
url: ctx + "sms/groupUser/sendSms",
data: JSON.stringify(params),
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function(data) {
$.modal.alertWarning("操作失败。");
console.log(data)
},
error: function(error) {
$.modal.alertWarning("操作失败。");
$.modal.close();
}
});
}
// 父页面的变量
//activeWindow().$('#userids').html('我是通过方式一来的:' + rows.join());
}
这是子页面中的ajax方法,等请求返回以后,在关闭弹窗,不然请求会中途取消,之前没问题的原因是之前请求很快返回了(在弹窗关掉之前),现在慢一些
@RequiresPermissions("sms:groupUser:list")
@PostMapping("/sendSms")
@Log(title = "短信发送", businessType = BusinessType.SMS_SEND)
@ResponseBody
public AjaxResult sendSms(@RequestBody JSONObject jsonParam)
{
SmsMsgReq msgReq = new SmsMsgReq();
msgReq.setSmsSendTime(jsonParam.getStr("jsonParam"));
msgReq.setContent(jsonParam.getStr("content"));
msgReq.setInstantFlag(jsonParam.getStr("instantFlag"));
msgReq.setMobiles(jsonParam.getStr("mobiles"));
msgReq.setTemMobiles(jsonParam.getStr("temMobiles"));
if(msgReq.getTemMobiles()!=null && !msgReq.getTemMobiles().trim().isEmpty()) {
List<String> temMobilesList = Arrays.asList(msgReq.getTemMobiles().split(","));
for (String temMobile : temMobilesList) {
if(!temMobile.matches(UserConstants.MOBILE_PHONE_NUMBER_PATTERN)) {
return AjaxResult.error("手机号:"+temMobile+"有误!");
}
}
}
msgReq.setAppAccount(ShiroUtils.getLoginName());
SysUser user = userService.selectUserByLoginName(msgReq.getAppAccount()) ;
msgReq.setPsw(DigestUtils.md5Hex(user.getOriginalPwd()));
msgReq.setPrio(PrioType.SendGroup.getCode());
if(msgReq.getSmsSendTime()!=null&& !msgReq.getSmsSendTime().isEmpty()) {
msgReq.setSmsSendTime(DateUtils.parseStrToStr(DateUtils.YYYY_MM_DD_HH_MM_SS, DateUtils.YYYYMMDDHHMMSS, msgReq.getSmsSendTime()));
}
SmsMsgResp sendSms = smsNotifyService.sendSms(msgReq);
if(SMS_RESP_STAUTS_SUCCESS.equals(sendSms.getState())) {
return AjaxResult.success();
}else if(SMS_RESP_STAUTS_FAIL.equals(sendSms.getState())) {
return AjaxResult.error(sendSms.getRemark());
}else {
return AjaxResult.error("系统异常,请联系管理员!");
}
}
上面是后端接口接收请求的代码。