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

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

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

Answer 2

您的代码存在一些问题。

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

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

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

您应该做的是使用附加了onClick功能的button或submit输入。如果您使用submit按钮，则需要prevent the default action并且附加到action网址的视图应处理默认表单提交。然后，您的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>

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

2 个答案: