Question

我正在尝试通过jQuery和AJAX提交我的表单，但似乎self（index.php）的操作最终被采用，而不是jQuery提交处理程序。有什么想法吗？

    <form id="artist_signup" action="index.php" method="get" oninput="AoutName.value=ANAME.value">
    <input type="hidden" name="ajax" value="true" />
    <div class="inlineInput">
        <input type="text" name="ANAME" placeholder="Name">
    </div>

    <div class="inlineInput">
        <input type="text" name="LOCATION" placeholder="City, State">
    </div>

    <div class="inlineInput">
        <input type="email" name="EMAIL" placeholder="Email">
    </div>

    <div class="inlineInput">
        <input type="url" name="AWEBSITE" placeholder="www.myawesomeband.com">
    </div>

    <div class="submitContainer">
        <input type="submit" value="Sen" class="donateButton formSubmit">
    </div>
    <div id="artist_message"></div>
</form>

    <script type="text/javascript"> 
$(document).ready(function() {
    $('#artist_signup').submit(function() {
        $("#artist_message").html("<span class='error'>Adding your email address...</span>");
        $.ajax({
            url: 'inc/store-address.php',
            data: $('#artist_signup').serialize(),
            success: function(msg) {
                $('#artist_message').html(msg);
            }
        });
        return false;
    });
});
</script>

Answer 1

您需要阻止默认操作，即表单提交。这可以通过e.preventDefault()来完成。您可以阅读更多相关信息here

$(document).ready(function() {
    $('#artist_signup').submit(function(e) {
       e.preventDefault();
       $("#artist_message").html("<span class='error'>Adding your email address...</span>");
       $.ajax({
            url: 'inc/store-address.php',
            data: $('#artist_signup').serialize(),
            success: function(msg) {
                $('#artist_message').html(msg);
            }
        });
    });
});

Answer 2

使用提交功能时，它的自然动作是回发到表单操作的任何内容。您可以做的是在e函数中添加一个参数。这将表示具有与事件本身相关的属性和方法的事件对象。有了这个，您可以执行e.preventDefault();，这将阻止表单操作发生。

<script type="text/javascript"> 
    $(document).ready(function() {
    $('#artist_signup').submit(function(e) {
        e.preventDefault();
        $("#artist_message").html("<span class='error'>Adding your email address...   </span>");
    $.ajax({
        url: 'inc/store-address.php',
        data: $('#artist_signup').serialize(),
        success: function(msg) {
            $('#artist_message').html(msg);
            }
        });
    });
});
</script>

jQuery .submit（）不处理我的表单，而是采取表单操作

2 个答案: