AJAX POST無法像GET一樣正常工作

Question

我試圖將聯系頁面數據發布到我的視圖中，但是當我包含if else語句時，它停止工作。

這是我的腳本：

<script>
 function Submit()
{
    var name = document.getElementById('contact-name').value;
    var email = document.getElementById ('contact-email').value;
    var subject = document.getElementById ('contact-subject').value;
    var message = document.getElementById ('contact-message').value;
    var data =  {"name":name,"email":email,"subject":subject,"message":message,csrfmiddlewaretoken:'{{ csrf_token }}'};
    if (name && email && message)
  {
    $.ajax({ // create an AJAX call...
        data: data, // get the form data
        type: "POST", // GET or POST
        url: "", // the file to call
        dataType: "json",
        success: function(response) { // on success..
                alert(response['message']);

        }
    });

    }else
    {
    return true;
    } 
}
</script>

這是我的表格：

        <form class="contact-form">
        {% csrf_token %}
            <p class="input-block">
                <label for="contact-name"><strong>Name</strong> (required)</label>
                <input type="text" name="name" value="" id="contact-name" required>
            </p>

            <p class="input-block">
                <label for="contact-email"><strong>Email</strong> (required)</label>
                <input type="email" name="email" value="" id="contact-email" required>
            </p>

            <p class="input-block">
                <label for="contact-subject"><strong>Subject</strong></label>
                <input type="text" name="subject" value="" id="contact-subject">
            </p>

            <p class="textarea-block">
                <label for="contact-message"><strong>Your Message</strong> (required)</label>
                <textarea name="message" id="contact-message" cols="88" rows="6" required></textarea>
            </p>

            <div class="hidden">
                <label for="contact-spam-check">Do not fill out this field:</label>
                <input name="spam-check" type="text" value="" id="contact-spam-check" />
            </div>

            <input type="submit" value="Submit" onclick="javascript:Submit();">

            <div class="clear"></div>

        </form>

沒有if else它可以正常工作，但是現在所有頁面都重新加載了所有表單數據作為查詢參數。 我該如何糾正？

Answer 1

首先，如果您嘗試執行AJAX，則需要阻止默認操作。 從那以后，我看到您已經在使用jQuery。 我建議將以下內容添加到<script>的頂部：

$("#contact-form").submit(function(e){
   e.preventDefault();
   Submit();
});

顯然，您將不再需要此功能。

onclick="javascript:Submit();"

現在，在任何類型的javascript調試器中運行此代碼（Chrome和Safari都有很好的調試器），您應該還不錯！

Answer 2

您需要從Submit()函數返回false。 另外，使用onsubmit句柄從form標記調用函數。

<form class="contact-form" onsubmit="Submit();">

並在Submit()函數中：

        success: function(response) { // on success..
            alert(response['message']);
        }
    });
    return false;
} else {
    return true;
}

Answer 3

請嘗試這個..我希望它能起作用...

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".contact-form").submit(function(e){
            e.preventDefault();
            Submit();
});
});

</script>
<script>
 function Submit()
{
    var name = document.getElementById('contact-name').value;
    var email = document.getElementById ('contact-email').value;
    var subject = document.getElementById ('contact-subject').value;
    var message = document.getElementById ('contact-message').value;
    var data =  {"name":name,"email":email,"subject":subject,"message":message,csrfmiddlewaretoken:'{{ csrf_token }}'};
    if (name && email && message)
  {
    $.ajax({ // create an AJAX call...

        data: data, // get the form data
        type: "POST", // GET or POST
        url: "", // the file to call
        dataType: "json",
        success: function(response) { // on success..
            alert(response['message']);

        }
    });
    return false;
}
}

Answer 4

1. 不要在onxxx事件處理程序中使用javascript: onxxx javascript:是在URL上使用的協議說明符，但onclick處理程序需要原始javascript，而不是URL。

2. 您需要從onclick返回false ，以防止提交表單的默認操作。 我假設您確實想阻止默認設置，而是改用AJAX？