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");
              })
            }
          }]
        });
      });
    });