JFinal中前台用Ajax实现表单提交,后台用renderJson传数据(二)

时间:2022-01-31 19:22:17

1.代码业务:页面填写用户名和书号,提交,显示借阅结果,如果借阅不成功显示不成功原因,如果成功,显示借阅信息(读者号,书号,借书日期,应还日期)

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();
}
}