django(4)、Ajax异步提交表单

JSON简介

javascript object notation，基于javascript语言的轻量级数据交换格式。在JSON出现之前，大家一直用XML来传递数据。因为XML是一种纯文本格式，所以它适合在网络上交换数据。XML本身不算复杂，但是，加上DTD、XSD、XPath、XSLT等一大堆复杂的规范以后，任何正常的软件开发人员碰到XML都会感觉头大了，最后大家发现，即使你努力钻研几个月，也未必搞得清楚XML的规范。
作用：可靠性传递数据，且不改变其类型，例如字典和列表。
字符集必须是UTF-8
为了统一解析，JSON的字符串规定必须用双引号""，Object的键也必须用双引号""
把任何JavaScript对象变成JSON，就是把这个对象序列化成一个JSON格式的字符串，这样才能够通过网络传递给其他计算机；如果我们收到一个JSON格式的字符串，只需要把它反序列化成一个JavaScript对象，就可以在JavaScript中直接使用这个对象了。

数据类型

number：和JavaScript的number完全一致；
boolean：就是JavaScript的 true 或 false；
string：就是JavaScript的 string；
null：就是JavaScript的 null
array：就是JavaScript的 Array 表示方式 []；
object：就是JavaScript的{k:v,}表示方式。

JSON对象格式

1、{key:value, ...}：key是字符串,value可以为所有类型;
2、[{k1:v1}, {k2:v2}, ...]

易混淆概念

字符串：双引号或单引号包括的字符
json字符串：符合json格式的字符串
json对象：指符号json要求的js对象．

Ajax

作用：通过js或者jquery在当前页面操作标签以获取需要的数据并拼接成json对象将提交到后台。
特点：
- 异步传输：不会阻塞进程
- 局部刷新：不会刷新整个页面

Jquery实现Ajax收发数据

常规方法

1、手动构建data参数，包括跨域请求csrf键值对；
2、只能传输简单的数据，不能传输文件，传输到后台的是文件的路径。

<body>
<form method="post" novalidate enctype="multipart/form-data">
    <label for="id_username">用户名</label><input type="text" id="id_username" name="username"><br>
    <label for="id_password">密  码</label><input type="password" id="id_password" name="pwd"><br>
    <input type="button" value="提交" id="submit_btn">
    {% csrf_token %}
</form>
</body>

<script>
$('#submit_btn').click(function () {
    $.ajax({
       url:'',
       type:"POST",
       // 若存在form验证，data内key名称必须和forms中字段名一致
       data: {'username':$('#id_username').val(),
            'pwd': $("#id_password").val(), 
            "csrfmiddlewaretoken":$('[name="csrfmiddlewaretoken"]').val()
       },
       success:function (data) {
               alert(data)
           }
    })
});

</script>

serialize

直接将form标签序列化：data: $('.post_form').serialize(),
操作相对更简单，同样不能传递文件。

<script>
$('#submit_btn').click(function () {
    $.ajax({
       url:'',
       type:"POST",
       data: $('#post_form').serialize(),
       success:function (data) {
               alert(data)
           }
    })
});
</script>

formdata

最大优点是可以传输文件

// 方法1：手动填充form
$('#submit_btn').click(function () {
     var form = new FormData();
      form.append("username",$('#id_username').val());
      form.append("password",$('#id_password').val());
      form.append('csrfmiddlewaretoken', $('[name="csrfmiddlewaretoken"]').val());
      
      # 文件传输;
      form.append('file',$('#upload_file')[0].files[0]);
      
     $.ajax({
         url: '/login.html/',
         type: 'post',
         data: form,
         processData: false,
         contentType:false,
         success: function (data) {
         }
     })
 });
            


// 方法2：自动填充form
$('#submit_btn').click(function () {
    var form = new FormData($('#login_form')[0]); // 注意,必须传入DOM对象
    
    $.ajax({
     url: '/login.html/',
     type: 'post',
     data: form,
     processData: false,
     contentType:false,
     success: function (data) {
        alert(data)
     }
    
     })
});

django(4)、Ajax异步提交表单

JSON简介

数据类型

JSON对象格式

易混淆概念

Ajax

Jquery实现Ajax收发数据

常规方法

serialize

formdata

猜你喜欢