JQuery Ajax проблема

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;

    });

});

EDIT

Я полностью переработал код, чтобы разбить его, и теперь он запускает скрипт 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

вы пытались использовать 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-скрипты, и посмотрите, работает ли он (я изменил 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 2

Вы пытались вернуть true в конце этого скрипта? Вы также можете явно указать что-то вроде $ ("# myform"). Submit () как последняя строка

Answer 3

Можете ли вы проверить в firebug - вкладку консоли или вкладку net, чтобы увидеть, действительно ли сделан вызов ajax? Вы загрузили это куда-нибудь, чтобы я мог проверить?

Подожди минутку. Я вижу, как вы собираете данные, как если бы они были в строке запроса. Но вы используете пост.

попробовать

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

Обратите внимание: вы можете просто использовать встроенный метод $ ('# formId'). Serialize (). Все значения формы будут опубликованы, и я не уверен, что у вас есть другие значения, которые вам не нужны в данных публикации.

например var dataString = $('#formId').serialize();