JFinal中前台用Ajax实现表单提交,后台用renderJson传数据(二)
2015-06-08 14:33
615 查看
1.代码业务:页面填写用户名和书号,提交,显示借阅结果,如果借阅不成功显示不成功原因,如果成功,显示借阅信息(读者号,书号,借书日期,应还日期)
2.JFinal环境中,我在html页面用Ajax实现表单提交,传给Controller方法,借阅的过程是用的存储过程borrow写的。
3.ajax传表单后台返回的数据必须是json格式的。
4.JFinal从后台传json格式很方便,可以将list或String数据setAttr()然后使用renderJson()即可。而前台的数据也不用再次装换格式,直接显示即可。
下面展示html中ajax的代码和controller中处理数据并返回数据的代码。
(1)html中ajax的代码
(2)controller代码
2.JFinal环境中,我在html页面用Ajax实现表单提交,传给Controller方法,借阅的过程是用的存储过程borrow写的。
3.ajax传表单后台返回的数据必须是json格式的。
4.JFinal从后台传json格式很方便,可以将list或String数据setAttr()然后使用renderJson()即可。而前台的数据也不用再次装换格式,直接显示即可。
下面展示html中ajax的代码和controller中处理数据并返回数据的代码。
(1)html中ajax的代码
<script type="text/javascript"> function borrowBook(){ var call_no=document.getElementById("call_no").value; var reader_id=document.getElementById("reader_id").value; $.ajax({ data:{"call_no":call_no,"reader_id":reader_id}, url:"../../borrow/BorrowAjax", type:"post", success:function(data){ var br=data.borrow_returns; var result=data.result; if(result==2) { alert(data.reason); } else{ alert("成功借阅"); $(".info table tbody").empty(); var insertText = "<tr><td>读者号</td><td>图书号 </td> <td>借书日期</td><td>应还日期</td> </tr>"; for(var i=0;i<br.length;i++){ insertText+= "<tr> <td>" + br[i].call_no +"</td>" + "<td>" + br[i].reader_id +"</td>" + "<td>" + br[i].borrow_time + "</td>" + "<td>" + br[i].return_time + "</td></tr>"; } //alert(insertText); $("#showinfo").append(insertText); } } } ); } </script>
(2)controller代码
public void BorrowAjax(){ String call_no=getPara("call_no"); String reader_id=getPara("reader_id"); BorrowService borser=new BorrowService(); String reason=borser.trackBorrowResult(call_no, reader_id); if(reason.equalsIgnoreCase("成功借阅")){ List<Borrow_return> borrowlist=new ArrayList<Borrow_return>(); borrowlist=borser.searchInfo(call_no, reader_id); setAttr("result",1);//如果是1代表借成功 setAttr("borrow_returns",borrowlist); renderJson(); }else{ setAttr("result",2);//如果是2代表没有借成功 setAttr("reason",reason); renderJson(); } }
相关文章推荐
- JavaScript编写连连看
- DataTable转换JSON
- 七牛的管理接口不支持js端发送请求进行管理(设计到跨域问题)
- 使用JSch远程部署flume采集点
- javascript获取页面路径中的参数
- jsp用Ajax提交表单并显示结果(一)
- 移动前端工作的那些事---前端制作篇之javascript篇
- 七牛base64上传(前端js,后端c#)
- json-lib中toBean方式解析JSON串大小写问题
- MAVEN项目中JSP页面使用JSTL标签
- javascript/js 正则表达式格式化金额
- JS过滤url参数中的特殊字符
- js选项卡
- 简单的JavaScript组件化实现
- EntityFramework Model有外键时,Json提示循环引用 解决方法
- JS脚本实现用户登录页面
- 详解JavaScript中的forEach()方法的使用
- 详解JavaScript中的every()方法
- JSP (2)内置对象
- js发送post请求下载文件