学习ajax操作的文章(二)-数据传输

请求数据

我们可以使用GET和邮政两种方式向后端请求数据。以PHP为例,假设测试页age.php用于返回年龄信息。


如果(isset($ _request { 'name' }){ $ _request 'name' } = =斯蒂芬){
'23的回声;
}


当前页的内容是:



史蒂芬
年龄:






我们想点击标签,在不刷新页面的情况下获取年龄信息:

获取模式


$(A)。Click(function(e){
(e.preventDefault); / /
var url = $(this)。Attr('href),
name = $(this),
requestdata = { 'name':名称};

美元。得到(URL,requestdata,功能(数据){)
$(#性')Html(数据);
});
});


单击标签后,当前页为:



数据请求是成功的。

后模式


$(A)。Click(function(e){
(e.preventDefault); / /
var url = $(this)。Attr('href),
name = $(this),
requestdata = { 'name':名称};

美元。后(URL,requestdata,功能(数据){)
$(#性')Html(数据);
});
});


代码几乎相同,只是从get方法改为POST方法。

在这里,我们实际上可以用加载方法简化代码:


$(A)。Click(function(e){
E.preventDefault();
var url = $(this)。Attr('href),
name = $(this),
requestdata = { 'name':名称};

$(#性)负载(URL,requestdata);
});


发送数据

除了使用Ajax技术从后端获取数据外,它还可以向后端发送数据,后者通常是异步提交给表单的。下面是用户验证示例。



用户名:
密码:






如果用户名和密码是123456 stephenlee,验证通过,否则测试页validate.php是:


如果($ _request { } = = 'stephenlee 'username_request美元{ 'password} = =为123456){
echo'pass;
{人}
echo'fail;
}


使用get将数据发送到后端验证:


$(‘形')。提交(功能(e){
(e.preventDefault); / /
var url = $(this)。Attr(整套的),
用户名= $(用户名输入{名称=)(。Val),
密码= $(密码输入{名称=)(。Val),
requestdata = { 'username:用户名,密码'password:};

美元。得到(URL,requestdata,功能(结果){)
警报(结果);
});
});


输入错误的用户名卢卡斯后,结果是:



输入正确的用户名stephenlee之后,结果是:



用邮政方式发送数据的想法也不再被描述了。