jQuery AJAX
Send AJAX requests with this jQuery script.
HTML
<script src="http://fonts.googlepis.com/css?famaily=Open+Sans:400,700"></script>
<form method="post" action="/echo/html/" ajax="true">
<span id="result"><a href="http://wp.me/p2O9K2-b">jQuery + AJAX form submit script.</a></span>
<span>
<label>Message: </label>
<input type="text" name="html" placeholder="Howdy..." />
</span>
<span>
<label><img id="loadingimg" src="http://dev.cloudcell.co.uk/bin/loading.gif"/> </label>
<input type="submit" value="Submit" />
</span>
</form>
CSS
body{
font-family: 'Open Sans', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 13px;
}
form span{
display: block;
margin: 10px;
}
label{
display: inline-block;
width: 100px;
}
input[type="text"]{
border: 1px soild #ccc;
width: 200px;
padding: 5px;
}
input[type="submit"]{
padding: 5px 15px;
}
span#result{
padding: 5px;
background: #ff9;
}
img#loadingimg{
display: none;
}
JavaScript
$(document).ready(function(e) {
var myAJAX = function () {
};
$("form[ajax=true]").submit(function(e) {
e.preventDefault();
var form_data = $(this).serialize();
var form_url = $(this).attr("action");
var form_method = $(this).attr("method").toUpperCase();
var http = new XMLHttpRequest();
var url = form_url;
var params = 'name=command&arg=ooooops';
http.open("POST", url, true);
//Send the proper header information along with the request
http.setRequestHeader("content-type", "application/x-www-form-urlencoded; charset=UTF-8");
// http.setRequestHeader("Content-length", params.length);
// http.setRequestHeader("Connection", "close");
http.setRequestHeader('accept', 'application/json, text/javascript, */*; q=0.01');
// http.setRequestHeader('Cookie', 'sysauth=e1ccfb2b669dbf2e1c5d572aea9a6a4c');
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(params);
});
});