javascript - 提交表单时未执行脚本

Question

我有一个表单，想要使用 Ajax 将表单数据发送到 PHP 文件:这是我的表格:

<div class="acc_content clearfix">
                                        <form name="contactForm" id="contactForm" class="nobottommargin" action="guarda_pass.php" method="post" >
                                            <div class="col_full" style="color: #898989">
                                                <label style="color: #898989" for="login-form-username">Escribe tu nueva contraseña:</label>
                                                <input type="text" id="password" name="password" value="" class="form-control" required />
                                            </div>
                                            <div class="col_full" style="color: #898989">
                                                <label style="color: #898989" for="login-form-username">Confirma tu nueva contraseña:</label>
                                                <input type="text" id="con_password" name="con_password" value="" class="form-control" required/>
                                            </div>


                                            <div class="col_full nobottommargin">
                                                <button class="button button-3d button-black nomargin" style="background-color: #6fb6e5"  type= "submit"  value="login">Registrar</button>


                                            </div>
                                        </form>
                                          <div id="contactResponse"></div>
                                    </div>

这是脚本:

<script src="js/jquery.js"></script>
        <script>
            $("#contactForm").submit(function(event) 
            {
                /* stop form from submitting normally */
                event.preventDefault();


                /* get some values from elements on the page: */
                var $form = $( this ),
                $submit = $form.find( 'button[type="submit"]' ),
                password_value = $form.find( 'input[name="password"]' ).val(),
                con_password_value = $form.find( 'input[name="con_password"]' ).val(),
                url = $form.attr('action');

                /* Send the data using post */
                var posting = $.post( url, { 
                    password: password_value, 
                    con_password: con_password_value 
                });

                posting.done(function( data )
                {
                    /* Put the results in a div */
                    $( "#contactResponse" ).html(data);

                    /* Change the button text. */
                    $submit.text('Sent, Thank you');

                    /* Disable the button. */
                    $submit.attr("disabled", true);
                });
            });
        </script>

单击提交按钮后，页面会自行重新加载，并且脚本不会执行。我做错了什么？

Answer 1

你的代码似乎可以工作。 This jsfiddle显示它(我已注释掉 $.post ajax 调用并添加了 alert 来演示这一点)。也许您将脚本包含在未执行的位置，或者可能在 DOM 可用之前过早执行。您可以通过将脚本包装到以下位置来规避后者:

$(function() {
  // your script content with $("#contactForm")... here
});

参见.ready() on api.jquery.com有关此的更多详细信息。