方法一:
1.禁用表单提交οnsubmit=“return false”
2.tp框架控制器不可以用new Request方式调用请求类方法,改用静态调用Request请求类
前端form表单
<form onsubmit="return false" class="form-horizontal" id="login" >
<div class="form-group">
<label for="inputEmail1" class="col-sm-2 control-label">用户名:</label>
<div class="col-sm-10">
<input type="text" name="name" class="form-control" id="inputEmail1" placeholder="UserName">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" id="register">注册</button>
<button class="btn btn-warning" id="sub">测试</button>
</div>
</div>
</form>
js代码
<script>
$(function(){
$('#sub').click(function(){
// alert($("#inputEmail1").val());
var url = "{:url('user/insert')}";
//类似ajax的提交
$.post(url,{"name":$('#inputEmail1').val()},function(res){
console.log(res);
},'json')
});
});
</script>
控制器代码
<?php
namespace app\index\controller;
use app\common\controller\Base;
use app\common\model\User as UserModel;
use think\facade\Request;
use think\facade\Session;
class User extends Base
{
//注册页面
public function register()
{
$this->view->assign('title', '用户注册');
return $this->view->fetch();
}
//处理用户提交的用户信息
public function insert()
{
// 不能使用new Request去调用请求类,new Request 会再次实例化这个对象 把ajax的参数重置是看不发送到控制器的表单数据的,谨记
//打印
dump(Request::method());
dump(Request::post());
exit;
}
结果
方法二
<script>
$(function(){
//要获取表单提交的数据分两步 第一步:绑定事件,第二步:表单序列化
$("#register").on('click',function(){
//第二步:表单序列化
// alert($('#login').serialize());
$.ajax({
//请求方式
type : "POST",
//请求地址
url:"{:url('Index/user/insert')}",
data: $('#login').serialize(),
dataType:'json',
//请求成功
success:function(data) {
console.log(data);
}
});
});
});
</script>