让jquery查看从Django视图返回的JSON对象时遇到麻烦
我有一个表单，允许用户更改数据库中的帐户信息。在submit上，表单调用Django视图，并提交给隐藏的iframe。视图返回一个JSON对象。
隐藏的iframe可以看到这个物体。在Chrome浏览器中，我可以看到我希望写到iframe的字段。
当jQuery试图访问这些数据时，麻烦就来了。jQuery函数从未运行过。从未触发控制台日志和警报。我需要能够用django视图返回的数据触发函数。
这是我的模板文件中的jQuery块。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'>
$('#hiframe').ready(function(){
$.getJSON('{{url_root}}/userupdate/update/', function(data) {
var parseddata = $.parseJSON(data);
console.log(parseddata);
alert(parseddata.UserId);
});
});
</script>下面是iframe和模板中的表单：
<iframe name='hiddeniframe' id='hiframe' scrolling='no' frameborder='0' style='display:none'></iframe>
<form id="userUpdate" name="userUpdate" action="{{url_root}}/userupdate/update/" method="POST" target='hiddeniframe'>最后，下面是我从视图函数返回的字典：
json_data = {'UserId': user_name,
'FirstName': user_fname,
'LastName': user_lname,
'Status': user_status}
return HttpResponse(json.dumps(json_data), content_type='application/json')编辑到发布解决方案：
knbk给了我一些很好的建议，我能够利用这些来完成这项工作。我删除了HTML表单，并使用下面的代码从视图进行了发送和接收。
添加我的解决方案，以防其他人遇到同样的问题。
$.ajax({
url: "{{url_root}}/userupdate/update/",
type: 'POST',
dataType: 'json',
data: data,
success: function(dta){
jsonfromDB = dta[0];
if (jsonfromDB['ErrMsg'].length > 0) {
alert(jsonfromDB['ErrMsg'].join("\n"));
}
// This is true when we have updated the database.
if(jsonfromDB['UpdateStatus']) {
// Grab the User input
fname.val(jsonfromDB['FirstName']);
lname.val(jsonfromDB['LastName']);
stat.val(jsonfromDB['Status']);
// We want the user to know when success has happened.
alert('Your database update was sucessful.');
}
},
error: function(errdata){
jfDB = errdata[0];
if (jfDB['ErrMsg'].length > 0) {
alert(jfDB['ErrMsg'].join("\n"));
}
}
});回答 2
Stack Overflow用户
发布于 2013-07-29 23:19:20
您的代码有一些问题。
首先，在具有script属性的src标记中包含javascript代码。如果在html文件中包含javascript代码，请使用单独的没有src属性的src标记。这就是为什么您的代码没有被执行，以及您在控制台中看不到任何东西的原因。
如果您修复了这个问题，并且您的表单中的代码与我想的一样(使用提交按钮而没有onclick或任何指定的内容)，那么首先向服务器发送一个POST请求，其中包含正确的数据，然后，当请求完成后，JSON作为原始文本加载到您的iframe中，您将向同一个url发送另一个JSON请求，这一次是通过一个GET请求，而不包含任何数据，并且在某种程度上期望得到与您在iframe中得到的响应相同的响应。
此外，通常使用‘{% url 'view_name’%}标签比在模板中硬编码url要好。
您应该做的是有一个button或submit输入并附加一个onClick函数。如果使用submit按钮，则需要防止默认操作，并且附加到action url的视图应该处理默认表单提交。然后，JSON方法应该使用一个返回JSON数据的不同的url/django视图。
这个onclick函数应该收集表单中的数据，并使用AJAX请求将其发送到服务器。在更新服务器上的数据时，HTML标准建议使用POST请求。要做到这一点，您需要使用$.ajax()而不是$.getJSON()。
您的javascript代码应该看起来有点像这样：
<script type="text/javascript">
$('#<submitbutton_id').onclick(function(event) {
data = {
UserId: $('#userid_field_id').val(),
etc.
}
$.ajax("{% url 'update_user_ajax' %}",
{ type: 'POST',
dataType: 'json',
data: data,
success: function(data) {
<parse the data>
}
event.preventDefault()
})
</script>Stack Overflow用户
发布于 2013-07-29 18:46:31
我不知道隐藏的iframe有什么意义。您也没有说明实际问题是什么。
但是，您的jQuery代码似乎不在<script>...</script>标记中，这很可能是问题所在。
https://stackoverflow.com/questions/17931552
复制相似问题
腾讯云开发者
