菜鸟网络工程师的成长笔记——第14天（2016.08.31)

菜鸟网络工程师的成长笔记——第14天（2016.08.31)

其实感觉Python真的很简单，前端开发，网站开发真的很简单，毕竟很多问题都是很快就能解决的，哪像当初的C++，潜心学那么就，也学不明白。

18.用jQuery获取浏览器当前url

问题类型：前端，jquery

解决状态：已解决

问题描述

最近需要使用ajax向服务器提交数据，那么就需要一个url，硬编码自然不是好的选择，如果能选出浏览器的当前url就好多了。

问题解决

window.local中有一大堆的属性用户获取url相关的数据，[http://blog.unvs.cn/archives/jquery-local-url-param.html]http://blog.unvs.cn/archives/jquery-local-url-param.html)

设置或获取对象指定的文件名或路径。
window.location.pathname
例：http://localhost:8086/topic/index?topicId=361
alert(window.location.pathname); 则输出：/topic/index

设置或获取整个 URL 为字符串。
window.location.href
例：http://localhost:8086/topic/index?topicId=361
alert(window.location.href); 则输出：http://localhost:8086/topic/index?topicId=361

设置或获取与 URL 关联的端口号码。
window.location.port
例：http://localhost:8086/topic/index?topicId=361
alert(window.location.port); 则输出：8086

设置或获取 href 属性中在井号“#”后面的分段。
window.location.hash

设置或获取 location 或 URL 的 hostname 和 port 号码。
window.location.host
例：http://localhost:8086/topic/index?topicId=361
alert(window.location.host); 则输出：http:localhost:8086

设置或获取 href 属性中跟在问号后面的部分。
window.location.search
例：http://localhost:8086/topic/index?topicId=361
alert(window.location.search); 则输出：?topicId=361

window.location
属性 描述
hash 设置或获取 href 属性中在井号“#”后面的分段。
host 设置或获取 location 或 URL 的 hostname 和 port 号码。
hostname 设置或获取 location 或 URL 的主机名称部分。
href 设置或获取整个 URL 为字符串。
pathname 设置或获取对象指定的文件名或路径。
port 设置或获取与 URL 关联的端口号码。
protocol 设置或获取 URL 的协议部分。
search 设置或获取 href 属性中跟在问号后面的部分。

19. ajax发送数据时通过django的csrf验证

问题类型：django，ajax

解决状态：已解决

问题描述

django自带防御csrf攻击的功能，当需要POST数据时，就需要通过这个。之前普通表单比较简单，在表单处添加{% csrf_token %}即可。但是ajax不能这样。

问题解决

解决的一个方法是将csrfmiddlewaretoken: ‘{{ csrf_token }}’放到POST的数据中：

url = window.location.href;
argu = {csrfmiddlewaretoken: '{{ csrf_token }}', "time": new Date() };
$.post(url, argu);

这样带上这组键值对，就可以通过csrf认证了。

django的视图函数读取ajax发送过来的数据：

if request.method == 'POST' and request.is_ajax():
    print(request.POST.get('time'))

其实request.POST是一个Python字典。

20. javascript操作json对象

问题类型：前端，javascript

解决状态：已解决

问题描述

javascript如何定义和操作json对象，比如添加/删除一个键值对。

问题解决

定义json对象：

var jsonobj = {"name": "Bill Gates", "age": 50};

也可以定义一个空的json对象：

var jsonobj = {};

json对象有点像Python的字典，想要添加键值对，直接这样操作：

jsonobj.phone = "13333333333";

或者：

jsonobj['phone'] = "13333333333";

删除键值对用delete：

delete jsonobj.phone;

21. jquery遍历一组元素

问题类型：前端，javascript，jquery

解决状态：已解决

问题描述

有时候会得到一组html元素的集合，需要遍历，比如使用jquery的获取父元素、子元素、同胞元素等方法得到的元素集合对象。

问题解决

使用each()方法，下面是w3school中的例子：

$("button").click(function(){
  $("li").each(function(){
    alert($(this).text())
  });
});

22. jquery获取input元素的值

问题类型：前端，javascript，jquery

解决状态：已解决

问题描述

想通过jquery获取input的输入，但是发现用text方法是空的。

问题解决

与

等标签不一样，使用val()方法获取内容。

23. javascript中分割以特定字符串隔开的字符串

问题类型：前端，javascript

解决状态：已解决

问题描述

最近项目想要让前端的一大堆输入与后端的数据库对应，使用html中input的id属性来标识对应后端的哪个数据库的哪个列，那么就需要在id中保存数据库表和列两部分信息，比如表名字是vendor，列名字是name，那id属性为id=”vendor.name”，那么就需要一个方法把这两部分分开。

问题解决

javascript提供了一个split方法，分割后悔返回一个字符串数组，比如：

var str = "vendor.name"
var sp = str.split(".");
alter(sp[0]);   // vendor
alter(sp[1]);   // name

24. ajax上传的数据不是json字符串

问题类型：前端，json

解决状态：已解决

问题描述

当ajax需要上传json数据时，不能直接将json对象作为data进行post，这样post上去的是一堆键值对，后端无法解析。

问题解决

有两个函数用于解决json对象和json字符串的相互转化：

• JSON.stringify()将json对象转换为json字符串，可用于传输。
• JSON.parse()将json字符串转为json对象。

25. 使用POST头携带csrf token

问题类型：django, javascript, jquery, http

解决状态：已解决

问题描述

使用JSON.stringify()将json对象序列化后，久不能将csrf token放在载荷中了。

问题解决

可以在POST请求中加一个自定义的X-CSRFToken头部。其值为CSRF token，这个值可以通过以下代码获取：

// using jQuery
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie('csrftoken');

或者也可以使用jquery cookie plugin中的方法：

var csrftoken = $.cookie('csrftoken');

26. jquery中ajax加入自定义头部的方法

问题类型：前端，jquery, ajax

解决状态：已解决

问题描述

针对上一个问题，需要在jquery发送的POST头部加入自定义头部。

问题解决

$.ajax中可以设置一个名为headers的参数：

$.ajax({
    url: '/path/to/service',
    type:"POST",
    data: data,
    dataType: "json",
    headers: {
        'X-CSRFToken': csrftoken
    }
})