JQuery AJAX Get & Post

Mon, 11 Oct 2010

It's old news that you don't need to use all the previous AJAX requirements before with large chunks of code, so I'll not even bring that up again. However, if any of you are confused on how AJAX works, here is a simple demonstration you can do with JQuery.

Here is a simple $.get() request

$("#content").get('page.php', function(data) {
	// place the content from the page.php inside the html, using the data variable.
	$(#content).html(data);
});	

HTML Part:

<div id="content">
This will output whatever is in page.php
</div>

---

What about submitting a form? That's easy too, check it out:

$('#form').submit(function() {

	// By Serializing the form you can use $_POST['fieldName']
	$.post("post_to_page.php", $("#formID").serialize(), function(output) {
		$("#content").html(output);
	});

	return false;
});

The HTML part:

<form id="formID">
	Name: <input type="text" name="name" />

	Age: <input type="text" name="age" />

	Other: <input type="text" name="other" />

	<input type="submit" />
</form>

<div id="content">

</div>

Still confused? I made a JQuery AJAX POST video tutorial to walk you through it on youtube also, Check it out