如何使用JFinal实现ajax局部刷新

 我来答

4个回答

#热议# 生活中有哪些实用的心理学知识？

星月小木木
2016-01-07 · TA获得超过3.2万个赞

知道大有可为答主

回答量：2.4万

采纳率：0%

帮助的人：1亿

我也去答题访问个人页

关注

展开全部

以新增用户为例，这是jsp部分代码。

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>新增用户</title>
<link rel="stylesheet"
href="${pageContext.request.contextPath}/common/css/plantform/common.css"
type="text/css" />
<script type="text/javascript"
src="${pageContext.request.contextPath}/common/js/jquery-1.7.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/common/js/jquery.artDialog.js?skin=blue"
charset="UTF-8"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/common/js/iframeTools.js"
charset="UTF-8"></script>
<link
href="${pageContext.request.contextPath}/common/css/plantform/list.css"
rel="stylesheet" type="text/css" />
<link
href="${pageContext.request.contextPath}/common/css/plantform/index.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">

function getOrgInfo() {
art.dialog.open('./orgnization/show_org_dbselect', {
title : '选择归属地域',
width : 300,
height : 600,
lock : true,
}, false);
}

function doAddUser() {
var orgId = $("#orgId").val(); （通过id获取页面输入的值）
var userName = $('#userName').val();
var loginName = $("#loginName").val();
var password_f = $("#password_f").val();
var password_s = $("#password_s").val();
var userRole = $('#userRole').val();
var phoneNum = $('#phoneNum').val();

if (password_f == null || password_f == '') {
alert('请输入登录密码！');
return false;
}
if (password_s == null || password_s == '') {
alert('请输入确认密码！');
return false;
}
if (password_s != password_f) {
alert('密码不一致，请重新输入！');
return false;
}
if(orgId == null||orgId == ''){
alert('请选择用户所属地域！');
return false;
}
（这边就是ajax局部刷新）
$.ajax({
type : "POST",
url : "../user/do_add_Customer",（要跳转的action）
async : false,
data : {
"userName":userName,
"loginName":loginName,
"password":password_f,
"orgId":orgId,
"userRole":userRole,
"phoneNum":phoneNum
},
success : function(data) { （action处理完后返回的结果，就是局部刷新，页面不跳转）
var obj = eval('('+data+')');
if(obj.RESULT=='ok'){
alert("用户信息设置完成！");
art.dialog.opener.$('#orgId').val(orgId);
art.dialog.close();
}else if(obj.RESULT=='repeatUser'){
alert("用户登录名重复！");
}else{
alert("系统异常！");
}
}
});
}
</script>
</head>
<body>
<input type="hidden" value="" name="orgId" id="orgId" />
<div class="gw_main fh">
<div class="w_input_list fh">
<div class="input_01 w01">用户名</div>
<div class="input_02">
<input type="text" name="userName" id="userName"
class="w13" value="${user.userName}" readonly="readonly"/><font color="red">*</font>
</div>
</div>
<div class="w_input_list fh">
<div class="input_01 w01">登录名</div>
<div class="input_02">
<input type="text" name="loginName" id="loginName"
class="w13" value="${user.loginName}" readonly="readonly"/><font color="red">*</font>
</div>
</div>
<div class="w_input_list fh">
<div class="input_01 w01">登录密码</div>
<div class="input_02">
<input type="password" name="password_f" id="password_f"
class="w13" /><font color="red">*</font>
</div>
</div>
<div class="w_input_list fh">
<div class="input_01 w01">确认密码</div>
<div class="input_02">
<input type="password" name="password_s" id="password_s"
class="w13" /><font color="red">*</font>
</div>
</div>
<div class="w_input_list fh">
<div class="input_01 w01">所属地域</div>
<div class="input_02">
<input type="text" name="orgName" id="orgName"
class="w13" value="" readonly="readonly" /><font color="red">*</font>
</div>
<div class="input_02 w06">
<div class="button fh">
<a href="#" class="fl" onClick="getOrgInfo()"><span>选择</span></a>
</div>
</div>
</div>
<div class="w_input_list fh">
<div class="input_01 w01">用户权限</div>
<div class="input_02">
<select name="userRole" id="userRole" style="float:left;height:23px;margin-right:5px;">
<option value="1">一般用户</option>
<option value="2">管理员用户</option>
</select>
</div>
</div>
<div class="w_input_list fh">
<div class="input_01 w01">联系电话</div>
<div class="input_02">
<input type="text" name="phoneNum" id="phoneNum"
class="w13" value="${user.phoneNum }" readonly="readonly"/>
</div>
</div>
<div class="w_footer fh">
<div class="aui_buttons fr">
<button class="aui_state_highlight" type="button" onClick="doAddUser();" >确认</button>
</div>
</div>
</div>
</body>
</html>

action部分jsp部分跳转的action

@Action(value = "do_add_Customer")
public String doAddCustomer(){
init();
JSONObject js = new JSONObject();
//检测系统内是否存在此登录名的账号
try{
List<User> userList = this.userControlService.getUserByLoginName(loginName,user.getId());
if(userList!=null&&userList.size()>0){
js.put("RESULT", REPEATUSER);
}else{
//新增机电用户信息
Integer userId = this.userControlService.addCustomer(userName,loginName,password,orgId,userRole,phoneNum);
if(userId!=null&&userId>0){
js.put("RESULT", OK);
js.put("VALUE", userId);
}else{
js.put("RESULT", SYSERROR);
}
}
}catch (Exception e) {
js.put("RESULT", SYSERROR);
}
Response_Writer.writeObject(js);

return null;
}
这里是将你处理玩的结果通过json的方式返回给jsp页面，页面在处理。如有问题可以再询问。要想局部刷新ajax方法会就可以了。

已赞过 已踩过<

评论收起

扑火的飞蛾06
2016-03-22 · TA获得超过1156个赞

知道小有建树答主

回答量：1895

采纳率：62%

帮助的人：280万

我也去答题访问个人页

关注

展开全部

ajax实现局部刷新可以使用jquery。

操作步骤如下：

页面引入jquery.js。
编写ajax的方法（示例见下）。
服务端写好接口。
打开页面，即可实现ajax无刷新页面。

ajax示例：

$.ajax({

url : '',

type : 'post',

dataType : 'json',

success : function(){

error : function(){

}

})

已赞过 已踩过<

评论收起

yang8363411
2017-05-03

知道答主

回答量：19

采纳率：0%

帮助的人：1.7万

我也去答题访问个人页

关注

展开全部

JFinal是个后台框架，你是要刷新前台页面？是的话代码如下：

<a href="javascript:location.replace(location.href);" title="刷新" >

本回答被网友采纳

已赞过 已踩过<

评论收起

纸鸢视频
2016-04-23 · 超过29用户采纳过TA的回答

知道答主

回答量：162

采纳率：0%

帮助的人：50万

我也去答题访问个人页

关注

展开全部

可以使用Pjax,我有Demo, Pjax是专注于局部刷新的ajax插件

已赞过 已踩过<

评论收起

更多回答（2）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

如何使用JFinal实现ajax局部刷新

其他类似问题

为你推荐：