Возвращение данных JSON из файла PHP с использованием jQuery

Question

Долгосрочный читатель, первый раз постер. Я очень новичок в мире jQuery и JSON и вижу проблему с скриптом входа, который я запускаю.

Конечная цель - захватить данные из формы, передать эти данные в файл PHP для обработки через jQuery.ajax() post, сравнить данные с базой данных MySQL для аутентификации и вернуть данные для успеха отказ.

Моя проблема заключается в том, что я не могу передать форматированные данные JSON из PHP-скрипта обратно в jQuery. При просмотре обработки с помощью инструментов разработчика Chrome я вижу, что «Ошибка входа». Я дважды проверил массив $ rows, перебросив его в файл error_log, и он возвращает правильно отформатированный JSON, но я просто не могу на всю жизнь заставить его вернуться в файл jQuery. Любая помощь приветствуется.

Моя форма ввода:

<!-- BEGIN: Login Page --> 
    <section data-role="page" id="login"> 
     <header data-role="header" data-theme="b"> 
      <a href="#landing" class="ui-btn-left">Back</a> 
     <h1>Please Log In</h1> 
     </header> 
     <div data-role="content" class="content" data-theme="b"> 
      <form id="loginForm" action="services.php" method="post"> 
       <div data-role="fieldcontain"> 
        <label for="schoolID">School ID</label> 
        <input type="text" name="schoolID" id="schoolID" value="" /> 

        <label for="userName">Username</label> 
        <input type="text" name="userName" id="userName" value="" /> 

        <label for="password">Password</label> 
        <input type="password" name="password" id="password" value="" /> 

        <h3 id="notification"></h3> 
        <button data-theme="b" id="submit" type="submit">Submit</button> 
      <input type="hidden" name="action" value="loginForm" id="action"> 
       </div> 
      </form> 
     </div> 
     <footer data-role="footer" data-position="fixed" data-theme="b"> 
      <h1>Footer</h1> 
     </div> 
    </section> 
    <!-- END: Login Page --> 

Мой JQuery Handler:

// Listen for the the submit button is clicked, serialize the data and send it off 
    $('#submit').click(function(){ 
     var data = $("#loginForm :input").serializeArray(); 
    var url = $("#loginForm").attr('action'); 

    $.ajax({ 
     type: 'POST', 
     url: url, 
     cache: false, 
     data: data, 
     dataType: 'json', 
      success: function(data){ 
      $.ajax({ 
       type: 'GET', 
       url: "services.php", 
       success: function(json){ 
       alert(json); 
       $('#notification').append(json); 
       } 
      }); 
      } 
     }); 
    }); 

И вот моя обработка PHP:

if (isset($_POST['action'])) { 
    $schoolID = $_POST['schoolID']; 
    $userName = $_POST['userName']; 
    $password = $_POST['password']; 

    $sql = "SELECT FirstName, LastName, FamilyID, StudentID, UserID "; 
    $sql .= "FROM Users "; 
    $sql .= "WHERE SchoolID = '$schoolID' "; 
    $sql .= "AND Username = '$userName' "; 
    $sql .= "AND Password = '$password'"; 
    $rs = mysql_query($sql); 

    $rows = array(); 
    while($row = mysql_fetch_array($rs, MYSQL_ASSOC)) { 
     $row_array['firstName'] = $row['FirstName']; 
     $row_array['lastName'] = $row['LastName']; 
     $row_array['familyID'] = $row['FamilyID']; 
     $row_array['studentID'] = $row['StudentID']; 
     $row_array['userID'] = $row['UserID']; 
     array_push($rows, $row_array); 
    } 

    header("Content-type: application/json", true); 
    echo json_encode(array('rows'=>$rows)); 
    exit; 

    }else{ 

    echo "Login Failure"; 
    } 

Answer 1

Посмотрите, что ошибка, которую вы делаете здесь, это очень просто

$.ajax({ 
    type: 'POST', 
    url: 'services.php', 
    cache: false, 
    data: $('#loginForm').serialize(), 
    dataType: 'json', 
     success: function(data){ 
      alert(data); 
      $('#notification').append(data); 
     } 
    }); 
}); 

Использование сериализации функция JQuery.И когда у вас есть параметр в функции успеха это не то, что «данные» вы имеете в этой инструкции

data : data, 

Он возвращается из PHP конец это новые данные, возвращаемые на успех. Чтобы избежать конфликтов, используйте что-то еще, как new_data

success: function(new_data){ 
     alert(new_data); 
     $('#notification').append(new_data); 
    } 

Новые данные в формате json проверяют его. Используйте console.log, чтобы увидеть в firebug, если вы используете firefox.

success: function(new_data){ 
     console.log(new_data); 
     alert(new_data); 
     $('#notification').append(new_data); 
    } 

Answer 2

Попробуйте изменить:

var data = $("#loginForm :input").serializeArray(); 

к:

var data = $("#loginForm").serialize(); 

Это должно работать, как я уверен, что «данные» в запросе .ajax должен быть сериализованная строка, serializeArray возвращает массив объекты.

http://api.jquery.com/serialize/

http://api.jquery.com/serializeArray/

EDIT 1:

Это выглядит как проблема события пузырится. Попробуйте следующее:

Изменить свой JavaScript для:

function processForm(formObj) { 
    var $form = $(formObj); 
    var data = $form.serializeArray(); 
    var url = $form).attr('action'); 

    $.ajax({ 
     type: 'POST', 
     url: url, 
     cache: false, 
     data: data, 
     dataType: 'json', 
     success: function(data){ 
      $('#notification').append(data); 
     } 
    }); 

    return false; 
} 

И ваша форма:

<form id="loginForm" action="services.php" method="post" onsubmit="return processForm(this)"> 
    <div data-role="fieldcontain"> 
     <label for="schoolID">School ID</label> 
     <input type="text" name="schoolID" id="schoolID" value="" /> 

     <label for="userName">Username</label> 
     <input type="text" name="userName" id="userName" value="" /> 

     <label for="password">Password</label> 
     <input type="password" name="password" id="password" value="" /> 

     <h3 id="notification"></h3> 
     <button data-theme="b" id="submit" type="submit">Submit</button> 
     <input type="hidden" name="action" value="loginForm" id="action"> 
    </div> 
</form> 

Answer 3

Простой ответ: ошибки пользователя. Я действительно не понял концепцию функции getJSON(). Он предназначен для отправки данных в PHP-скрипт, а также для обработки возвращаемых данных об успехе. Я предположил, что для получения информации потребуется одна функция для отправки информации и одна функция.

Спасибо за вашу помощь!