Question

我已经筋疲力尽了我的大脑试图让一些简单的工作。我想用django将表单的行为从post reload更改为ajax。我无法让它发挥作用。

表格如下：

<form id="form1" action="/myurl/" method="post" onsubmit="doexchange">
<input id="input1" type="hidden" name="serializedData" value=""/>
<button id="button1" type="submit">render<button/>
</form>

使用jquery，我有类似的东西：

function doexchange(){
var dataBuffer = new Object();
dataBuffer = myCollecter(dataBuffer);

$("#input1").attr("value", JSON.stringify(dataBuffer));

$.get($("#form1").attr("action"), 
      {serializedData: $("#input1").attr("value")}, 
      function(data){
        alert('yes' + data);
      });

return false;
}

现在返回false是为了防止原始表单执行自己的POST。

在服务器端，我有一些非常简单的东西：

def handler(request, data):
    return HttpResponse('{}', 'application/json')

客户端通过ajax请求成功将数据发送到服务器。服务器还将{}空括号返回给客户端。但是，不是回调函数被调用，查看和警告，整个页面重新加载，我只在新页面上看到{}。

正如我所说，我尝试了很多不同的东西，但我想我错过了一些大象......有什么想法吗？哦，我正在使用最新的Mozilla firefox，但我认为这不是浏览器特定的问题......

Answer 1

我不认为解决方案需要非常复杂才能实现您的目标。考虑一下以下内容：

一个看起来像的页面：

<a class="btn" onclick="doexchange">render</a>

如下所示的JavaScript：

function doexchange(){
    var dataBuffer = myCollecter(dataBuffer);

    $.get('/myurl/', {serializedData: JSON.stringify(dataBuffer)}, function(data) {
        alert('yes' + data);
    });
}

Answer 2

尝试绑定到javascript中的表单提交。

$('#form1').bind('submit', function( e ){
  e.preventDefault();
  var form=$(this),
    input=form.find('input[name="serializedData"]');
  $.ajax({
   //
  });

从django返回ajax响应

2 个答案: