thinkphp关于ajax的介绍
1.1 ajaxReturn:
Thinkphp 的ajaxReturn很好用,尤其是配合前端的jQuery
\Think\Controller类提供了ajaxReturn方法用于AJAX返回数据给客户端(视图、模板、js等)。并且支持JSON、JSONP、XML和EVAL四种方式给客户端接受数据(默认JSON)。
配置方式:convention.php中定义了默认编码类型为DEFAULT_AJAX_RETURN => 'JSON',
分析:ajaxReturn()调用了json_encode()将数值转换成json数据存储格式,常用的数值是数组。
注意:The value being encoded can be any type except a resource(资源文件).All string data must be UTF-8 encoded.
举例:
$data['status'] = 1;
$data['content'] = 'content';
$this->ajaxReturn($data);
在js中把数据发送到服务器, 保存一些数据到服务器上, 一旦请求完成就通知用户。 如果请求失败,则提醒用户。
想要将表单数据提交到后台,需要先从表单获取数据/数据集
serialize和serializeArray的区别是serialize()获取到序列化的表单值字符串,serializeArray()以数组形式输出序列化表单值。举例:
var serialize_string=$('#form').serialize();
得到:a=1&b=2&c=3&d=4&e=5
var serialize_string_array=$('#form').serializeArray();
得到:
[
{name: 'firstname', value: 'Hello'},
{name: 'lastname', value: 'World'},
{name: 'alias'}, // 值为空
]
相对来说,serializeArray()和最终想要得到的json数组更加相似。只不过需要将包含多个name-value形式json对象的json数组改写成'first_name':'Hello'形式的json对象。
js与json
2.2.1 json是什么:
JSON:JavaScript 对象表示法(JavaScript Object Notation)。是独立于语言之外的存储和交换文本信息的语法。
2.2.2 json和ajax的关系?
在上面关于jquery.ajax的介绍中提到了,json可以作为一个ajax函数的dataType,这样数据就会通过json语法传输了。
在jquery的ajax函数中,只能传入3种类型的数据:
>1.json字符串:"uname=alice&mobileIpt=110&birthday=1983-05-12"
>2.json对象:{uanme:'vic',mobileIpt:'110',birthday:'2013-11-11'}
>3.json数组:
[
{"name":"uname","value":"alice"},
{"name":"mobileIpt","value":"110"},
{"name":"birthday","value":"2012-11-11"}
]
样例代码
使用异步在收到后台返回数据的时候,交给js代码处理,返回json流,那么后台的重定向就进入了流里面,而不会刷新出页面,只能通过收到的相应看到页面信息。
整个过程是:
1.在php中编写页面中的表单、提交按钮等;
2.在js中对php中的按钮事件添加校验和触发函数,在js函数内,如果js对象的格式和内容正确就向控制器url(php中初始化)发起ajax请求;
3.控制器中的相应操作响应ajax请求,并判断数据后做数据库读写操作,然后对数据库操作结果做出判断,ajaxReturn返回js需要的数组;
4.当ajax成功返回时,js中ajax的success里面使用js重写(或初始化)需要显示的信息。
这样就完成了ajax异步局部刷新。
提交表单的时候,不建议用$.submit函数,导致重复提交或jquery失效!具体原因我也没弄明白。用click事件触发然后用$.ajax提交,在逻辑上更简单清晰,所以why not?
jquery提交之后,success 或者error都失效了,必须使用ajaxReturn.
Index.html
$('.submit').click(function(event){
//阻止表单默认提交事件
event.preventDefault();
var userName=$("#user_name").val();
var userPassword=$("#user_password").val();
if(userPassword==""||userName==""){
alert('登录名与密码不能为空 ');
$("#user_name").focus();
return false;
}else{
var url = "{U('Admin/Login/check')}";
$.post(url, { user_name:userName, user_password:userPassword}, function(msg){
if(msg.info == 'ok') {
//alert('登录成功,正在转向后台主页!');
window.location.href = msg.callback;
} else {
alert(msg.info);
}
}, 'json').error(function(){
alert("网络连接错误,请稍后再试");
});
}
})
IndexController
//ajax检验管理员登录是否正确
public function check()
{
$user = M('User');
if(!IS_AJAX){
$data = array(
'info' => '非法访问方式'
);
}
$user_name = I('user_name', '');
$user_password = I('user_password', '');
$user_password = md5($user_password);
$filter = array(
'user_name' => $user_name,
'user_password' => $user_password
);
$user_info = $user->where($filter)->find();
if (1 == $user_info['type']) {
$this->ajaxReturn(array(
'info' => '你无权登录后台' ));
}
if($user_info){
// 更新登录ip
$info['ip'] = get_client_ip();
//更新登录时间
$info['update_time'] = date('Y-m-d H:i:s', time());
$user->where(array('id' => $user_info['id']))->save($info);
session('user_id',$user_info['id']);
$data = array(
'info' => 'ok',
'callback' => U('admin/index/index')
);
}else{
$data = array(
'info' => '登录失败,请检查登录名和密码是否正确'
);
}
$this->ajaxReturn($data);
}
如果你返回的json数据带有NULL/小红点,那么json校验就会报错,导致数据展示异常(原因是utf8 bom头的问题)。
解决办法,就是在你php后端文件,ajaxreturn输出的前面加一个ob_clean()函数。 ob_clean(); echo json_encode($obj); 或者
将controller.php 编码改为utf8
或者
干脆直接重新创建了一个
Action类提供了ajaxReturn方法用于AJAX调用后返回数据给客户端。并且支持JSON、XML和EVAL三种方式给客户端接受数据,通过配置DEFAULT_AJAX_RETURN进行设置,默认配置采用JSON格式返回数据,在选择不同的AJAX类库的时候可以使用不同的方式返回数据。 要使用ThinkPHP的ajaxReturn方法返回数据的话,需要遵守一定的返回数据的格式规范。ThinkPHP返回的数据格式包括: status 操作状态
info 提示信息
data 返回数据 $this->ajaxReturn(返回数据,提示信息,操作状态); 返回数据data可以支持字符串、数字和数组、对象,返回客户端的时候根据不同的返回格式进行编码后传输。如果是JSON格式,会自动编码成JSON字符串,如果是XML方式,会自动编码成XML字符串,如果是EVAL方式的话,只会输出字符串data数据,并且忽略status和info信息。
下面是一个简单的例子:
$User=M("User");//实例化User对象
$result = $User->add($data);
if ($result){ //成功后返回客户端新增的用户ID,并返回提示信息和操作状态
$this->ajaxReturn($result,"新增成功!",1);
}else{ //错误后返回错误的操作状态和提示信息
$this->ajaxReturn(0,"新增错误!",0);}
$data['status'] = 1;
$data['info'] = 'info';
$data['size'] = 9;$data['url'] = $url;
$this->ajaxReturn($data,'JSON');
thinkphp源代码:
/*** Ajax方式返回数据到客户端*
@access protected*
@param mixed $data 要返回的数据*
@param String $type AJAX返回数据格式*
@return void*/
protected function ajaxReturn($data,$type='') {
if(func_num_args()>2) {// 兼容3.0之前用法
$args = func_get_args();
array_shift($args);
$info = array();
$info['data'] = $data;
$info['info'] = array_shift($args);
$info['status'] = array_shift($args);
$data = $info;
$type = $args?array_shift($args):''; }
if(empty($type)) $type = C('DEFAULT_AJAX_RETURN');
if(strtoupper($type)=='JSON') { // 返回JSON数据格式到客户端 包含状态信息
header('Content-Type:text/html;
charset=utf-8');
exit(json_encode($data));
}elseif(strtoupper($type)=='XML'){ // 返回xml格式数据
header('Content-Type:text/xml; charset=utf-8');
exit(xml_encode($data)); }elseif(strtoupper($type)=='EVAL'){ // 返回可执行的js脚本
header('Content-Type:text/html; charset=utf-8');
exit($data); }else{ // TODO 增加其它格式 }}