0

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

2 回答 2

0

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

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

于 2013-07-29T18:46:31.260 回答
0

您的代码存在一些问题。

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

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

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

您应该做的是附加一个带有 onClick 功能的buttonor输入。submit如果您使用submit按钮，则需要阻止默认操作，并且附加到您的actionurl 的视图应处理默认表单提交。然后，您的 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>
于 2013-07-29T23:19:20.143 回答