- CSS - Cascaded Style Sheets
|
|
AJAX Form POST Request - HTML Form POST/Submit with AJAX/Javascript Example/Tutorial
Also see:
AJAX/Javascript Form GET Request
AJAX/Javascript XML Tips & Tricks
AJAX/Javascript XML Processing Example/Tutorial
Update from visitor "ar200r" - thank you very much
NOTE: It is not possible to make file uploads with AJAX, since Javascript does not have
access to local files! If you want to upload files, you still need to utilize e.g. an
iFrame or submit the form the regular way.
UPDATE: In order to avoid a syntax error in Firefox, if the returned content is NOT valid
XML, use the overrideMimeType method to set the content-type.
// set type accordingly to anticipated content type
//http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
AJAX is the new hype in HTML/Javascript, since Google came up with their nifty GMAIL application.
AJAX allows to write web-applications without reloading/refreshing the page on user interaction (e.g.
posting data to a server-side script). The traditional
way of processing HTML forms was to submit them to the server, the server processed the data and
sent a response. The drawback of this method is that the page was reloaded in the browser.
With AJAX the browser page is not reloading, but the data is just sent to the server for processing.
The server saves the data or calculates something and sends back the answer. The AJAX javascript
either displays the answer (page) or does some action depending on the answer.
This example demonstrates a simple AJAX javascript for POSTing a complete HTML form to the server
and displaying the response. The server-response
is displayed in a "span" - the server-side script is a simple PHP script to display the contents
of the $_POST global variable.
UPDATE:
I've updated the form - now it also works with a normal submit button and also when the user
just presses enter!
Test the whole hack here:
Server-Response:
post.html:
<script type="text/javascript" language="javascript">
var http_request = false;
function makePOSTRequest(url, parameters) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
//http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
//alert(http_request.responseText);
result = http_request.responseText;
document.getElementById('myspan').innerHTML = result;
} else {
alert('There was a problem with the request.');
}
}
}
function get(obj) {
var poststr = "mytextarea1=" + encodeURI( document.getElementById("mytextarea1").value ) +
"&mytextarea2=" + encodeURI( document.getElementById("mytextarea2").value );
makePOSTRequest('post.php', poststr);
}
</script>
<form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform">
<textarea id="mytextarea1">my test
1
2
3
</textarea>
<textarea id="mytextarea2">my test2
4
5
6</textarea>
<br>
<input type="button" name="button" value="Submit"
onclick="javascript:get(this.parentNode);">
<input type="submit" name="button" value="Normal Submit Button">
</form>
<br><br>
Server-Response:<br>
<hr>
<span name="myspan" id="myspan"></span>
<hr>
post.php
<?
print_r($_POST);
?>
Update from visitor "ar200r" - thank you very much
if we use "&" character it wont work...
but if we use escape();
var poststr = "mytextarea1=" + escape(encodeURI(
document.getElementById("mytextarea1").value )) +"&mytextarea2=" +
escape(encodeURI( document.getElementById("mytextarea2").value ));
and next in php u use urldecode , it will work good.
Last-Modified: Thu, 12 Jul 2007 16:57:57 GMT
|
|
