IOS(苹果系统)任意浏览器jquery-ajax跳转问题

最新推荐文章于 2023-02-19 22:01:49 发布

原创最新推荐文章于 2023-02-19 22:01:49 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#IOS #ajax #直接跳转 #ajax失效 #结果直接输出到页面

在iOS设备上，一个使用jQuery AJAX的网页在提交时直接跳转到action URL并显示JSON响应，而非按预期进行AJAX处理。问题源于HTML form的action属性未设置或设置错误，以及JavaScript函数名与内置submit冲突。解决方法包括使用独特函数名如submitMyslef()，并将提交按钮移出form标签。目标是实现AJAX提交数据到后台，后台处理后再将结果插入到页面相应位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：在Pc端和android端的浏览器能正常调用并且显示，而在IOS（苹果系统）中只要是操作页面就会跳转到提交的action的url地址，地址栏会变化为form表单的action地址，并且整个页面都显示后台的结果，一大堆JSON串，整个过程ajax没有控制form提交过程，完全是form表单起了作用而且执行了跳转。

问题原因：

不注意细节，在html的form标签中action属性填写对应的action地址，而没有填空或者javasctipt:void(0)等阻止提交的语句。
又一次不注意细节，自定义的函数名submit和js中的函数名submit重复，导致每次提交都进行了form标签的提交，而不是ajax。

解决办法：

定义个性化的submit函数名，如submitMyslef()
将带有提交动作的标签，移到form标签外部。

需求描述：页面通过jqury-ajax提交数据到后台，后台计算后将结果反馈给ajax进行处理后，将需要的内容添入到对应的html标签中。

HTML关键代码：

<div class="col-xs-12 iform formB_1">
	<form action="${webRoot }/frontPageController.do?compValue" method="post" id="formObjId" >
		<input type="hidden" name="groupid" value="H2">
		<div class="col-xs-12 iform_1">
		<div class="iform_1_1">投保人年龄</div>
		<div class="col-xs-12 nopadding iform_1_2"><input name="tage" id="tage" type="text" class="ip_text" placeholder="投保人年龄"></div>
		</div>
		
		<div class="col-xs-12 iform_1">
		<div class="iform_1_1">被保人年龄</div>
		<div class="col-xs-12 nopadding iform_1_2"><input name="btage" id="btage" type="text" class="ip_text" placeholder="被保人年龄"></div>
		</div>
		
		<div class="col-xs-12 iform_1">
		<div class="iform_1_1">性别</div>
		<div class="col-xs-12 nopadding el-checkbox iform_1_2">
		<div class="iform_1_3">
		<label class="el-radio">
		    <span class="margin-r">男</span>
		    <input type="radio" name="sex" checked value="1">
		    <span class="el-radio-style pull-left"></span>
		</label>
		</div>
		<div class="iform_1_3">
		<label class="el-radio">
		    <span class="margin-r">女</span>
		    <input type="radio" name="sex"  value="0">
		    <span class="el-radio-style pull-left"></span>
		</label>
		</div>
		</div>
		</div>
		
		<div class="col-xs-12 iform_1">
		<div class="iform_1_1">是否有医保</div>
		<div class="col-xs-12 nopadding el-checkbox iform_1_2">
		<div class="iform_1_3">
		<label class="el-radio">
		    <span class="margin-r">是</span>
		    <input type="radio" name="ishas"  value="1" checked>
		    <span class="el-radio-style pull-left"></span>
		</label>
		</div>
		<div class="iform_1_3">
		<label class="el-radio">
		    <span class="margin-r">否</span>
		    <input type="radio" name="ishas" value="0">
		    <span class="el-radio-style pull-left"></span>
		</label>
		</div>
		</div>
		</div>
		
		<div class="col-xs-12 iform_1">
		<div class="iform_1_1">缴费年期</div>
		<div class="col-xs-12 nopadding iform_1_2"><input name="payyaer" id="payyaer" type="text" class="ip_text" placeholder="缴费年期"></div>
		</div>
		
		<div class="col-xs-12 iform_1">
		<div class="iform_1_1">保额</div>
		<div class="col-xs-7 nopadding iform_1_2"><input name="cov" id="cov" type="text" class="ip_text" placeholder="保额"></div>
		<div class="col-xs-5 iform_1_22">万</div>
		</div>
		<div class="col-xs-12 iform_1_4"><a onclick="return submit();" style=" cursor: pointer">结 算</a></div>
	</form>
		
