Jquery+ajax实现局部刷新案例！

Struts2+String+MyBatis框架，使用Jquery的ajax怎么实现部分刷新，前台怎么传值，后台怎么把结果返回给前台页面！网上搜的不要贴了。。。... Struts2+String+MyBatis框架，使用Jquery的ajax怎么实现部分刷新，前台怎么传值，后台怎么把结果返回给前台页面！网上搜的不要贴了。。。展开

 我来答

3个回答

#合辑# 面试问优缺点怎么回答最加分？

小宙
推荐于2017-10-06 · TA获得超过139个赞

知道答主

回答量：66

采纳率：0%

帮助的人：41.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方法会就可以了。

已赞过 已踩过<

评论收起

老弓250
2014-03-11

知道答主

回答量：41

采纳率：0%

帮助的人：16.9万

我也去答题访问个人页

关注

展开全部

首先在jsp中导入jQuery，之后调用函数，传到后台，它可以返回对象或者json格式的数据。你在前台js函数中直接为前台文本框赋值就可以了。

更多追问追答
追问

前台传值，后台怎么把查询的结果返回给前台

前台传值，后台怎么把查询的结果返回给前台
追答

用json存放对象或者直接拼接成字符串前台解析。
追问

给出具体json代码
追答

一 在项目中导入json包，自己网上下载。

二 看一下这个http://blog.csdn.net/tsyj810883979/article/details/8633786。

已赞过 已踩过<

评论收起

_sqa
2014-03-11 · 贡献了超过121个回答

知道答主

回答量：121

采纳率：100%

帮助的人：17.2万

我也去答题访问个人页

关注

展开全部

$.post("user!updataBMapList.do", {
"mapListOv.id" : ThisBMapListId,
"mapListOv.mid" : ThisMarkerId
}, function(data) {
$("div").html(data);
});

已赞过 已踩过<

评论收起

更多回答（1）

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

Jquery+ajax实现局部刷新案例！

其他类似问题

为你推荐：