当前位置:编程学习 > JAVA >>

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>
    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>
--------------------编程问答-------------------- 你把这块写在一个jsp里:
比如:
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
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,