数据分析之Ajax(使用Ajax提交好友信息，并放回列表显示所有好友)

本文链接：https://blog.youkuaiyun.com/weixin_66448906/article/details/122940096

本文通过PyCharm创建django项目，利用Ajax技术实现在后台处理好友信息的提交，并将处理后的好友列表返回到前端展示，详细介绍了urls.py、views.py、blls.py、common.py及ajax01.html的实现过程，最后展示了功能实现的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先在PyCharm中创建一个django包
完成以下步骤：
在这里插入图片描述

urls.py

views.py:

import json

from django.http import HttpResponse
from django.shortcuts import render
from hw_03.blls import PersonA, data_persona


def ajax01_html(req):
    return render(req, "ajax01.html")


def ajax_json_formdata(req):
    name = req.POST.get("name", '')
    sex = req.POST.get("sex", '')
    hobby = req.POST.get("hobby", '')
    o = PersonA(name, sex, hobby)

    data = data_persona()
    data.append(o)

    # 序列化
    jsonstr = json.dumps(data, default=lambda o: {"name": o.name, "sex": o.sex, "hobby": o.hobby})
    return HttpResponse(jsonstr)


def ajax_json_querystring(req):
    name = req.GET.get("name", '')
    sex = req.GET.get("sex", '')
    hobby = req.GET.get("hobby", '')
    o = PersonA(name, sex, hobby)

    data = data_persona()
    data.append(o)

    # 序列化
    jsonstr = json.dumps(data, default=lambda o: {"name": o.name, "sex": o.sex, "hobby": o.hobby})
    return HttpResponse(jsonstr)


def ajax_json_payload(req):
    jsonstr = req.body.decode('utf-8')
    # 反序列化
    o = json.loads(jsonstr, object_hook=lambda d: PersonA(**d))

    data = data_persona()
    data.append(o)

    # 序列化
    jsonstr = json.dumps(data, default=lambda o: {"name": o.name, "sex": o.sex, "hobby": o.hobby})
    resp = HttpResponse(jsonstr)
    return resp


def ajax_json_payloads(req):
    jsonstr = req.body.decode('utf-8')
    # 反序列化
    oo = json.loads(jsonstr, object_hook=lambda d: PersonA(**d))

    data = data_persona()
    data.append(oo)

    # 序列化
    jsonstr = json.dumps(data, default=lambda o: {"name": o.name, "sex": o.sex, "hobby": o.hobby})
    resp = HttpResponse(jsonstr)
    return resp

blls.py:

class PersonA:
    def __init__(self, name, sex, hobby):
        self.name = name
        self.sex = sex
        self.hobby = hobby

    def __str__(self):
        return f"PersonA [name:{self.name},sex:{self.sex},hobby:{self.hobby}]"

    def __repr__(self):
        return f"PersonA [name:{self.name},sex:{self.sex},hobby:{self.hobby}]"


class PersonB:
    def __init__(self, name, sex, hobby):
        self.name = name
        self.sex = sex
        self.hobby = hobby

    @property
    def name(self):
        return self.name

    @name.setter
    def name(self, name):
        self.__name = name

    @property
    def sex(self):
        return self.sex

    @sex.setter
    def sex(self, sex):
        self.__sex = sex

    @property
    def hobby(self):
        return self.hobby

    @hobby.setter
    def hobby(self, hobby):
        self.__hobby = hobby

    def __str__(self):
        return f"PersonB [name:{self.name},sex:{self.sex},hobby:{self.hobby}]"

    def __repr__(self):
        return f"PersonB [name:{self.name},sex:{self.sex},hobby:{self.hobby}]"


def data_dict():
    return [{"name": "小红", "sex": "女", "hobby": "狗"},
            {"name": "小谢", "sex": "男", "hobby": "猫"},
            {"name": "小武", "sex": "女", "hobby": "猪"}]


def data_persona():
    data = data_dict()
    result = []
    for item in data:
        result.append(PersonA(**item))
    return result


def data_personb():
    data = data_dict()
    result = []
    for item in data:
        result.append(PersonB(**item))
    return result

common.py:

;

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:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
</head>
<body>
<div class="input">
    <hr>
    <input type="text" name="name" id="name" placeholder="请输入姓名"><br>
    <input type="text" name="sex" id="sex" placeholder="请输入性别"><br>
    <input type="text" name="hobby" id="hobby" placeholder="请输入爱好">
</div>
<button id="apd">添加朋友</button>
<br>

