入坑!通过ajaxreturn jquery json提交form

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);
    }

ThinkPHP返回json数据出现NULL或者小红点

如果你返回的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 增加其它格式    }}  

原文发布于微信公众号 - Tech爬虫(php_pachong)

原文发表时间:2019-05-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券