Returning JSON data from a PHP file using jQuery

Question

Long time reader, first time poster. I am very new to the jQuery and JSON world and see a problem with the script login name. I am working.

The ultimate goal is to capture data from the form, transfer that data to a PHP file for processing through the jQuery.ajax () post, compare the data with the MySQL database for authentication, and return the data for success failure.

My problem is that I cannot get formatted JSON data from a PHP script back in jQuery. When viewing processing using the Chrome developer tools, I see a "Login Error". I double-checked the $ rows array, throwing it into the error_log file, and it returns correctly formatted JSON, but I just can't get it to return to the jQuery file for life. Any help is appreciated.

My form input:

<!-- 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 --> 

My 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); } }); } }); }); 

And here is my PHP processing:

 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

See what mistake you make here, it's very simple.

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

Use the jquery serialization function. And when you have a parameter in the function of success, it’s not what “data” you have in this instruction

 data : data, 

It returns from the end of php, this is the new data received on successful completion. To avoid conflicts, use something else like new_data p>

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

New data in json format is checked. Use console.log to see in firebug if you are using firefox.

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

Answer 2

Try changing:

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

in

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

This should work, as I am sure that the "data" in the .ajax request should be a serialized string, serializeArray returns an array of objects.

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

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

EDIT 1:

It looks like an event bubble problem. Try the following:

Change your javascript to:

 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; } 

And your form:

 <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

Simple answer: user error. I really did not understand the concept of the getJSON () function. It is designed to send data to a PHP script, as well as to process returned data on successful execution. I suggested that to receive information, one function will be required to send information and one function.

Thanks for your help!