struts2 ajax json jquery局部刷新问题
问题是这样的:我在页面上新增一个账户后 实现下面这个块的局部刷新 具体刷新内容是那个迭代器里的li<div id="left_content">
<ul id="expmenu-freebie">
<li>
<ul class="expmenu">
<s:iterator value="listaccount" var="account">
<li id="${AccountName}" onclick="showcontent(this.id)">
<div class="header">
<span class="label" style="background-image: url(images/messages.png);">${AccountName}</span>
<span class="arrow down"></span>
</div>
<ul class="menu" style="display:none;">
<li>账户余额:${Balance}</li>
<li class="selected">账户总收入:${sumrevenue }</li>
<li>账户总支出:${sumpay }</li>
</ul>
</li>
</s:iterator>
<li onclick="showAccountMan()">
<div class="header">
<span class="label" style="background-image: url(images/search.png);">账户管理</span>
</div>
</li>
</ul>
<!-- End Freebie -->
</li>
</ul>
</div>
然后下面这个script里success: function(responseResult){}里面怎么写???
<script>--------------------编程问答-------------------- 你把这块写在一个jsp里:
function addAccount()
{
var str1="";
var str2="";
str1=$("#addAccount input[Name='Account'] ").val();
str2=$("#addAccount input[Name='balance'] ").val();
/* alert(str1);
alert(str2); */
$.ajax({
url: "addAccount2",
type: 'post',
data:{
"Account":str1,
"banlance":str2
},
dataType:'json',
timeout: 10000,
error: function(){
alert('网络错误!稍后再试!');
},
success: function(responseResult){
/* $("#list_table_tbody tr").remove(); */
/* $("#left_content ").empty();
$(responseResult.table).each(function(){
$("#left_content").append("");
}); */
},
});
}
</script>
比如:
a.jsp
<ul id="expmenu-freebie">
<li>
<ul class="expmenu">
<s:iterator value="listaccount" var="account">
<li id="${AccountName}" onclick="showcontent(this.id)">
<div class="header">
<span class="label" style="background-image: url(images/messages.png);">${AccountName}</span>
<span class="arrow down"></span>
</div>
<ul class="menu" style="display:none;">
<li>账户余额:${Balance}</li>
<li class="selected">账户总收入:${sumrevenue }</li>
<li>账户总支出:${sumpay }</li>
</ul>
</li>
</s:iterator>
<li onclick="showAccountMan()">
<div class="header">
<span class="label" style="background-image: url(images/search.png);">账户管理</span>
</div>
</li>
</ul>
<!-- End Freebie -->
</li>
</ul>
ajax请求返回用html
$.ajax({
url: "addAccount2",
type: 'post',
data:{
"Account":str1,
"banlance":str2
},
dataType:'html',
timeout: 10000,
error: function(){
alert('网络错误!稍后再试!');
},
success: function(responseResult){
$("#left_content").html(responseResult);
/* $("#list_table_tbody tr").remove(); */
/* $("#left_content ").empty();
$(responseResult.table).each(function(){
$("#left_content").append("");
}); */
},
});
你后台的ajax请求的返回结果就返回到a.jsp。
然后left_content里面替换result的html就行了:
$("#left_content").html(responseResult); --------------------编程问答-------------------- 直接在success 里拼装你需要的格式数据。 --------------------编程问答-------------------- action里把取到的数据(list)转换成JSON,success函数里循环读取json的数据,循环的时候组织成正确的html标签,然后添加到某个div/ul里面。 --------------------编程问答-------------------- 局部刷新 有2种方式咯
代码太多我就不写,给思路吧
第一种就是版主说的,返回一个页面对象
你前台接收的就是页面对象 然后在div里面加载就行了
第二种就是用json拼
个人建议第一种
很简单
不过局部刷新这种方式一般不建议用太多 难控制
补充:Java , Java EE