[JQuery tutorial] AJAX based on the JQuery framework

A few days ago posted a post, sharing the prototype framework on the AJAX aspects of theLearningProcess. Then someone says that the jquery framework is more convenient.

Just the project is ready to use thickbox, so simply abandon prototype.js, look jquery.js. jquery is really good, a lot smaller than prototype, and more convenient and flexible to use. Some say prototype is like Java, Orthodox, and jquery, like Ruby, is flexible and tends to be more oop.

Small try Ajax, feel more concise than prototype, in jquery, Ajax has three ways to implement: $.ajax (), $.post,$.get ().

XHTML (Main):
<div id= "result" style= "background:orange;border:1px solid red;width:300px;height:400px;" ></div>
<form id= "formtest" action= "" method= "POST" >
<p><span> Enter Name: </span><input type= "text" name= "username" id= "input1"/></p>
<p><span> input Age: </span><input type= "text" Name= "ages" id= "Input2"/></p>
<p><span> Enter Gender: </span><input type= "text" name= "Sex" id= "INPUT3"/></p>
<p><span> input work : </span><input type= "text" name= "job" id= "Input4"/></p>
</form>
<button id= "Send_ajax" > Submit </button>
<button id= "Test_post" >post submit </button>
<button id= "Test_get" >get submit </button>


Js:
1, the introduction of the jquery framework:
<scrīpt type= "text/javascrīpt" src= ". /js/jquery.js "></scrīpt>

2. The advantage of building ajax,jquery is that you don't need to use JS in XHTMLCodeTo trigger the event, it can be encapsulated directly in the JS file:
<scrīpt type= "text/javascrīpt" >
//$.ajax () way
$ (document). Ready (function () {
$ (' #send_ajax '). Click (function () { //The OnClick event is written directly in JS without the need to mix it in XHTML
var params=$ (' input '). Serialize (); //Serializes the value of the form, the same as the Form.serialize () in prototype
$.ajax ({
URL: ' ajax_test.php ', //Background handler
type: ' Post ', //Data send mode
dataType: ' json ', //Accept data format
Data:params, //data to be passed
success:update_page //return function (here is the function name)
               });
});
});
function Update_page (JSON) { //Return functions entity, parameter is Xmlhttprequest.responsetext
var str= "Name:" +json.username+ "<br/>";
str+= "Age:" +json.age+ "<br/>";
str+= "Sex:" +json.sex+ "<br/>";
str+= "work:" +json.job;
$ ("#result"). html (str);
}
//$.post () way:
$ (function () {//$ (document). Ready (shorthand for function () {)
$ (' #test_post '). Click (function () {
$.post (' ajax_test.php ',
{username:$ (' #input1 '). Val (), age:$ (' #input2 '). Val (), sex:$ (' #input3 '). Val (), job:$ (' #input4 '). Val ()},
function (data) {//Postback function
var myjson= ';
Eval (' myjson= ' +data+ '; ');
$ (' #result '). HTML ("Name:" +myjson.username+ "<br/> Work:" +myjson[' job '));
});
});
});
//$.get () way:
$ (function () {
$ (' #test_get '). Click (function () {
$.get (' ajax_test.php ',
{username:$ ("#input1"). Val (), age:$ ("#input2"). Val (), sex:$ ("#input3"). Val (), job:$ ("#input4"). Val ()},
function (data) {
var myjson= ';
Eval ("myjson=" +data+ ";");
$ ("#result"). HTML (myjson.job);
});
});
});
</scrīpt>

<?php
$arr =$_post; //If you send the data in $.get (), change it to $_get. or simply: $_request
$myjson =json_encode ($arr);
Echo $myjson;
?>