代码之家  ›  专栏  ›  技术社区  ›  Chris Bier

jQuery Ajax问题

  •  0
  • Chris Bier  · 技术社区  · 17 年前

    我正在使用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 " );
       }
    
     });
    

    谢谢你一直以来的帮助,几乎到了。

    3 回复  |  直到 17 年前
        1
  •  1
  •   Joseph Yaduvanshi    17 年前

    你试过用吗 jQuery.post()

    如。

    $.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');
            });
          }
         });
    

    <!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>
    
        2
  •  1
  •   Bostone    17 年前

        3
  •  0
  •   redsquare    17 年前

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

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

    注意,你可以使用内置的$('#formId').serialize()方法。所有表单值都将被发布,我不确定您是否在发布数据中有其他不想要的值。

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