Question

我正在使用jQuery来验证我的注册表单上的所有字段。不幸的是，最后的AJAX脚本没有像我想的那样发布到PHP文件，也没有按照指定对文档进行必要的更改。当我点击提交时，它会像它应该清除错误标签，但似乎什么都不做。

此外，所有错误检查语句都正常工作。有什么想法吗？

  $(".button").click(function() {
        // validate and process form
        // first hide any error messages
    $('.error').hide();



// Check if First Name is Blank 
    var firstname = $("input#firstname").val();

    if (firstname == "") {
      $("label#firstname_error").show();
      $("input#firstname").focus();
      return false;
    }

// Check if Last Name is Blank
    var lastname = $("input#lastname").val();

        if (lastname == "") {
      $("label#lastname_error").show();
      $("input#lastname").focus();
      return false;
    }

// Check if Address is Blank    
    var address = $("input#address").val();

    if (address == "") {
      $("label#address_error").show();
      $("input#address").focus();
      return false;
    }

// Check if City is Blank   
    var city = $("input#city").val();

    if (city == "") {
      $("label#city_error").show();
      $("input#city").focus();
      return false;
    }

// Check if State is Blank  
    var state = $("select#state").val();

    if (state == "") {
      $("label#state_error").show();
      $("select#state").focus();
      return false;
    }

// Check if ZIP Code is Blank   
    var zipcode = $("input#zipcode").val();

    if (zipcode == "") {
      $("label#zipcode_error").show();
      $("input#zipcode").focus();
      return false;
    }

// Check if Phone Number is Blank   
    var phonenumber = $("input#phonenumber").val();

    if (phonenumber == "") {
      $("label#phonenumber_error").show();
      $("input#phonenumber").focus();
      return false;
    }

// Check if Username is Blank   
    var username = $("input#username").val();

    if (username == "") {
      $("label#username_error").show();
      $("input#username").focus();
      return false;
    }

// Check if Password is Blank   
    var password = $("input#password").val();

    if (password == "") {
      $("label#password_error").show();
      $("input#password").focus();
      return false;
    }

// Check if Confirm Password is Blank   
    var confirmpassword = $("input#confirmpassword").val();

    if (confirmpassword == "") {
      $("label#confirmpassword_error").show();
      $("input#confirmpasword").focus();
      return false;
    }

    // Check if Passwords Match

    if (password != confirmpassword) {
      $("label#notmatching_error").show();
      $("input#password").focus();
      return false;
    }

// Check if user picked valid username 
    var restrict = $("input#restrict").val();

    if (restrict == "true") {
      $("label#validuser_error").show();
      $("input#username").focus();
      return false;
    }


    var plan = $("select#plan").val();

        var dataString = 'firstname='+ firstname + 
                         '&lastname=' + lastname +
                         '&address=' + address + 
                         '&city=' + city +
                         '&state=' + state +
                         '&zipcode=' + zipcode +
                         '&phonenumber=' + phonenumber +
                         '&username=' + username +
                         '&password=' + password +
                         '&plan=' + plan;



        //alert(dataString); return false;



$.ajax({

      type: "POST",

      url: "../register_user.php",

      data: dataString,

     success: function() {

        $('#buy_form').html("<div id='message'></div>");

        $('#message').html("<b>Customer Information Logged</b>")

        .append("Hello!")

        .hide()

        .fadeIn(1500, function() {

          $('#message');

        });

      }

     });

    return false;

    });

});

修改

我完全修改了代码以将其分解，现在它正在运行PHP脚本，但即使手动输入，也不会发布变量。

var dataString = 'firstname='+ firstname + 
                         '&lastname=' + lastname +
                         '&address=' + address + 
                         '&city=' + city +
                         '&state=' + state +
                         '&zipcode=' + zipcode +
                         '&phonenumber=' + phonenumber +
                         '&username=' + username +
                         '&password=' + password +
                         '&plan=' + plan; 


$.ajax({
   type: "POST",
   url: "register_user.php",
   data: dataString,
   success: function(){
     alert( "Hello " );
   }

 });

到目前为止，谢谢你的帮助，几乎就在那里。

EDIT2

当我将成功更改为错误时，它会返回给我，这意味着存在http错误。这是什么意思？该页面是因为它成功发布到数据库但信息没有通过？

Answer 1

您是否尝试在此脚本结束时返回true？您还可以明确地添加类似$（“＃myform”）。submit（）作为最后一行

Answer 2

您是否尝试过使用jQuery.post()？我认为$ .ajax最适合用于需要预操作/后操作的时候。

例如。

$.post("../register_user.php", $("#input").serialize(), 
        function(data){ /* etc.. */ });

要做你想做的事情并仍然使用相同的ajax功能，你可以这样做：

$.ajax({
      type: "POST",
      url: "../register_user.php",
      data: $('form :input').serialize(),
      success: function() {
        $('#buy_form').html("<div id='message'></div>");
        $('#message').html("<b>Customer Information Logged</b>")
        .append("Hello!")
        .hide()
        .fadeIn(1500, function() {
          $('#message');
        });
      }
     });

我认为你的字符串有问题。我刚刚使用了你的代码并将ajax选项从成功更改为：错误：它可以工作。

尝试下面的HTML文件，替换你的jquery脚本并查看它是否有效（我将post url更改为名为ok.txt的文本文件只是为了返回一些文本）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery.js" type="text/javascript">
</script>
    <script src="jqueryui.js" type="text/javascript">
</script>
    <script type="text/javascript">
//<![CDATA[
        $(document).ready(function(){
            $('form').submit(function() {
                $.ajax({
                  type: "POST",
                  url: "ok.txt",
                  data: $('form').serialize(),
                  success: function(data) {
                        $('#buy_form').html("<div id='message'><\/div>");
                        $('#message').html("<b>Customer Information Logged<\/b><br/>")
                                .append(data)
                        .hide()
                        .fadeIn(1500, function() {
                          $('#message');
                        });
                    }
                });
                return false;
            });
         });
    //]]>
    </script>
  </head>
  <body>
    <div id="buy_form">
    <form action="javascript:void(0);">
    <div>
      <input name="testInput" type="text" />
      <input type="submit" />
    </div>
  </form>
  </div>
  </body>
</html>

Answer 3

您可以查看firebug - console选项卡或网络标签，看看是否实际进行了ajax调用？你有没有把它上传到某处，我可以测试一下吗？

等一下。我看到你构建数据就像它在查询字符串上一样。但你使用帖子。

试

 var dataString = {firstname : firstname,
                   lastname : lastname,
                    .. repeat like above
                   }

请注意，您可以使用builtin $（'＃formId'）。serialize（）方法。所有表单值都将被发布，我不确定您是否在发布数据中有其他您不想要的值。

例如var dataString = $('#formId').serialize();

jQuery Ajax问题

修改

EDIT2

3 个答案: