jquery and Ajax Simple examples

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;

?>