数据分析之Ajax(收集个人信息,在控制台显示)

内容：使用Ajax收集前端输入的个人信息，后端获取数据之后，使用json返回前端，前端获取json数据之后再解析显示

首先还是在PyCharm创建一个django包
然后完成以下步骤

这行代码记得注释
blls，views和urls代码如图所示：


commons.js 代码如下：

;

function createXhr() {
    var xhr
    if (XMLHttpRequest) {
        xhr = new XMLHttpRequest()
    } else {
        var versions = ['Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.4.0',
            'Msxml2.XMLHTTP.2.0', 'Msxml2.XMLHTTP', 'Microsoft.XMLHTTP']
        for (var i = 0; i < versions.length; i++) {
            try {
                xhr = new ActiveXObject(versions[i])
                break
            } catch (e) {
            }
        }
    }
    return xhr
}

;

function ajax_get(url, callback) {
    //1.
    var xhr = createXhr()
    if (xhr) {
        //2.
        if (callback) {
            xhr.onreadystatechange = function () {
                callback(xhr)
            }
        }
        //3.
        xhr.open('get', url)
        //4.
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        //5.
        xhr.send(null)
    }

}

;

function ajax_post(url, data, callback) {
    var xhr = createXhr()
    if (xhr) {
        if (callback) {
            xhr.onreadystatechange = function () {
                callback(xhr)
            }
        }
        xhr.open('post', url)
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        xhr.send(data)
    }

}

;

function ajax(options) {
    var url = options['url'] || ''
    var method = options['type'] || 'get'
    var callback = options['callback']
    var data = options['data']
    var content_type = options['Content-Type'] || 'application/x-www-form-urlencoded'

    var xhr = createXhr()
    if (xhr) {
        if (callback) {
            xhr.onreadystatechange = function () {
                callback(xhr)
            }
        }

        if (method == 'get') {
            url = url + '?' + data
        }
        xhr.open(method, url)
        xhr.setRequestHeader('Content-Type', content_type)
        if (method == 'get') {
            xhr.send(null)
        } else {
            xhr.send(data)
        }

    }
}

ajax01.html 代码如下：

    
    









ajax01-post


{% csrf_token %}
{% load static %}

最后看看显示效果吧

序列化：将内存对象转换为流对象
反序列化：将流对象转换为内存对象

js端的
	json序列化： JSON.stringify(对象)
	json反序列化: JSON.parse(json字符串)

python端的
	import json
	json序列化:

		json.dump(obj,fp,ensure_ascii,default)
		json.dumps(obj,ensure_ascii,default)
			obj 要序列化的对象
			fp  序列化存储的文件
			ensure_ascii 是否直接存储ascii码
			default 转换器方法 对象到字典

	json反序列化:
		json.load(fp,object_hook)
		json.loads(json,object_hook)
			json json字符串
			fp  存储json字符的文件
			object_hook转换器 字典到对象

数据提交的方式
	querystring  get 	request.GET
	formdata	 post 	request.POST
	payload	     post 	request.body


序列化与反序列化
pickle
	dumps对象序列化为bytes对象
	dump 对象序列化到文件对象

	loads 从bytes对象反序列化
	load  从文件读取数据反序列化