Hi guys,
I'm testing a
jQuery ajax post method on a local Apache 2.2 server with PHP 5.3 (totally new at this). Here are the files, all in the same folder.
html body (jQuery library included in head):
<form id="postForm" method="post">
<label for="name">Input Name</label>
<input type="text" name="name" id="name" /><br />
<label for="age">Input Age</label>
<input type="text" name="age" id="age" /><br />
<input type="submit" value="Submit" id="submitBtn" />
</form>
<div id="resultDisplay"></div>
<script src="queryRequest.js"></script>
queryRequest.js
$(document).ready(function(){
$('#s').focus();
$('#postForm').submit(function(){
var name = $('#name').val();
var age = $('#age').val();
var URL = "post.php";
$.ajax({
type:'POST',
url: URL,
datatype:'json',
data:{'name': name ,'age': age},
success: function(data){
$('#resultDisplay').append("Value returned.<br />name: "+data.name+" age: "+data.age);
},
error: function() {
$('resultDisplay').append("ERROR!")
}
});
});
});
post.php
<?php
$name = $_POST['name'];
$age = $_POST['age'];
$return = array('name' => $name, 'age' => $age);
echo json_encode($return);
?>
After inputting the two fields and pressing 'Submit', the success method is called, text appended, but the values returned from ajax post are undefined.
And then after less than a second, the text fields are emptied, and the text appended to the div is gone. Doesn't seem like it's a page refresh, though, since there's no empty page flash.
What's going on here? I'm sure it's a silly mistake but Firebug isn't telling me anything.
