700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 初学AJAX异步提交获取JSON类型数据

初学AJAX异步提交获取JSON类型数据

时间:2021-11-28 05:44:40

相关推荐

初学AJAX异步提交获取JSON类型数据

当遇到校验数据库中是否存在已有记录这种需求时,需要先用AJAX提交后台ACTION 判断是否数据库中存在记录,通过返回JSON型数据,在前台接收,输出结果:比如拿登录用户举例:<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>首先定义好全局路径form表单中的登录按钮type="button" 手动进行提交, 加上onclick事件οnclick="login.submit();"在用户名框附近可以写上错误块,定义一个message属性来传递错误信息:<div id="errmsg" class="errorBox" style='display:none;'><span id="err_id"></span><s:property value="getText(message)" escape="false" /></div>(表单中是不需要写action和onsubmit()的)关联login和login_Funcvar login = new login_Func();在JS中定义好loginFunc这个方法var login_Func=function(){}login_Func.prototype.submit=function(){此处可以加上用户名 密码是否为空的校验如var usernameVar = document.getElementById('username').value;或 =$('#username').val();可以参照:if( $('#username').val() == '' ){$('#errmsg').css({'display':''});$('#err_id').html('<s:property value="getText('login.userName.null')" />');return false;}else if($('#password').val() == '' ){$('#errmsg').css({'display':''});$('#err_id').html('<s:property value="getText('login.passWord.null')" />');return false;}假设JSON出参有两个KEY 那么就先设两个变量来接这两个KEY,一个成功,一个失败var submitFlag = null;var errorFlag = null;需要把界面的用户名和密码封装成JSON参数,采用POST方式传递值var userParam = {"user.username":$("#username").val(),"user.password":$("#password").val()};其中user.username表示后台可以通过user.getUsername()的方式来获取其值,如果参数为username的话,则后台的user则为null....如果想alert userParam的数据方法,可以看上一篇文章 。定义ajax$.ajax({url:'validate.shtml',//先走校验的actioncache:false,//拒绝缓存async:false,//异步提交type:'post',data:userParam,dataType:'json',success:function(data){submitFlag = data.SUBMIT_FLAG;//如果采用此种方式获得后台的SUBMIT_FLAG, GOOGLE浏览器没问题, 火狐没问题,IE6是有问题的,他不认的SUBMIT_FLAG是什么errorMessage = data.ERROR_MESSAGE;//所以采用下面的方法获得json数据//retdata存储value//pro存储keyvar retdata = eval("("+data+")");for (var pro in retdata) {if(pro=="SUBMIT_FLAG"){alert(retdata[pro]);}else if(pro=="FAILURE_FLAG"){alert(retdata[pro]);return;}/*if(retdata[pro]=="SUBMIT_FLAG"){alert("保存成功!");}else if(retdata[pro]=="FAILURE_FLAG"){alert("角色名已存在!");}*/}//或者用这种方式 显示更友好if(pro=="SUBMIT_FLAG"){提交操作,见下}else if(失败的key){$('#errmsg').css({'display':''});$("#err_id").html("");if(pro==失败的key){$("#err_id").append("用户不存在");}else if(pro==失败的key){$("#err_id").append("密码错误");}}}});if ('undefined' != submitFlag && null != submitFlag && 'true' == submitFlag) {document.getElementById("loginForm").action='<%=basePath%>'+"login.shtml";//成功则提交login document.getElementById("loginForm").submit();} else {}}后台:HttpServletResponse response = ServletActionContext.getResponse();response.setContentType("text/html;charset=utf-8");response.setHeader("Pragma","No-cache");response.setHeader("Cache-Control","no-cache");response.setHeader("Cache-Control", "no-store");PrintWriter writer = response.getWriter();JSONObject json = new JSONObject();校验操作 成功json.put("SUBMIT_FLAG","保存成功!");失败 json.put("FAILURE_FLAG", "用户名已存在!");writer.write(json.toString());writer.flush();writer.close();struts2中 返回json类型:<result type="json">

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。