</div>

Js代码：

function getAjaxAllDatas(url,data) {
	var redata;
	//var tmpdata = JSON.stringify(data);
	$.ajax({
		async : false,
		cache : false,
		type : 'POST',
	    dataType : "json",
		data:data,
		url : url,// 请求的action路径
		error : function(r,e,i) {// 请求失败处理函数
			return "*异常*";
		},
		success : function(data1) {
			try {
				alert(JSON.stringify(data1));
			//var d = json.parseJSON(data);
				redata = data1;
			} catch (e) {
				alert(3);
				return "*异常*";
			}
		}
	});
	return redata;
}

java代码：

@RequestMapping(params = "compValue")
	@ResponseBody
	public AjaxJson compValue(FrontPagePojo fppojo ,HttpServletRequest request, HttpServletResponse response){
		
		
		AjaxJson j = new AjaxJson();
		Map<String ,FrontPagePojo> map = new HashMap<String ,FrontPagePojo>();
		if(StringUtils.isNotEmpty(fppojo.getGroupid())){//判断组合，例如：H1、H2、H3
			if("H1".equals(fppojo.getGroupid())){
				map = cbcShareService.getGroupH1(fppojo);
			} else if("H2".equals(fppojo.getGroupid())){
				map = cbcShareService.getGroupH2(fppojo);
			} else {
				map = cbcShareService.getGroupH3(fppojo);
			}
		} else {//单独查询，选择某一个险种的进行计算时
			//判断tofinsid，是否为空
			String tofi = fppojo.getTofinsid();
			if("F001".equals(tofi)){//和groupid互斥
				map.putAll(cbcShareService.getF001Result(fppojo,tofi));
			} else if("F002".equals(tofi)){
				map.putAll(cbcShareService.getF002Result(fppojo,tofi));
			} else if("F003".equals(tofi)){
				map.putAll(cbcShareService.getF003Result(fppojo,tofi));
			} else if("F004".equals(tofi)){
				map.putAll(cbcShareService.getF004Result(fppojo,tofi));
				
			} else if("F005".equals(tofi)){
				Map<String ,FrontPagePojo> f005Map = cbcShareService.getF006Result(fppojo,tofi);
				map.putAll(f005Map);
				map.putAll(cbcShareService.getF003Result(f005Map.get(tofi),"F003"));//豁免
				
			} else if("F006".equals(tofi)){
				Map<String ,FrontPagePojo> f006Map = cbcShareService.getF006Result(fppojo,tofi);
				map.putAll(f006Map);
				map.putAll(cbcShareService.getF003Result(f006Map.get(tofi),"F003a"));//豁免
				
			} else if("F007".equals(tofi)){
				map.putAll(cbcShareService.getF007Result(fppojo,tofi));
			} else if("F008".equals(tofi)){
				map.putAll(cbcShareService.getF008Result(fppojo,tofi));
				
			} else if("F009".equals(tofi)){
				map.putAll(cbcShareService.getF009Result(fppojo,tofi));
			} else if("F010".equals(tofi)){
				map.putAll(cbcShareService.getF010Result(fppojo,tofi));
			} else if("F011".equals(tofi)){
				map.putAll(cbcShareService.getF011Result(fppojo,tofi));
			}	
		}
		
		j.setObj(map);
		j.setSuccess(true);
//		try {
//			response.setContentType("application/json, text/javascript");
//			response.getWriter().write(j.getJsonStr());
//			response.getWriter().flush();
//			response.getWriter().close();
//			
//		} catch (IOException e) {
//			e.printStackTrace();
//		}
		return j;
	}