问让jquery查看从Django视图返回的JSON对象时遇到麻烦
EN

Stack Overflow用户

提问于 2013-07-29 10:30:46

回答 2查看 470关注 0票数 0

我有一个表单，允许用户更改数据库中的帐户信息。在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"));
                    }
                }
            });

jquery

django

json

云联络中心6.1折起

灵活稳定的一体化云联络中心，助力快速搭建集电话、在线交流、音视频通话为一体的客户联络平台

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-07-29 15: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>