Thinkphp5学习018-项目安全-添加学生-简单的异步调用(ajax)
Thinkphp5学习018-项目安全-添加学生-简单的异步调用(ajax)
Thinkphp5学习018-项目安全-添加学生-简单的异步调用(ajax)
一.修改添加学生模板文件
<!doctype html>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0">
<metahttp-equiv="X-UA-Compatible" content="ie=edge">
<title>添加学生</title>
<{includefile="head"}>
</head>
<body>
<div>
<{includefile="nav"}>
<div>
<divclass="panel-heading">
<h3class="panel-title">添加学生</h3>
</div>
<divclass="panel-body">
<formclass="form-horizontal" action="{:url('do_add')}"method="post">
<divclass="form-group">
<labelfor="no" class="col-sm-2 control-label">学号</label>
<divclass="col-sm-10">
<inputtype="text" id="no"name="no" placeholder="学号">
</div>
</div>
<divclass="form-group">
<labelfor="name" class="col-sm-2 control-label">姓名</label>
<divclass="col-sm-10">
<inputtype="text" id="name"name="name" placeholder="姓名">
</div>
</div>
<divclass="form-group">
<labelclass="col-sm-2 control-label">性别</label>
<divclass="col-sm-10">
<labelclass="radio-inline">
<input type="radio"name="sex" value="男" checked> 男
</label>
<labelclass="radio-inline">
<input type="radio" name="sex" value="女">女
</label>
</div>
</div>
<divclass="form-group">
<labelfor="age" class="col-sm-2 control-label">年龄</label>
<divclass="col-sm-10">
<inputtype="text" id="age"name="age" placeholder="年龄">
</div>
</div>
<divclass="form-group">
<labelclass="col-sm-2 control-label">班级</label>
<divclass="col-sm-10">
<selectclass="form-control" name="classid">
<{volist name="banji" id="row"}>
<optionvalue="{$row.classid}">{$row.classname}</option>
<{/volist}>
</select>
</div>
</div>
<divclass="form-group">
<divclass="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 valueis not valid',
feedbackIcons: {
valid: 'glyphiconglyphicon-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 formsubmission 防止表单提交
e.preventDefault();
// Get the forminstance 获取form表单
var $form =$(e.target);
// Get theBootstrapValidator instance
// var bv =$form.data('bootstrapValidator');
// Use Ajax to submitform 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格式的数据，由前端页面进行页面的跳转。
三.测试成功
腾讯云开发者
