AJAX in Django rendering JSON
AJAX in Django rendering JSON
我正在尝试将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");
}
});
相关文章:
- jQuery匹配JSON对象的部分文本
- 在循环中分配json值时,值被覆盖
- 需要帮助设置json数组
- 如何在Javascript中将JSon对象转换为数组
- 我可以在json对象中添加一个函数吗
- 使用JS将数组转换为json对象
- Javascript-如何读取json文件中的列并将其保存在Javascript数组中
- 使用JQuery解析JSON嵌套数组
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- 如何使用json将对象列表从java转换为javascript
- 如何使用 node.js 比较两个 json 数组
- 如何将JSON数据导入我的ejs模板
- 区分JSON中的矩阵和列表列表
- 不显示带有本地json文件数据的谷歌地图脚本
- 如何将json数据显示为html
- 如何为json对象中的段发送array[]
- 根据id将json数组组合为一个json数组
- Json数据包含日期和时间格式
- AngularJS-在JSON选择器中使用变量名
- AJAX in Django rendering JSON