Ajax POST
Given a form with , an input field for searching. q is the variable that contains the search query. Below is a function that would run on onClick or any other event.
When jQuery sends back the response, normally I would catch it with responseText or responseXML, but with jQuery you can send any of the following,
- xml: Returns a XML document that can be processed via jQuery.
- html: Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.
- script: Evaluates the response as JavaScript and returns it as plain text. Disables caching unless option "cache" is used. Note: This will turn POSTs into GETs for remote-domain requests.
- json: Evaluates the response as JSON and returns a JavaScript Object.
- jsonp: Loads in a JSON block using JSONP. Will add an extra "?callback=?" to the end of your URL to specify the callback. (Added in jQuery 1.2)
- text: A plain text string.
http://docs.jquery.com/Ajax/jQuery.ajax#options »
Below, I've use the text response which just sends back what ever ajax.php returns in plain text. I always send a response back with the print() function.
In the success portion, I set the division with the output of ajax.php using the html() method. It's similar to innerHTML except you don't use an equals sign.
function search_bookmarks(id)
{
var q = $('input#q').val();
$.ajax({
type: "POST",
url: "ajax.php",
data: "action=search&q=" + q,
success: function(text){
$('div#search_results').html(text);
}
});
}
[Click to add or edit comments])
Please prepend comments below including a date