Here's the whole code:
<HTML>
<title>jquery Ajax Example Demo </title>
</Head>
<script language= "JavaScript"src= "Jquery.js" ></script>
<script language= "JavaScript">
$ (document). Ready (function ()
{
$ (' #send_ajax '). Click (function () {
var params=$ (' input '). Serialize (); Serialize the value of the form
$.ajax ({
ckeditor/"Target= "_blank" >fckeditor/editor/'Ajax_json.php ' ">url: ' ajax_json.php ',//Background handler
Type: ' Post ',//Data sending method
DataType: ' json ',//Accept data format
Data:p Arams,//data to be passed
Success:update_page//Return functions (here is the function name)
});
});
$.post () Mode:
$ (' #test_post '). Click (function () {
$.post (
' Ajax_json.php ',
{
username:$ (' #input1 '). Val (),
age:$ (' #input2 '). Val (),
sex:$ (' #input3 '). Val (),
job:$ (' #input4 '). Val ()
},
function (data)//backhaulfunction
{
var myjson= ';
Eval (' myjson= ' + data + '; ');
$ (' #result ').HTML("Name:" + myjson.username + "<br/> Work:" + myjson[' job ']);
}
);
});
$.get () Mode:
$ (' #test_get '). Click (Function ()
{
$.get (
‘Ajax_json.php ',
{
username:$ ("#input1"). Val (),
age:$ ("#input2"). Val (),
sex:$ ("#input3"). Val (),
job:$ ("#input4"). Val ()
},
function (data)//callback functions
{
var myjson= ';
Eval ("myjson=" +Data+ ";");
$ ("#result"). HTML (myjson.job);
}
);
});
});
function Update_page (JSON)//callbackfunctionEntity, parameter is Xmlhttprequest.responsetext
{
var str= "Name:" +json.username+ "<br/>";
str+= "Age:" +json.age+ "<br/>";
str+= "Gender:" +json.sex+ "<br/>";
str+= "Work:" +json.job+ "<br/>";
str+= "Additional test:" +json.append;
$ ("#result").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> 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> input 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>
</body>
</HTML>
PHP file Ajax_json.php:
<?php
$arr = $_post; If you are sending data in $.get (), change 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);
}
}
?>
The above is the original: Very good, the following is my actual application of an example.
It just used to be.$.get () This paragraph is used to click on an action in the information list to change the status of an article (audit, recommendation, and so on).
$.get () Mode:
$ ('. Test_get '). Click (function () {
var data_id = $ (this). attr ("Data-id");
var id = $ (this). attr ("id");
var typename = $ (this). attr ("name");
var data_value_id = $ (this). attr ("Data-value");
if (data_value_id==1) {
var data_id_local = 0;
var data_check = ' No <i class= ' icon-remove ' ></i> ';
}else{
var data_id_local = 1;
var Data_check = ' is <i class= ' icon-ok ' ></i> '; }
$ (' # ' +id). attr ("Data-value", data_id_local);
$ (' # ' +id). html (Data_check);
$.get (
' ajax_json.php ',//This person file can receive the following three parameters, can write multiple, the last one do not take ","; $_get[' data_id ')
{
DATA_ID:DATA_ID,
DATA_VALUE_ID:DATA_VALUE_ID,
Typename:typename
},
function (data)//callback functions
{
This piece did not do return value processing, feeling a little slow, directly on the top of processing,
}
);
});
<tr class= "Gradex" >
<td>66</td>
<TD data-value= "1" data-id= "name=" Isindex "class=" Test_get "title=" Click Change Status "id=" isindex66 "> Yes <i class=" Icon-ok "></i></td>
<TD data-value= "1" data-id= "name=" Isnav "class=" Test_get "title=" Click Change Status "id=" isnav66 "> Yes <i class=" Icon-ok "></i></td>
<td>
<a href= "#" > and Xuan Cleansing Cream [and Xuan Cleansing Cream]</a></td>
<td>2015-09-1 00:00:00</td>
<TD class= "center" >
<a href= "#" class= "btn" > Edit </a>
<a href= "#" class= "btn" > Delete </a>
</td>
</tr>
<tr class= "Gradex" >
<td>59</td>
<TD data-value= "0" data-id= "name=" Isindex "class=" Test_get "title=" Click Change Status Id= "isindex59" > No <i class= " Icon-remove "></i></td>
<TD data-value= "1" data-id= "name=" Isnav "class=" Test_get "title=" Click Change Status "id=" isnav59 "> Yes <i class=" Icon-ok "></i></td>
<td><a href= "#" > "Wet Cream" effect ["wet-clear cream" effect]</a></td>
<TD >2015-09-1 00:00:00</td>
<TD class= "center" >
<a href= "#" class= "btn" > Edit </a>
<a href= "#" class= "btn" > Delete </a>
</td>
</tr>
PHP uses jquery to do AJAX operations