使用 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") 找不到任何东西来绑定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 准备好，并且您的元素在那里可以找到/绑定。另外，不要附加到#continue 按钮的click 事件，通常最好附加到表单的submit 处理程序，所以它会被捕获，所以不要这样：

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

你会这样做：

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

其他一切都保持不变。

Answer 2

对我来说听起来像是一个错字，它看起来像在您的数据字段中。

我建议这样做

data: "value1="+$("#val1").val()+"&value2="+$("#val2").val() 

另外一个调试 javascript 的好方法是打开 chrome 的控制台或在 firefox 中使用 firebugs 控制台，当您执行操作时，它通常会通知您有问题或缺少问题。

最后一点：我建议在您从 php 的返回中使用 json，这样您可以为用户提供更符合要求的信息。例如，假设您的表单没有验证服务器端（您正在验证服务器端对吗？）您可以向客户端返回一条很好的消息，向他们解释没有验证。这个怎么做？

  $.ajax({
           type: "POST",
           url: "dbc.php",
           data: "val1="+$(#val1).val()+"&val2="+$(#val2).val(), 
           success: function(json){
               if(json.error){
                  //notify user of error message
                  $(#statusDiv).(json.message); 
               }else{
                  //perform success 

               }               
            }
         });

并在服务器端使用诸如

之类的东西

echo json_encode(array("error"=>1, "message"=>"<insert validation problems here>")); 

这将通过 json.error 或 json.message 访问成功函数。

Answer 3

在 phpbin 上的新代码中，行后需要一个逗号：

 data: "full_name="+$("#full_name").val()+"&usr_email="+$("#usr_email").val(), // <-- COMMA HERE

或者，在您的旧代码中（这更好，因为您不必自己处理连接数据 url），您在两行之间也缺少一个逗号：

data: {full_name : $('#full_name').val(), // <-- COMMA HERE
         usr_email : $('#usr_email').val()},

另外，这行后面需要一个分号：

alert(msg); // <-- SEMICOLON HERE

;)