javascript - 使用 html 表单的 ajax 调用将无法正常工作

Question

我卡住了。

就好像这个脚本根本没有任何作用。

        <script>
            $("#continue").click(function () {
        $.ajax({
           type: "POST",
           url: "dbc.php?check=First",
           data: {full_name : $('#full_name').val()
                 usr_email : $('#usr_email').val()},
           success: function(msg){
               if(msg==1){
                  $("#First_1").hide();
                  $("#Next_2").toggle(); 
               }else{
                  alert(msg)
               }               
            }
         });
         return false;
    }); 
        </script>

        <form action="index.php?page=checkin" method="post" name="regForm">
     <div id="First_1">
    <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <table cellpadding="0" cellspacing="5">
                                    <tr>
                        <td style="padding: 5px;">
                        Fullständiga namn: 
                        </td>
                        <td>
                        <input name="full_name" type="text" id="full_name" class="required"> 
                        </td>
                                    </tr>
                                    <tr>
                        <td style="padding: 5px;">
                        Email:
                        </td>
                        <td>
                        <input name="usr_email" type="text" id="usr_email" class="required email">
                        </td>
                                    </tr>
                                    <tr>
                        <td style="padding: 5px;">
                        Sex: 
                        </td>
                        <td>
                        <select name="sex">
                        <option value="male">Kille</option>
                        <option value="female">Tjej</option>
                        </select>
                        </td>
                                    </tr>
                        <td>
                        <input type="submit" id="continue" value="Continue">
                        </td>
                </table>
        </td>
            </tr>
    </table>
</div>

有了这个，当我按下继续时，它应该发送 ajax 调用，但它没有。当我按下“继续”时，它只会将我带到表单的 action="index.php?page=checkin"，即使返回 false；单击(在脚本中)？我什至尝试更改表单行并插入 onsubmit="return false;"但是当我点击按钮时什么也没有发生。

Answer 1

问题是它正在执行默认操作，因为您的 jQuery 代码都没有运行 :) 当您的代码运行时，id="continue" 元素还不存在，所以 $("#continue") 找不到任何可绑定(bind) click 处理程序的内容。这是一个简单的修复，将您的代码包装在 document.ready 调用中，如下所示:

$(function() {
  $("#continue").click(function () {
    $.ajax({
       type: "POST",
       url: "dbc.php?check=First",
       data: {full_name : $('#full_name').val()
             usr_email : $('#usr_email').val()},
       success: function(msg){
           if(msg==1){
              $("#First_1").hide();
              $("#Next_2").toggle(); 
           }else{
              alert(msg)
           }               
        }
     });
     return false;
  });
}); 

通过这样做，它会等到 DOM 准备就绪，并且您的元素可以在那里找到/绑定(bind)。另外，不要附加到 #continue 按钮的 click 事件，通常最好附加到表单的 submit 处理程序，所以它会在那里被捕获，所以而不是这个:

$("#continue").click(function () {

你会这样做:

$("form[name='regForm']").submit(function() {

其他一切保持不变。