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()函数返回错误。另外，使用onsubmit句柄从表单标记调用该函数。

<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}}事件处理程序中使用javascript:。 onxxx是一个URL上的协议说明符，但javascript:处理程序需要原始javascript，而不是URL。
您需要从onclick返回false，以防止提交表单的默认操作。我假设您确实想要阻止默认并使用AJAX？

AJAX POST错误地像GET一样工作

4 个答案: