thinkphp5 第25课：简单的异步调用(ajax)

最新推荐文章于 2022-10-11 15:13:59 发布

李书明

最新推荐文章于 2022-10-11 15:13:59 发布

阅读量931

点赞数

分类专栏： thinkphp5.0

本文链接：https://blog.csdn.net/lsmxx/article/details/101263436

版权

thinkphp5.0 专栏收录该内容

43 篇文章 13 订阅

订阅专栏

在我的博客：thinkphp5 第14课：项目案例-学生列表模板设计

https://blog.csdn.net/lsmxx/article/details/100987976

曾经简单讲过异步调用，本章将前面的学生添加改为异步调用

添加学生的模板文件：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加学生</title>
    <{include file="head"}>
</head>
<body>
<div class="container">
    <{include file="nav"}>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">添加学生</h3>
        </div>
        <div class="panel-body">
            <form class="form-horizontal" action="{:url('do_add')}" method="post">
                <div class="form-group">
                    <label for="no" class="col-sm-2 control-label">学号</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="no" name="no" placeholder="学号">
                    </div>
                </div>
                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="name" name="name" placeholder="姓名">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-10">
                        <label class="radio-inline">
                            <input type="radio" name="sex" value="男" checked> 男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="sex" value="女"> 女
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label for="age" class="col-sm-2 control-label">年龄</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="age" name="age" placeholder="年龄">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">班级</label>
                    <div class="col-sm-10">
                        <select class="form-control" name="classid">
                            <{volist name="banji" id="row"}>
                            <option value="{$row.classid}">{$row.classname}</option>
                            <{/volist}>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary">提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

<script>
    $(function () {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                no: {
                    validators: {
                        notEmpty: {
                            message: '学号不能为空'
                        }
                    }
                },
                name: {
                    validators: {
                        notEmpty: {
                            message: '姓名不能为空'
                        }
                    }
                },
                age: {
                    validators: {
                        notEmpty: {
                            message: '年龄不能为空'
                        }
                    }
                }
            }
        })
        .on('success.form.bv',function(e){  //点击提交之后

            // Prevent form submission 防止表单提交
            e.preventDefault();

            // Get the form instance 获取form表单
            var $form = $(e.target);

            // Get the BootstrapValidator instance
            // var bv = $form.data('bootstrapValidator');

            // Use Ajax to submit form data 提交至form标签中的action，result自定义
            $.post($form.attr('action'), $form.serialize(), function (result) {
                if(result.error){
                    alert(result.msg)
                }else{
                    var ok = window.confirm('添加成功，是否继承添加')
                    if(ok){
                        $form[0].reset();
                    }else{
                        window.location.href="{:url('student/all')}"
                    }
                }
            },'json');
        });

    });
</script>

我们使用了bootstrapvalidator表单验证，并且使用异步提交表单，详细讲解如下
.on('success.form.bv',function(e){ } ) 表示表单验证通过后的事件
e.preventDefault(); 表示阻止表单同步提交 
var $form = $(e.target); 获取表单对象(jquey对象)
$.post($form.attr('action'), $form.serialize(), function (result) { }) ：使用jquery中的$.post异步提交
$form.attr('action') 获取表单中的action属性的值，也就是由后台的哪个文件处理表单数据

$form.serialize()，表单的序列化，得到json格式的数据

控制器中的do_add方法，改写如下：

//执行添加操作
    public function do_add()
    {
        $data = input('post.');

        try {
            $ret = Db::name('student')->insert($data);
            return ['error'=>false,'msg'=>'添加成功'];
        } catch (PDOException $ex) {
            return ['error'=>true,'msg'=>'添加失败，' . $ex->getMessage()];
        }

    }

当前端页面使用ajax异步调用控制器的方法时，不能再出现页面跳转，如$this->success(), $this->error(), $this->redirect() 等，而是将处理结果以数组的形式返回，那么thinkphp5会自动的以json格式返回给前端，也就是说，前端接收的是json格式的数据，由前端页面进行页面的跳转。

李书明

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
thinkphp5 第25课：简单的异步调用(ajax)

在我的博客：thinkphp5 第14课：项目案例-学生列表模板设计https://blog.csdn.net/lsmxx/article/details/100987976曾经简单讲过异步调用，本章将前面的学生添加改为异步调用添加学生的模板文件：<!doctype html><html lang="en"><head> <m...
复制链接

扫一扫