设为首页 加入收藏

TOP

71、django之Ajax续(一)
2017-11-15 09:15:17 】 浏览:14
Tags:django Ajax

接上篇随笔。继续介绍ajax的使用。

上篇友情连接:http://www.cnblogs.com/liluning/p/7831169.html

 

本篇导航:

 

一、Ajax响应参数

上篇最后介绍了ajax的请求参数现在补充一个响应参数

dataType:  
预期服务器返回的数据类型,服务器端返回的数据会根据这个值解析后,传递给回调函数。 默认不需要显性指定这个属性,
ajax会根据服务器返回的content Type来进行转换; 比如我们的服务器响应的content Type为json格式,这时ajax
方法就会对响应的内容进行一个json格式的转换,if转换成功,我们在success的回调函数里就会得到一个json格式的对
象;转换失败就会触发error这个回调函数。如果我们明确地指定目标类型,就可以使用 data Type。dataType的可用
值:html|xml|json|text|script

简单说就是告诉服务器需要返回什么数据类型


 

二、csrf 跨站请求伪造

我们之前用form表单POST提交时如果没有{% csrf_token %}客户端收不到数据会报错同样用ajax POST提交数据也有同样的错误那么准么解决呢?

1、方法一

$.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});

$.ajax({
   ... 
})

缺点:当js与html文件分离时,{{ csrf_token }} 无法被渲染失去作用,用方法一必须将js和html写在一起

2、方法二

{% csrf_token %}

$.ajax({
    url:"",
    type:"POST",
    data:{
        csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),  
    }
})

缺点:html body标签中必须存在{% csrf_token %}

3、方法三

//<script src="{% static 'js/jquery.cookie.js' %}"></script> 需要下载对应文件
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

$.ajax({
    headers:{"X-CSRFToken":$.cookie('csrftoken')},
})

缺点:基本通用哈哈哈


 

三、jQuery.serialize()

serialize()函数用于序列化一组表单元素,将表单内容编码为用于提交的字符串serialize()函数常用于将表单内容序列化,以便用于AJAX提交。该函数主要根据用于提交有效表单控件的name和value,将它们拼接为一个可直接用于表单提交的文本字符串,该字符串已经过标准的URL编码处理(字符集编码为UTF-8)。该函数不会序列化不需要提交的表单控件,这和常规的表单提交行为是一致的。例如:不在<form>标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交。

简单总结:就是说我们如果有很多input标签内容需要提交总不会全部写在data中罗列出来吧,这就用到serialize()函数了可以帮我们一次性提交数据到客户端。

例如:

<form name="myForm" action="http://www.365mini.com" method="post">
    <input name="uid" type="hidden" value="1" />
    <input name="username" type="text" value="张三" />
    <input name="password" type="text" value="123456" />
    <select name="grade" id="grade">
        <option value="1">一年级</option>
        <option value="2">二年级</option>
        <option value="3" selected="selected">三年级</option>
        <option value="4">四年级</option>
        <option value="5">五年级</option>
        <option value="6">六年级</option>
    </select>
    <input name="sex" type="radio" checked="checked" value="1" /><input name="sex" type="radio" value="0" /><input name="hobby" type="checkbox" checked="checked" value="1" />游泳
    <input name="hobby" type="checkbox" checked="checked" value="2" />跑步
    <input name="hobby" type="checkbox" value="3" />羽毛球
    <input name="btn" id="btn" type="button" value="点击" />
</form>
提交数据

对<form>元素进行序列化可以直接序列化其内部

首页 上一页 1 2 3 下一页 尾页 1/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇数据结构--栈的应用 下一篇学习笔记TF067:TensorFlow Servin..

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容:

最新文章

热门文章

C 语言

C++基础

windows编程基础

linux编程基础

C/C++面试题目