JavaScript：Ajax在Django中的应用、jquery事件绑定、jquery事件委托、serialize、serializeArray获取form的输入值

程序员文章站 2022-05-06 07:57:57

...

一、初识Ajax

Ajax是属于javaScript的一种方法，简单明了的说，其功能就是在实现Web页面不刷新的情况下，向后台发起请求，进而更新Web页面部分数据。

1.1 什么时候适合使用Ajax向后台发送请求喃？下面我们就列举一下：

a.对话框方式：1.数据量小或条目少；2.【新增】功能、【编辑/更新】功能、【删除】功能；

需要注意的是：a.模态对话框基础；b.table中td统一自定义属性，而且尽量与新增、更新编辑对话框的标签属性一样，同时与数据库字段一样；c.列表可在当前页刷新的情况（避过分页、排序……）；

b.登录场景一般也可使用Ajax

1.2 什么时候使用新URL方式请求后台？简单归类：1.独立的页面；2.数据量大或条目多；

二、Ajax的基本格式

$.ajax({
    url:"/xxxx/",     #路径

    type:"POST",      #请求方式：POST或者GET

    data：{'key1':'value1','key2':'value2',……}， #请求数据，必须是dict类型;

    success:function(arg){
        '回调函数，参数arg是String类型'
    }
})

三、Ajax的dataType、traditional字段

上面的格式是基本的Ajax方式格式；疑问：

1.若data中，有参数是“一对多”的情况，即类似于：‘key’:["1","2","3"]，那怎么办？

2.arg作为返回的全部的值，是String类型（注：django的httpresponse返回值也必须是string类型），如何可以简单的变为数据原来的类型？

$.ajax({
    url:"/xxxx/",     #路径

    type:"POST",      #请求方式：POST或者GET

    data：{'key1':'value1','key2':'value2',……}， #请求数据，必须是dict类型;

    dataType:'JSON',    ##解决返回信息arg为JSON对象(就可以通过关键字调用其值了)，而不是String;

    traditional:true,   ##解决data可以上传类似：‘key’：["1","2","3"]的一对多的情况的数据
    success:function(arg){
        '回调函数，参数arg是String类型'
    }
})

三、jquery的事件绑定

Web页面到处可发生点击事件，所以今天要记录一下事件绑定；事件绑定的基本的模式：

#在引入jquery文件、js插件后：
<script>

    $( function() {

        bindEventname();
        bindEventname1();
        …………
    
    });#页面一加载，就会执行这段事件绑定；

    function bindEventname(){
        $('绑定的元素').click( function(){
            #下面就是click事件之后，要实现的功能；举例：id="addModel"的模态对话框弹出；
            $("#addModal").modal('show');
            })
    }

    function bindEventname1(){
        $('xxx').click(function () {
            …………；
            })
    }
    …………

</script>

四、jquery的事件委托

假如，一个列表有很多行（tr）与很多列（td）;在使用Ajax对列表的行进行增加一行数据时，需要增加这个行所包含的操作事件（如：编辑、删除）；需要重新加载页面最新的这条数据才会实现绑定事件，但是ajax又不刷新页面，造成了最新的这一行数据的操作功能实现不了（因为页面最初加载时，就已经绑定了之前的所有事件，最新加的数据，不会绑定）；所以，这个时候需要事件委托；

事件委托的意思：将列表里面的如编辑、删除这样的点击事件委托在列表（tbody）身上，那么页面最初加载就绑定了tbody身上的事件；即便是ajax更新的最新一行数据，其编辑、删除等事件都在tbody上；事件委托的格式：

jquery3:
$('要绑定标签的上级\上上级……标签，比如：一行的按钮，就可以选择表tbody').on('要绑定的事件','要绑定的标签',function(){………………})

举例：
  $("#stu").on("click",'.edit-row', function () {
                $("#editModal").modal("show");
});
##：'stu'是tbody的id属性值，'edit-row'是列表一行数据的编辑按钮的class


jquery2:
$('要绑定标签的上级标签').delegate('要绑定的标签','要绑定的事件',function(){……
})

五、table列表、'新增'对话框、'编辑'对话框…页面元素属性需要注意点

这个不是什么知识，但是是自己觉得应该记录下来提醒自己的基本点；

1.table列表、'新增'对话框、'编辑'对话框…由于id、name在元素与元素之间不可重复，且很有可能与数据库有关；所以，在添加属性值或变更属性值时，尽量变更class的值，而不是id、name；

2.自定义属性尽量有业务意义；

3.模态对话框的使用应该在bootstrap中可以寻得；如：新增数据后，点击【保存】，模特对话框关闭，关闭后，还应该清除模态对话框里面的元素的值，可在bootstrap寻得；

4.js在页面新增的一行，使用for循环时，一定要将属性与列表数据保持一致；td也应该有自定义属性，方便取值时，使用js在页面获取；（如：删除一行操作，是需要弹框提示的，点击弹框的‘’确认‘’，才真正执行删除；所以需要在table获取到那条数据的id，隐藏在提示框中；编辑也是需要隐藏数据）