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. Construct AJAX. The advantage of JQUERY is that it does not need to use JS Code in XHTML to trigger events. It can be directly encapsulated in JS files:
<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 Handler
Type: 'post', // data transmission method
DataType: 'json', // accept the data format
Data: params, // data to be transmitted
Success: update_page // return function (function name here)
});
});
});
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>
PHPCode:
<? Php
$ Arr = $ _ POST; // if you send data in the $. get () mode, change it to $ _ GET. Or simply: $ _ REQUEST
$ Myjson = json_encode ($ arr );
Echo $ myjson;
?>