ajax 實現異步刷新 簡單例子

前端頁面

（這裏注意了，一般是在table外面套一個div，設置id，當處理好傳過來的數據之後，清空原來的div裏面的所有佈置）

<div id = "dy_change">
    <table>
        <tr>
            <!-- th爲表格標題欄-->
            <th>商品圖片</th>
            <th>商品名稱</th>
            <th>商品單價</th>
            <th>購買數量</th>
            <th>合計價格</th>
            <th>操作</th>
        </tr>

    <c:forEach var = "data" items = "${list}">
            <tr>
                <td>
                    <img src = "static/img/${data.picture}" width="80px" height="80px" />
                </td>

                <td>
                    ${data.sname}
                </td>

                <td>
                    ${data.price}元
                </td>

                <td>
                    ${data.number}
                </td>

                <td>
                    ${data.sum_price}元
                </td>

                <td>
                    <button class="btn btn-primary btn-sm" onclick="upd()">修改</button>
                    <button class="btn btn-primary btn-sm" onclick="del(${data.id})">刪除</button>
                </td>

            </tr>
        </c:forEach>
    </table>
</div>

後端數據傳入

    @RequestMapping( path = "/del_change" , produces="text/html;charset=UTF-8" )//解決json中文亂碼問題
    @ResponseBody
    public String del_change( String  id ){

        //System.out.println( test + test2 );

        //System.out.println( id );
        //將選中的信息進行刪除
        GouwucheDaoImpl.GetInstance().deleteGouwu( Integer.parseInt( id ) );

        //將刪除後的商品重新在頁面展示
        List<Gouwuche> list = GouwucheDaoImpl.GetInstance().findAll();

        System.out.println( "此時還有" + list.size() +"條信息");
        StringBuffer buffer = new StringBuffer();
        buffer.append("[");

        for( Gouwuche gouwuche : list ){
            buffer
                    .append("{'picture':'").append( gouwuche.getPicture() ).append("',")
                    .append("'sname':'").append( gouwuche.getSname() ).append("',")
                    .append("'price':'").append( gouwuche.getPrice() ).append("',")
                    .append("'number':'").append( gouwuche.getNumber() ).append("',")
                    .append("'id':'").append( gouwuche.getId() ).append("',")
                    .append("'sum_price':'").append( gouwuche.getSum_price() ).append("'},");
            //System.out.println( gouwuche );
        }
        //去掉最後一個標點逗號
        buffer.deleteCharAt(buffer.length() - 1);
        buffer.append("]");

        //當沒有數據的時候
        if( buffer.length() < 3 ){
            buffer.deleteCharAt(buffer.length() - 1);
            buffer.append("[]");
        }

        System.out.println( buffer.toString() );

        return buffer.toString();
    }

js + ajax實現異步刷新

注意點：

    （1）實現異步刷新之前，清空（ $().empty()  ）原來有的佈置。

    （2）拼接好將要佈置的內容，然後佈置（ $().html() ）。這裏好像使用追加（append）容易破壞佈局，所以一次性佈置。

        function del(id) {
            $.ajax({
                type : 'get',
                url : 'del_change',
                data: {"id":id},
                traditional : true,
                timeout : 1000,
                async : true,
                dataType: 'text',
                success : function( data ){//成功的事件
                    //測試傳過來的數據
                    //alert( data );
                    data = eval('(' + data + ')');
                    //表示單引號
                    var y = '"';
                    //表示斜杆
                    var x = '/';
                    var j = '>';

                    //用作圖片路徑
                    var pre_picture = "static";

                    //修改按鈕左邊組成
                    var button_upd_left = "<button" + " class = " + y + "btn btn-primary btn-sm" + y + " onclick=" + y + "upd(";
                    //右邊組成
                    var button_upd_right = ")" + y + ">" + "修改" + "</button>";

                    //刪除按鈕左邊組成
                    var button_del_left = "<button" + " class = " + y + "btn btn-primary btn-sm" + y + " onclick=" + y + "del(";
                    //右邊組成
                    var button_del_right = ")" + y + ">" + "刪除" + "</button>";


                    // 一次性添加所有元素
                    var str = " ";

                    var table_pre = "<table>" + "<tbody>"
                        + "<tr>" + "<th>" + "商品圖片" + "</th>"
                        + "<th>" + "商品名稱" + "</th>"
                        + "<th>" + "商品單價" + "</th>"
                        + "<th>" + "商品數量" + "</th>"
                        + "<th>" + "合計價格" + "</th>"
                        + "<th>" + "操作" + "</th>" + "</tr>";

                    str += table_pre;

                    var list;
                    //通過數量來檢測json的問題
                    //alert(data.length);
                    for( var i = 0 ; i < data.length  ; i ++ ){
                        list = "<tr>"
                        + "<td>" +"<img src = " + y + "static/img/" + data[i].picture + y + " width=" + y + "80px" + y + " height=" + y + "80px" + y + " " + x + j + "</td>"
                        + "<td>" + data[i].sname + "</td>"
                        + "<td>" + data[i].price + "元" + "</td>"
                        + "<td>" + data[i].number + "</td>"
                        + "<td>" + data[i].sum_price + "元" + "</td>"
                        + "<td>" + button_upd_left + button_upd_right +
                        button_del_left + data[i].id + button_del_right + "</td>" +
                        "</tr>";

                        //添加上每一條信息
                        str +=list;
                    }
                    //清空div裏面的元素
                    $('#dy_change').empty();

                    str += "</tbody>" + "</table>";

                    $('#dy_change').html( str );
                    alert("刪除成功!");
                }
            });
        }