jquery and Ajax Simple examples
Ajax based on the jquery framework
PS: I This article originated in Phpchina, found by a lot of people turned, but did not specify the source, think about it, or turn to come here.
A few days ago posted a post, sharing the prototype framework on the AJAX aspects of the learning process. Then someone says that the jquery framework is more convenient.
Just the project is ready to use thickbox, so simply abandon prototype.js, look jquery.js. jquery is really good, a lot smaller than prototype, and more convenient and flexible to use. Some say prototype is like Java, Orthodox, and jquery, like Ruby, is flexible and tends to be more oop.
Small try Ajax, feel more concise than prototype, in jquery, Ajax has three ways to implement: $.ajax (), $.post,$.get ().
XHTML (Main):
Code: Copying content to Clipboard
<div id= "Result" style= "backgroundrange;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" >ost submit </button>
<button id= "Test_get" >get submit </button>
Js:
1, the introduction of the jquery framework:
Code: Copying content to Clipboard
<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:
Code: Copying content to Clipboard
<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+ "";
str+= "Age:" "+json.age+";
str+= "Sex:" +json.sex+ "";
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+ "
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:
Code: Copying content to Clipboard
<?php
$arr =$_post; If you send the data in $.get (), change it to $_get. or simply _request
$myjson =json_encode ($arr);
Echo $myjson;
?>