django中的window.open模板，使用chrome

Question

在阅读完互联网上的所有内容之后，我不再确定问题出在哪里，我将不胜感激。 谢谢。

我有三种不同的表单供用户填写，提交表单时会弹出一个jQuery UI对话框。 我正在尝试使“下一个”按钮将用户从当前页面导航到下一个模板，但是却无法完成这项工作。 我在Chrome中收到错误消息，提示“意外令牌”。 在我的window.open行上，我也尝试使用变量来设置它，并尝试了各种ajax调用，但似乎没有任何效果。

这是我的网址：

url(r'^campers/',campers, name="campers"),

这是我的JavaScript：

    $("#vehiclebutton").click(function(e){
        e.preventDefault();
        $('<div></div>').appendTo('#vehicle_message')
            .html('<div><h3> Next, tell us about your sleeping arrangements. </h3></div>')
            .dialog({
                title: "Confirm",
                width: 500, 
                height: 300,
                modal: true,
                resizable: false,
                show: { effect: 'drop', direction: "left" }, 
                hide: {effect:'drop', direction:'left'},
                buttons: {
                    Next: function() {
                        $.ajax({ 
                            window.location.href('http://127.0.0.1:8000/campers')
                            $(this).dialog("close");
                        }) 
                }

            }
        })
    })
});

Answer 1

我建议对您的vehiclebutton单击处理程序进行更正：

 $(function () { $("#vehiclebutton").click(function(e){ e.preventDefault(); var obj = null; $('<div></div>').appendTo('#vehicle_message') .html('<div><h3> Next, tell us about your sleeping arrangements. </h3></div>') .dialog({ title: "Confirm", width: 500, height: 300, modal: true, resizable: false, show: {effect: 'drop', direction: "left"}, hide: {effect: 'drop', direction: 'left'}, buttons: [{ text: 'Next', click: function () { var data = ""; obj = $(this); $.ajax({ url: 'http://127.0.0.1:63342/campers', data: data, method: "POST", dataType: 'html', }).done(function(data, textStatus, jqXHR) { obj.dialog("close"); }).fail(function(jqXHR, textStatus) { obj.dialog("close"); }) } }] }); }); }); 

 <link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/> <script src="http://code.jquery.com/jquery-1.11.3.js"></script> <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script> <button id="vehiclebutton">Click Me</button> <p id="vehicle_message"></p> 

Answer 2

好的，这就是最后的工作。 我不确定该代码是否包含一些不必要的部分，但是基于上面的答案以及互联网的其他部分以及Django文档，我将其拼凑而成：

1. 我得到了Chrome扩展程序，该扩展程序允许跨源站点资源共享。

2. 我根据Django docs放入了csrf cookie。

3. 我将ajax标头添加到了ajax调用本身。

所有这些都是非常基本的，但是我没有使用过很多ajax，也没有与Django一起使用，这是我的工作代码。 如果可以通过修改加以改善，我很想知道。

$(function () {
      $("#profilebutton").click(function(e){
        e.preventDefault();
        var obj = null;
        $('<div></div>').appendTo('#profile_message')
        .html('<div><h3> Next, tell us about how you\'re getting here. </h3></div>')
        .dialog({
          title: "Confirm",
          width: 500,
          height: 300,
          modal: true,
          resizable: false,
          show: {effect: 'drop', direction: "left"},
          hide: {effect: 'drop', direction: 'left'},
          buttons: [{
            text: 'Next',
            click: function () {
              var data = "";
              obj = $(this);
              $.ajax({
                method: "POST", 
                beforeSend: function(xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                },
                data: data,
                dataType: 'html',
              }).done(function(data, textStatus, jqXHR) {
                window.location.href = '/vehicle/'; 
                obj.dialog("close");
              }).fail(function(jqXHR, textStatus) {
                obj.dialog("close");
              })
            }
          }]
        });
      });
    });