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:
<script type= "Text/javascript" src= ". /js/jquery.js "></script>
2, the advantage of building ajax,jquery is that you do not need to use the JS code in XHTML to trigger events, you can directly package in the JS file:
<script type= "Text/javascript" >
$.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 (); The value of the serialized form is 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 functions (here is the name of the function)
});
});
});
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 (The 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 functions
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);
});
});
});
</script>
PHP Code:
<?php
$arr =$_post; If you send the data in $.get (), change it to $_get. or simply: $_request
$myjson =json_encode ($arr);
Echo $myjson;
?>
