Jquery+ajax实现局部刷新案例！
Struts2+String+MyBatis框架，使用Jquery的ajax怎么实现部分刷新，前台怎么传值，后台怎么把结果返回给前台页面！网上搜的不要贴了。。。...
Struts2+String+MyBatis框架，使用Jquery的ajax怎么实现部分刷新，前台怎么传值，后台怎么把结果返回给前台页面！网上搜的不要贴了。。。
展开
3个回答
展开全部
以新增用户为例，这是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方法会就可以了。
<%@ 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方法会就可以了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
网易云信
2023-12-06 广告
很高兴能回答您的问题。以下是一段针对“一对一消息组件”的描述，字数在200字左右：该组件支持用户之间的私密交流，让沟通更加直接和高效。通过它，您可以向特定对象发送消息，并实时查看消息状态，包括对方是否已读或未读。同时，该组件还支持富文本消息...
点击进入详情页
本回答由网易云信提供
展开全部
首先在jsp中导入jQuery，之后调用函数，传到后台，它可以返回对象或者json格式的数据。你在前台js函数中直接为前台文本框赋值就可以了。
更多追问追答
追问
前台传值，后台怎么把查询的结果返回给前台
前台传值，后台怎么把查询的结果返回给前台
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$.post("user!updataBMapList.do", {
"mapListOv.id" : ThisBMapListId,
"mapListOv.mid" : ThisMarkerId
}, function(data) {
$("div").html(data);
});
"mapListOv.id" : ThisBMapListId,
"mapListOv.mid" : ThisMarkerId
}, function(data) {
$("div").html(data);
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
