AJAX in Django rendering JSON

AJAX in Django rendering JSON

本文关键字:JSON rendering Django in AJAX      更新时间:2023-09-26

我正在尝试将JSON对象传递给视图。此视图将在模板中打印出 JSON 对象。这只是一个测试,看看我在 Django 中传递了哪些数据。

在发送 JSON 对象之前,我有 javascript 来验证正在发送的数据。如果验证通过,则通过 AJAX 发送数据。

我目前无法将任何内容发送到所需的视图。我正在为POST 403.

[22/Dec/2014 21:36:52] "POST /test/ HTTP/1.1" 403 2295

这是我的代码要点:https://gist.github.com/liondancer/a9df593daeeecce7f180

.JS:

$(document).ready(function() {
    // Data to describe what kind of test
    var testData = {
        "timestamp": "",
        "hive": 0,
        "hdfs": 0,
        // Contains a list of testData objects
        "beacons":[]
    };

    var testRun = document.getElementById("test-form");
    testRun.addEventListener('submit', function(event) {
        event.preventDefault();
        var selectedTest = document.querySelector('input[name=test-select]:checked');
        alert(selectedTest);
        var testType = selectedTest.id;
        if (testType == "hdfs-test") {
            testData["hdfs"] = 1;
            testData["hive"] = 0;
        } else if (testType == "hive-test") {
            testData["hdfs"] = 0;
            testData["hive"] = 1;
        } else if (testType == "hdfs-hive-test") {
            testData["hdfs"] = 1;
            testData["hive"] = 1;
        } else {
        //    null
        }
        var events = document.getElementById("event-textarea").value;
        // check in valid input
        var eventSource = events.replace("],[","],,,,[");
        // beaconLists allows users to submit --> [{beacon1}, {beacon2}, ...], [{beacon3}, {beacon4}, ...]
        var beaconLists = eventSource.split(",,,,");
        for (var i = 0; i < beaconLists.length; i++) {
            // inspect one list in beaconLists [{beacon1}, {beacon2}, ...]
            var beaconList = beaconLists[i];
            try {
                // list of JSON objects
                var beaconObjList = JSON.parse(beaconList);
                for (var j = 0; j < beaconObjList.length; j++) {
                    var beaconObj = beaconObjList[j];
                    if (beaconObj["data"] && beaconObj["application"]) {
                    //    successful parse to find events
                    //    describe beacon being tested
                        alert("yes");
                        var beacon = {
                            "app_name": beaconObj["application"]["app_name"],
                            "device": beaconObj["application"]["device"],
                            "device_id": beaconObj["application"]["device_id"],
                            "os": beaconObj["application"]["os"],
                            "os_version": beaconObj["application"]["os_version"],
                            "browser": beaconObj["application"]["browser"],
                            "beacon": beaconObj
                        };
                        // append to testData
                        testData["beacons"].push(beacon);
                        // reset beacon so we can append new beacon later
                        beacon = {};
                    } else {
                    //    notify event isn't in the correct format?
                        alert("no");
                    }
                }
            } catch (e) {
            //     notify bad JSON
                alert("failed");
            }
        }
        console.log(testData);
        //$.ajaxSetup({
        //    beforeSend: function(xhr, settings) {
        //        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
        //            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        //        }
        //    }
        //});
        $.ajax({
            type: "POST",
            url: "/test/",
            data: testData,
            success: function () {
                alert("yay");
            },
            failure: function () {
                alert("boo");
            }
        });
    });
});

.html:

{% extends 'index/index.html' %}
{% load staticfiles %}
{% block head %}
  <script type="text/javascript" src="{{ STATIC_URL }}home/js/home.js" async></script>
  <link href="{{ STATIC_URL }}home/css/home.css" rel="stylesheet">
{% endblock head %}
{% block content %}
  <div>Welcome to Trinity E2E testing</div>
  <form id="test-form">
    {% csrf_token %}
    <input id="hdfs-test" type="radio" name="test-select" class="btn btn-default btn-lg">HDFS
    <input id="hive-test" type="radio" name="test-select" class="btn btn-default btn-lg">HIVE
    <input id="hdfs-hive-test" type="radio" name="test-select" class="btn btn-default btn-lg">BOTH
    <textarea id="event-textarea" rows="8" class="form-control" placeholder="Events..."></textarea>
    <input id="submit-test" type="submit" class="btn btn-default btn-lg" value="Submit">
  </form>
{% endblock content %}

首页/观点.py:

from django.shortcuts import render
def load_homepage(request):
    return render(request, 'home/home_page.html', '')
def scan_events(request):
    if request == "POST":
        # json = request.POST['testData']
        # condition statement for file upload ot c/p events
        return render(request, 'home/test.html', {'data': request.POST})

测试.html:

  {{ data }}

urls.py:

urlpatterns = patterns('',
    url(r'^admin/', include(admin.site.urls)),
    url(r'parser/', include("parser.urls", namespace="parser")),
    url(r'^$', 'home.views.load_homepage', name='home'),
    # url(r'form_data', 'parser.views.form_handler', name='')
    url(r'test/$', 'home.views.scan_events'),
)

尝试发送CSRF令牌

$.ajax({
    type: "POST",
    url: "/test/",
    data: {
        csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value, testData,
    },
    success: function () {
        alert("yay");
    },
    failure: function () {
        alert("boo");
    }
});