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

或者，在您的旧代码中（由于您不必处理自己连接数据网址，因此更好），您在两行之间也缺少逗号：

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

此外，您需要在此行后面加分号：

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

）

用html表单调用ajax将无法正常工作

3 个答案: