无法让 jquery 查看从 Django 视图返回的 JSON 对象

Question

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

Answer 1

您的代码存在一些问题。

首先，您的 javascript 代码位于具有 src 属性的 script 标记中。如果您在 html 文件中包含 javascript 代码，请使用不带 src 属性的单独 script 标记。这就是为什么您的代码没有被执行以及为什么您在控制台中看不到任何内容的原因。

如果您解决了这个问题，并且您的表单中的代码与我认为的一样（带有一个没有 onclick 或任何指定的提交按钮），您首先使用正确的数据向服务器发送一个 POST 请求，然后，当请求完成并且 JSON 作为原始文本加载到您的 iframe 中时，您将另一个 JSON 请求发送到相同的 url，这次是通过 GET 请求，不包含任何数据，并且以某种方式期望获得与您得到的相同的响应在你的 iframe 中。

此外，使用 `{% url 'view_name' %} 标记通常比将 url 硬编码到模板中更好。

你应该做的是有一个 button 或 submit 输入并附加一个 onClick 函数。如果您使用submit 按钮，则需要prevent the default action 并且附加到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>

Answer 2

我不确定隐藏 iframe 的意义何在。您也没有说明实际问题是什么。

但是，您的 jQuery 代码似乎不在 <script>...</script> 标记内，这很可能是问题所在。