搜索
系统检测到您的用户名不符合规范:

关于ajax的一些简单介绍。

浏览:13774 发布日期:2013年11月30日 分类:技术分享 关键字: ajax php js
我最近在整理一些相关的东西,还不够完善,如果有机会会发个帖出来。
希望对你们有所帮助。

ajax的意义,在于在页面无刷新的情况下实现数据或者表单的提交,那么我们首先需要实现对于点击事件的处理。

点击事件的处理$('a.post_form').live('click', function ()
{
$.ajax(
{
type : "post",
url : "www.xxxx.com",
success : function (json)
{
if (json.status == 1) {
alert(json.info);
}
}
});
return false;
});
每个点击事件最后要加上return false,特别是a标签,可以阻止a标签跳转,这样才能实现ajax的提交。

jquery相关的知识:

$.get; $.get("aaaa.php", { action:"get",name:"lulu" },
function(json){
alert(json.info);
});
$.post;

$.post("aaaa.php", { action:"post",name:"lulu" },
function(json){
alert(json.info);
});
$.get和$.post基本没有什么不同,只是前者的type为get,后者的type为post。

PHP接收数据时,前者通过$_GET来获取传递的值,比如$_GET['name'],后者通过$_POST来获取,
另外,PHP 的 $_REQUEST 变量可用来取得通过 GET 和 POST 方法发送的数据的结果。

$.ajax;

$.ajax的简单写法:$.ajax({
type: "post",
url: "www.xxxx.com",
data: "?id=1&name=你好",
beforeSend: function(XMLHttpRequest){

},
success: function(data, textStatus){

}
});
beforeSend的作用:提交前的判断,比如不能为空。
success:提交成功的提示。
dataType:多种数据格式,没有太多研究。

jquery自带的载入页面的函数:

load();

载入一个页面:
$("#result").load("aaaa.php");
只加载id为ccc的部分网页内容,可以用来实现ajax无刷新分页:
$("#result").load("aaaa.php #ccc");
后台程序的处理:

php:

最简单的json返回方法:
echo "1"; //此时前端 json=1;

高级的json返回方法:
json_encode($date);//此时前端 json=$date(只是意思哈);非常有用,可以自定义json的结构。

thinkphp:

$this->ajaxReturn('', '操作成功', 1)返回的值是这样的{data: "", info: "操作成功",status: 1}。

3.1版本的$this->success('操作成功!')和$this->error('写入错误!')返回的样式是这样的:{info: "操作成功",status: 0 ,url: ""},只不过status都为0。(太久没接触了,恍如隔世,待测试)

3.2版本的success返回的值中status =1 ,方便很多。


代码示例:

借用haran的代码。

前端代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入jquery -->
<script>
$(function(){
var ajaxUrl = Document.URL;
var title = $("#title").val();
$("#submit").click(function(){
$.post(ajaxUrl,{'title':title},function(json){
if(json.status == 1){
$("#result").html(json.data);
}else{
alert(json.info);
}
},dataType:'json');
});
})
</script>
</head>
<body>
<form action="">
<input type="text" name="title" id="title" />
<span id="submit">提交</span>
</form>
<div id="result"></div>
</body>
</html>
只要php有返回值,那么json就会存在,那么就会触发success。
那么json.status才是判断php是否操作成功的依据。

后台代码
public function test () {
if( IS_POST ) {
$title = I('title', '', 'htmlspecialchars');
$this->ajaxReturn($title, '成功', 1);
} else {
$this->display();
}
}
$this->ajaxReturn($data,'信息',1)
中的三个元素依次是data,info,status。

那么在js中,就依次是json.data,json.info,json.status。
如果$data是数组,那么js中相应的就是:json.data.id,json.data.name,......。

个人建议:
很多插件也会用ajax加载数据,那么需要你的数据输出和插件要求符合的json结构,我推荐使用谷歌浏览器,使用开发者工具可以查看json的返回格式,相当有用。


PS:排版好难!






最佳答案
评论() 相关
后面还有条评论,
评论支持使用[code][/code]标签添加代码
您需要登录后才可以评论 登录 | 立即注册
收藏
zzggjjzgj
积分:4634 等级:LV4
热点推荐
(追記) (追記ここまで)
最新更新

我们

合作

网站

信息

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。

AltStyle によって変換されたページ (->オリジナル) /