Ajax Based on jquery framework

Ajax Based on jquery framework

I posted a post a few days ago, sharing the prototype framework about AjaxLearningProcess. Some people say that the jquery framework is more convenient.

Just because thickbox is ready for use in the project, we simply discard prototype. js and look at jquery. js. Jquery is really good, it is much smaller than prototype, and it is more convenient and flexible to use. Some people say that prototype is like Java and Orthodox. jquery is like Ruby, which is flexible and tends to be oop.

After testing Ajax, it seems more concise than prototype. In jquery, Ajax has three implementation methods: $. 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> input name: </span> <input type = "text" name = "username" id = "input1"/> </P>
<P> <span> input age: </span> <input type = "text" name = "Age" id = "input2"/> </P>
<P> <span> input Gender: </span> <input type = "text" name = "sex" id = "input3"/> </P>
<P> <span> InputWork: </Span> <input type = "text" name = "job" id = "input4"/> </P>
</Form>
<Button id = "send_ajax"> submit </button>
<Button id = "test_post"> post submission </button>
<Button id = "test_get"> Get submit </button>

JS:
1. Introduce the jquery framework:
<SCR limit PT Type = "text/javascr limit PT" src = "../JS/jquery. js"> </scr limit Pt>

2. The advantage of building Ajax is that JavaScript is not needed in XHTML.Code To trigger the event, which can be directly encapsulated in the JS file:
<SCR limit PT Type = "text/merge Cr limit PT">
// $. Ajax ()
$ (Document). Ready (function (){
$ ('# Send_ajax'). Click (function () {// write The onclick event in JS directly without mixing it in XHTML.
VaR Params = $ ('input'). serialize (); // The value of the serialized form, which is the same as form. serialize () in prototype.
$. Ajax ({
URL: 'ajax _ test. php', // background processing Program
Type: 'post', // data transmission method
Datatype: 'json', // accept the data format
Data: Params, // data to be transmitted
Success: update_page // return Function (Here is Function Name)
});
});
});
Function update_page (JSON) {// returns the function entity. The parameter is XMLHttpRequest. responsetext.
VaR STR = "name:" + JSON. username + "<br/> ";
STR + = "Age:" + JSON. Age + "<br/> ";
STR + = "Gender:" + JSON. Sex + "<br/> ";
STR + = "job:" + JSON. job;
$ ("# Result" example .html (STR );
}
// $. Post () method:
$ (Function () {// $ (document). Ready (function () {abbreviation
$ ('# Test_post'). Click (function (){
$. Post ('ajax _ test. php ',
{Username: $ ('# input1 '). val (), age: $ ('# input2 '). val (), sex: $ ('# input3 '). val (), job: $ ('# input4 '). val ()},
Function (data) {// return Function
VaR myjson = '';
Eval ('myjson = '+ Data + ';');
Certificate ('{result'}.html ("name:" + myjson. username + "<br/> job:" + myjson ['job']);
});
});
});
// $. Get () method:
$ (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" cmd.html (myjson. Job );
});
});
});
</Scr platinum Pt>