Django Ajax传值测试

标签：xmlhttp request Django width Ajax var POST data 传值

效果图如下：

Django Ajax传值测试_JSON

输入什么内容，点击提交按钮下面就添加新输入的数据，数据处理成JSON字符串传到后台，如果不用JSON，就是一个字符串，django目前暂用request.body对象取值。

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test ajax</title>
<style type="text/css">
input[type=text],input[type=password] select {
    width: 100%;
    padding: 12px;
    display: inline-block;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}
label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}
input[type=button] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
input[type=button] {
    background-color: #45a049;
}
.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}
.form-group {
    text-align: left;

}
.col-25 {
    width:25%;
    float: left;
    margin-top: 6px;
}
.col-75 {
    width:75%;
    float: left;
    margin-top: 6px;
}
.form-group:after {
    content: "";
    display: table;
    clear:both;
}
@media screen and (max-width: 600px) {
    .col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}
</style>
    <script type="text/javascript">
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); }
    }
}
function getXMLHttp() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXobject("Microsoft.XMLHTTP");
    }
    return xmlhttp;
}
function al(){
<!--    alert(getCookie('csrftoken'));-->
    xmlhttp = getXMLHttp();
    xmlhttp.onreadystatechange = function(){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var li = document.createElement('li');
            li.innerText = xmlhttp.responseText;
            var items = document.getElementById('items');
            items.appendChild(li);
        }
    }
    var data_v = document.getElementsByName('data')[0].value;
    alert(data_v);
    var csrftoken = getCookie('csrftoken');
    xmlhttp.open("POST","/test/",true);
    xmlhttp.setRequestHeader("X-CSRFToken",csrftoken);
    xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    v = {"data":data_v};

    xmlhttp.send(JSON.stringify(v));
}

</script>
</head>
<body>
<div class="container">
    <div class="row">
        <form action="POST" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="form-group">
                <div class="col-25">
                    <label>data:</label>
                </div>
                <div class="col-75">
                    <input type="text" name='data' placeholder="...">
                </div>
            </div>

        </form>
        <div class="form-group">
                <input id="btn" type="button" onclick="al()" value="提交">
        </div>
    </div>
    <div>
        <ul id="items">
            <li>...</li>
        </ul>
    </div>
</div>
</body>
</html>

说明：这里传入的数据为json字符串

views.py文件

def test(request):
    if request.method != 'POST':
        return HttpResponse('not is post method!')
    mp = json.loads(request.body.decode('utf-8'))
    print(request.POST)
    print(request.body.decode('utf-8'))
    print(mp.get('data'))
    return HttpResponse(mp.get('data'))


def index(request):
    return render(request, 'test.html')

说明：这里request.POST时取不出来的，需要使用request.body解析成json然后取值.

下面为控制台信息，可以看到request.POST里没有值。

[04/Feb/2023 18:11:11] "GET /index/ HTTP/1.1" 200 3179

<QueryDict: {}>

{"data":"666"}

666

[04/Feb/2023 18:11:19] "POST /test/ HTTP/1.1" 200 3

<QueryDict: {}>

{"data":"测试数据"}

测试数据

标签：xmlhttp,request,Django,width,Ajax,var,POST,data,传值
From： https://blog.51cto.com/mengzhaofu/6037254

相关文章

赞助商

阅读排行