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> input job: </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:
<Script type = "text/javascript" src = "../js/jquery. js"> </script>
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:
<Script type = "text/javascript">
// $. 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 );
});
});
});
</Script>
PHP code:
<? Php
$ Arr = $ _ POST; // if you send data in the $. get () mode, change it to $ _ GET. Or simply: $ _ REQUEST
$ Myjson = json_encode ($ arr );
Echo $ myjson;
?>
