<HTML>
<Head>
<Title> jquery Ajax instance demonstration </title>
</Head>
<Script language = "JavaScript" src = "../lib/jquery. js"> </SCRIPT>
<Script language = "JavaScript">
$ (Document). Ready (function ()
{
$ ('# Send_ajax'). Click (function (){
VaR Params = $ ('input'). serialize (); // serialized form value
$. Ajax ({
URL: 'ajax _ JSON. 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)
});
});
// $. Post () method:
$ ('# Test_post'). Click (function (){
$. Post (
'Ajax _ JSON. 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:
$ ('# Test_get'). Click (function ()
{
$. Get (
'Ajax _ JSON. php ',
{
Username: $ ("# input1"). Val (),
Age: $ ("# input2"). Val (),
Sex: $ ("# input3"). Val (),
Job: $ ("# input4"). Val ()
},
Function (data) // return Function
{
VaR myjson = '';
Eval ("myjson =" + Data + ";");
$ ("# Result" cmd.html (myjson. Job );
}
);
});
});
Function update_page (JSON) // return 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 + "<br/> ";
STR + = "APPEND test:" + JSON. append;
$ ("# Result" example .html (STR );
}
</SCRIPT>
<Body>
<Div id = "result" style = "Background: orange; Border: 1px solid red; width: 300px; Height: 200px;"> </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>
</Body>
</Html>
PHP file ajax_json.php:
<? PHP
// $ Arr = $ _ post; // if you send data in the $. Get () mode, change it to $ _ Get. Or simply: $ _ Request
$ Arr =$ _ request;
$ Arr ['append'] = 'test string ';
// Print_r ($ ARR );
$ Myjson = my_json_encode ($ ARR );
Echo $ myjson;
Function my_json_encode ($ phparr)
{
If (function_exists ("json_encode "))
{
Return json_encode ($ phparr );
}
Else
{
Require_once 'json/JSON. Class. php ';
$ JSON = new services_json;
Return $ JSON-> encode ($ phparr );
}
}
?>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
