ajax实现表单post提交数据

方法一：
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>