WEB中AJAX实例
本文仅仅是个人喜欢用的一种AJAX方式,个人感觉简单易懂,项目基于SSI框架。本例中没有导入该代码依赖的类,因为没有引入第三方JAR包,把代码拷到myeclipse中,提示你缺少什么类,你就导入什么类就行了。
从前往后代码如下:
本例是当用户在输入框中输入值的时候实时去后台数据库中查询相关信息
使用到的插件或者JS文件如下:
jquery-1.8.3.min.js
jquery.artDialog.js //弹窗插件
iframeTools.source.js //弹窗插件
1.前台代码:
$("#dls_id").on("keyup",function(){var dls_id = $("#dls_id").val();if(dls_id == ''){//输入的值为空,则返回,不做任何处理return false;}$.ajax({url:'ajaxOtmQueryDlsInfo.action', //后台查询的ACTIONtype:'post',//POST方式传递参数从前端到后台dataType:'json',//数据类型为JSONdata:{'dls_id':dls_id},//传输的数据success:function(res){if(res.success==0){//后台代码处理成功你的业务逻辑代码//这里是给ID为"dls_name"的输入框赋值//该值来自于后台的查询结果$("#dls_name").html(res.dlsName);}else{//后台代码执行异常了你的业务逻辑代码//这里是选择把后台异常信息以弹窗的形式展示给用户art.dialog.alert(res.msg);}},error:function(){//这里是AJAX发生错误的处理代码art.dialog.alert("系统异常!",'error');}});
});
2.后台代码如下:
/*** 输入代理商ID查找代理商信息* @return* @throws Exception*/public String ajaxOtmQueryDlsInfo() throws Exception{log.info("进入ajaxOtmQueryDlsInfo");BasOtmBean bean = new BasOtmBean();String result = null;try{//获取代理商IDbean.setDlsId(request.getParameter("dls_id"));//这里是接口具体的实现类,用来执行真正的业务逻辑,返回了一个JSON数据的toString()之后的字符串(具体内容见下图)result = basOtmService.ajaxOtmQueryDlsInfo(bean);}catch (BaseException e) {log.info(e.getLocalizedMessage());result ="{\"error\":\"-1\",\"msg\":\""+e.getLocalizedMessage()+"\"}";}catch (Exception e) {log.error(e.getMessage(),e);result="{\"error\":\"-1\",\"msg\":\""+Constants.SYS_FAIL_MSG+"\"}";}finally{log.info("离开ajaxOtmQueryDlsInfo");}this.writerToClient(result);//该方法用于向页面返回处理结果(也可以用于HTTP接口向对方返回处理结果,代码见下方)return null;}
writerToClient(result)方法:
protected void writerToClient(String context) {response.setContentType("text/html; charset=UTF-8");PrintWriter out = null;try {out = response.getWriter();log.info("Ajax输出数据: " + context);out.write(context);} catch (IOException e) {log.info("ajax输出错误,请重新再试!");}finally{if(out != null){out.flush();out.close();}}}
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
