首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >入坑!通过ajaxreturn jquery json提交form

入坑!通过ajaxreturn jquery json提交form

作者头像
PM吃瓜
发布2019-08-12 17:05:03
4.9K0
发布2019-08-12 17:05:03
举报
文章被收录于专栏:PM吃瓜(公众号)PM吃瓜(公众号)

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 增加其它格式    }}  
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-05-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Tech爬虫 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • ThinkPHP返回json数据出现NULL或者小红点
相关产品与服务
数据库
云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档