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

【问题标题】：window.open template in django, using chromedjango中的window.open模板，使用chrome
【发布时间】：2016-04-07 13:43:47
【问题描述】：

在阅读了互联网上的所有内容后，我不再确定问题出在哪里，希望能得到一些帮助。谢谢。

我有一个用户正在填写的三个不同的表单，我在其中放置了一个 jQuery UI 对话框，当表单提交时会出现。我试图让“下一步”按钮将用户从当前页面导航到下一个模板，但无法完成这项工作。我在 Chrome 中收到错误消息，显示“unexpected token”。在我的 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");
                        }) 
                }

            }
        })
    })
});

【问题讨论】：

$.ajax({ window.location.href('127.0.0.1:8000/campers') $(this).dialog("close"); }) ??
是的，正如 vadimchin 暗示的那样，这根本不是您在 jQuery ajax 调用中所做的。你想在那里做什么？首先，{} 使它成为一个需要键和值的对象；并且您至少需要一个用于加载 Ajax 的 URL，以及一个要调用的成功函数。

标签： javascript jquery python django django-templates

【解决方案1】：

我建议对您的车辆按钮点击处理程序进行更正：

$(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>

【讨论】：

【解决方案2】：

好的，这就是最终奏效的方法。我不确定这段代码是否有一些不必要的部分，但根据上面的答案和互联网的其他部分以及 Django 文档，我将它拼凑在一起：

我获得了允许跨源站点资源共享的 Chrome 扩展程序。
我按照Django docs 放入了 csrf cookie。
我将 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");
              })
            }
          }]
        });
      });
    });

【讨论】：