django建立管理系统之五----单页ajax数据交互

ajax数据提交:

需求:

1. 点击ajax方式提交后数据提交到后台数据库,并且在前台实现数据更新

a.可以用刷新页面来实现数据页面的更新

对应的html,实现局部刷新（可以用刷新页面实现,例如

$(function(){

     refresh();

});

//点击按钮调用的方法

function refresh(){

    window.location.reload();//刷新当前页面.

}

）

b.也可以使用js网页拼凑方法来实现页面局部刷新

model页面如下:

model html:

<div class="model hide">
    <form method="post" action="/classes.html" >
        <input name="id" type="text" class="hide" />
        <input name="caption" type="text" placeholder="确定" />
        <input id="id_modal_cancel" type="button" value="取消"/>
        <input type="submit" value="Submit"/>
        <input type="button" id="modal_ajax_submit" value="Ajax方式提交"/>
    </form>
</div>

table：

table html:

{% for item in cls_list %}
    <tr>
        <td alex="id">{{ item.id }}</td>
        <td alex="caption">{{ item.caption }}</td>
        <td><a class="td-edit">编辑</a>| <a target="_blank" href="/edit_classes.html?nid={{ item.id }}">跳转编辑</a> | <a class="td-delete">删除</a></td>
    </tr>
{% endfor %}

-------------------

js开始拼凑：

要拼凑的格式:

/*
<tr>
    <td>{{ item.id }}</td>
    <td>{{ item.caption }}</td>
    <td>
        <a class="td-edit">编辑</a> | <a class="td-delete">删除</a>

    </td>
</tr>
*/
开始拼凑:

function bindSubmitModal() {
    $('#modal_ajax_submit').click(function () {
        var nid = $('.modal input[name="id"]').val();
        var value = $('.modal input[name="caption"]').val();
        $.ajax({
            url: SUBMIT_URL,
            type: 'POST',
            data: {caption: value,id: nid},
            dataType: "JSON",
            success: function (rep) {
                //data = JSON.parse(data);
                if(!rep.status){
                    alert(rep.error);
                }else{
                    // location.reload();
                    // 通过js在table表格最后追加一行数据，追加的数据就是当前增加的数据
                    /*
                    <tr>
                        <td>{{ item.id }}</td>
                        <td>{{ item.caption }}</td>
                        <td>
                            <a class="td-edit">编辑</a> | <a class="td-delete">删除</a>

                        </td>
                    </tr>
                    */
                    var tr = document.createElement('tr');
                    var td1 = document.createElement('td');
                    // td1ID
                    td1.innerHTML = rep.data.id;
                    var td2 = document.createElement('td');
                    // td2标题
                    td2.innerHTML = rep.data.caption;
                    var td3 = document.createElement('td');
                    td3.innerText = "|";
                    var a1 = document.createElement('a');
                    a1.innerHTML = "编辑";
　　　　　　　　　　　　a1.className = "td-edit"

                    var a2 = document.createElement('a');
                    a2.className = "td-delete";
                    a2.innerHTML = "删除";
                    $(td3).prepend(a1);
                    $(td3).append(a2);
                    $(tr).append(td1);
                    $(tr).append(td2);
                    $(tr).append(td3);
                    $('table tbody').append(tr);
                    $('.modal,.shade').addClass('hide');
                }
            }
        })

    })
}
--------------------------------事件委托------------------------
-----新创建的元素没有绑定js，因为js早已经载入完毕，这是可以通过事件委托给他绑定:

function  bindTdEditEvent() {
     /*
     $('td .td-delete').click(function () {
         $('.remove,.shade').removeClass('hide');
     })
     */
     $('tbody').on('click', '.td-edit', function () {
         $('.model,.shadow').removeClass('hide');
         SUBMIT_URL = "/up_classes.html";
         /*
         var tds = $(this).parent().prevAll();
         $('.modal input[name="caption"]').val(tds[0].innerText);
         $('.modal input[name="id"]').val(tds[1].innerText);
         */
         $(this).parent().prevAll().each(function () {
             var text = $(this).text();
             var name = $(this).attr('alex');
             $('.model input[name="' + name +'"]').val(text);
         })

     })
 }



----------------------------------------------------

分页实现（自定义，非插件）
---------------------------------------------------