jQuery Ajax 实例演示

<
script language=
"javascript"
>
 
$(
document)
.ready
(
function
(
)
{
$(
'#send_ajax'
)
.click
(
function
(
)
{
var
params=
$(
'input'
)
.serialize
(
)
;
//序列化表单的值
$.ajax
(
{
url:
'ajax_json.php'
,
//后台处理程序
type:
'post'
,
//数据发送方式
dataType:
'json'
,
//接受数据格式
data:
params,
//要传递的数据
success:
update_page //回传函数(这里是函数名)
}
)
;
}
)
;
 
//$.post()方式：
$(
'#test_post'
)
.click
(
function
(
)
{
$.post
(
'ajax_json.php'
,
{
username:
$(
'#input1'
)
.val
(
)
,
age:
$(
'#input2'
)
.val
(
)
,
sex:
$(
'#input3'
)
.val
(
)
,
job:
$(
'#input4'
)
.val
(
)
}
,
function
(
data)
//回传函数
{
var
myjson=
''
;
eval
(
'myjson='
+
data +
';'
)
;
$(
'#result'
)
.html
(
"姓名:"
+
myjson.username
+
"<br/>工作:"
+
myjson[
'job'
]
)
;
}
)
;
}
)
;
 
//$.get()方式：
$(
'#test_get'
)
.click
(
function
(
)
{
$.get
(
'ajax_json.php'
,
{
username:
$(
"#input1"
)
.val
(
)
,
age:
$(
"#input2"
)
.val
(
)
,
sex:
$(
"#input3"
)
.val
(
)
,
job:
$(
"#input4"
)
.val
(
)
}
,
function
(
data)
//回传函数
{
var
myjson=
''
;
eval
(
"myjson="
+
data +
";"
)
;
$(
"#result"
)
.html
(
myjson.job
)
;
}
)
;
}
)
;
}
)
;
 
function
update_page (
json)
//回传函数实体，参数为XMLhttpRequest.responseText
{
var
str=
"姓名:"
+
json.username
+
"<br />"
;
str+=
"年龄:"
+
jso