<ul id="msg"></ul>
<button id="btn01">ajax01-formdata</button>
<br>
<button id="btn02">ajax01-querystring</button>
<br>
<button id="btn03">ajax01-payload</button>
<br>
<button id="btn04">ajax01-payloads</button>
<br>
{% csrf_token %}
{% load static %}
<script src="{% static '/js/common.js' %}"></script>
<script>
    document.getElementById("apd").onclick = function () {
        var div = document.createElement('div')
        div.setAttribute('class', 'input')
        div.appendChild(document.createElement('hr'))
        var elt = document.createElement('input')
        elt.setAttribute('name', 'name')
        elt.setAttribute('placeholder', '请输入姓名')
        div.appendChild(elt)
        div.append(document.createElement('br'))
        var elt = document.createElement('input')
        elt.setAttribute('name', 'sex')
        elt.setAttribute('placeholder', '请输入性别')
        div.appendChild(elt)
        div.append(document.createElement('br'))
        var elt = document.createElement('input')
        elt.setAttribute('name', 'hobby')
        elt.setAttribute('placeholder', '请输入爱好')
        div.appendChild(elt)
        div.append(document.createElement('br'))
        this.parentElement.insertBefore(div, this)
    }
    document.getElementById("btn01").onclick = function () {
        var name = document.getElementById("name").value
        var sex = document.getElementById("sex").value
        var hobby = document.getElementById("hobby").value
        ajax({
            "url": "{% url 'ajax_json_formdata' %}",
            "type": 'post',
            "data": "name=" + name + "&sex=" + sex + "&hobby=" + hobby,
            "Content-Type": "application/x-www-form-urlencoded",
            "callback": function (req) {
                if (req.readyState == 4) {
                    if (req.status == 200) {
                        var data = JSON.parse(req.responseText)
                        var ul = document.getElementById("msg")
                        ul.innerHTML = ""
                        for (var i = 0; i < data.length; i++) {
                            var p = data[i]
                            var li = document.createElement("li")
                            li.setAttribute("value", p.id)
                            li.innerHTML = p.name
                            ul.append(li)
                        }
                    }
                }
            }
        })
    }
    document.getElementById("btn02").onclick = function () {
        var name = document.getElementById("name").value
        var sex = document.getElementById("sex").value
        var hobby = document.getElementById("hobby").value
        ajax({
            "url": "{% url 'ajax_json_querystring' %}",
            "type": 'post',
            "data": "name=" + name + "&sex=" + sex + "&hobby=" + hobby,
            "Content-Type": "application/x-www-form-urlencoded",
            "callback": function (req) {
                if (req.readyState == 4) {
                    if (req.status == 200) {
                        var data = JSON.parse(req.responseText)
                        var ul = document.getElementById("msg")
                        ul.innerHTML = ""
                        for (var i = 0; i < data.length; i++) {
                            var p = data[i]
                            var li = document.createElement("li")
                            li.setAttribute("value", p.id)
                            li.innerHTML = p.name
                            ul.append(li)
                        }
                    }
                }
            }
        })
    }
    document.getElementById("btn03").onclick = function () {
        var name = document.getElementById("name").value
        var sex = document.getElementById("sex").value
        var hobby = document.getElementById("hobby").value
        var p = {
            "name": name,
            "sex": sex,
            "hobby": hobby
        }
        ajax({
            "url": "{% url 'ajax_json_payload' %}",
            "type": 'post',
            "data": JSON.stringify(p),
            "Content-Type": "application/json",
            "callback": function (req) {
                if (req.readyState == 4) {
                    if (req.status == 200) {
                        var data = JSON.parse(req.responseText)
                        var ul = document.getElementById("msg")
                        ul.innerHTML = ""
                        for (var i = 0; i < data.length; i++) {
                            var p = data[i]
                            var li = document.createElement("li")
                            li.setAttribute("value", p.id)
                            li.innerHTML = p.name
                            ul.append(li)
                        }
                    }
                }
            }
        })
    }
    document.getElementById("btn04").onclick = function () {
        var ps = []
        var divs = document.querySelectorAll('div.input')
        for (var i = 0; i < divs.length; i++) {
            var div = divs[i]
            var name = div.querySelector("[name=name").value
            var sex = div.querySelector("[name=sex").value
            var hobby = div.querySelector("[name=hobby").value
            ps.push({
                "name": name,
                "sex": sex,
                "hobby": hobby
            })
        }
        ajax({
            "url": "{% url 'ajax_json_payloads' %}",
            "type": 'post',
            "data": JSON.stringify(ps),
            "Content-Type": "application/json",
            "callback": function (req) {
                if (req.readyState == 4) {
                    if (req.status == 200) {
                        var data = JSON.parse(req.responseText)
                        var ul = document.getElementById("msg")
                        ul.innerHTML = ""
                        for (var i = 0; i < data.length; i++) {
                            var p = data[i]
                            var li = document.createElement("li")
                            li.setAttribute("value", p.id)
                            li.innerHTML = p.name
                            ul.append(li)
                        }
                    }
                }
            }
        })
    }
</script>
</body>
</html>

最后看看实现效果吧
在这里插入图片描述这四个按钮自己实现后，好好体验一番吧

总结：

这些代码看上去很多，但是仔细人都会发现其实有很多都是重复的，只要学会关键代码，其实都很简单咯

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

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

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