Lavarel框架中使用ajax提交form表单

背景：广告系统接手以前连接十几个站的数据库配置全是写在文件里，新的站点平台接入广告系统时，需要做12步配置，很费时间费力。目前计划是配置表单化存数据库中。

twig模板文件

<!--增加数据库配置-->
<form action="/account/addDb" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label">数据库类别<span style="color:red">*</span></label>
        <div class="col-sm-6">
            <lable style="display: inline-block;max-width: 100%;margin-right:20px;"><input type="radio" checked value="1" name="type">前台数据库</lable>
            <lable style="display: inline-block;max-width: 100%;"><input type="radio" value="2" name="type">后台数据库</lable>
        </div>
        <span class="col-sm-4">重要：前台还是后台数据库请确认好</span>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">数据库别名<span style="color:red">*</span></label>
        <div class="col-sm-6"><input name="name" type="text" class="form-control"></div>
        <span class="col-sm-4" >举例: 前台数据库xxx_front 后台：xxx_admin</span>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">数据库主机<span style="color:red">*</span></label>
        <div class="col-sm-6"><input name="host" type="text" class="form-control"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">数据库端口<span style="color:red">*</span></label>
        <div class="col-sm-6"><input name="port" type="text" class="form-control" value="3306"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">数据库名称<span style="color:red">*</span></label>
        <div class="col-sm-6"><input name="database" type="text" class="form-control"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">数据库用户<span style="color:red">*</span></label>
        <div class="col-sm-6"><input name="username" type="text" class="form-control" value="adsgo"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">数据库密码<span style="color:red">*</span></label>
        <div class="col-sm-6"><input name="password" type="text" class="form-control"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">数据库驱动<span style="color:red">*</span></label>
        <div class="col-sm-6"><input name="driver" type="text" class="form-control" value="mysql"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">字符集<span style="color:red">*</span></label>
        <div class="col-sm-6"><input name="charset" type="text" class="form-control" value="utf8"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">数据库编码<span style="color:red">*</span></label>
        <div class="col-sm-6"><input name="collation" type="text" class="form-control" value="utf8_unicode_ci"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">数据表前缀<span style="color:red">*</span></label>
        <div class="col-sm-6"><input name="prefix" type="text" class="form-control" value="bt_"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">严格模式<span style="color:red">*</span></label>
        <div class="col-sm-6"><input name="strict" type="text" class="form-control" value="false"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">存储引擎<span style="color:red">*</span></label>
        <div class="col-sm-6"><input name="engine" type="text" class="form-control" value="InnoDB"></div>
    </div>
    <div class="hr-line-dashed"></div>
    <div class="form-group">
        <div class="col-sm-4 col-sm-offset-2">
            <input type="hidden" name="_token" value="{{ csrf_token() }}" />
            <a href="javascript:;" id="testConnect" class="btn btn-primary">测试数据库连接</a>
            <button class="btn btn-primary" type="submit">保存配置</button>
        </div>
    </div>
</form>

<label class="col-sm-2 control-label">数据库类别<span style="color:red">*</span></label>

<lable style="display: inline-block;max-width: 100%;margin-right:20px;"><input type="radio" checked value="1" name="type">前台数据库</lable>

<lable style="display: inline-block;max-width: 100%;"><input type="radio" value="2" name="type">后台数据库</lable>

</div>

<span class="col-sm-4">重要：前台还是后台数据库请确认好</span>

</div>

<label class="col-sm-2 control-label">数据库别名<span style="color:red">*</span></label>

<span class="col-sm-4" >举例: 前台数据库xxx_front 后台：xxx_admin</span>

</div>

<label class="col-sm-2 control-label">数据库主机<span style="color:red">*</span></label>

</div>

<label class="col-sm-2 control-label">数据库端口<span style="color:red">*</span></label>

</div>

<label class="col-sm-2 control-label">数据库名称<span style="color:red">*</span></label>

</div>

<label class="col-sm-2 control-label">数据库用户<span style="color:red">*</span></label>

</div>

<label class="col-sm-2 control-label">数据库密码<span style="color:red">*</span></label>

</div>

<label class="col-sm-2 control-label">数据库驱动<span style="color:red">*</span></label>

</div>

</div>

<label class="col-sm-2 control-label">数据库编码<span style="color:red">*</span></label>

</div>

<label class="col-sm-2 control-label">数据表前缀<span style="color:red">*</span></label>

</div>

</div>

</div>

<a href="javascript:;" id="testConnect" class="btn btn-primary">测试数据库连接</a>

</div>

</form>

js部分

<script type="text/javascript">
    $(function(){
        //测试数据库连接
        $('#testConnect').click(function(){
            var data = $("form").serializeArray();
            $.ajax({
                type:'post',
                url:'/account/testConnect',
                data:data,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success:function(rs){
                    if(rs.status=='true'){
                        alert("数据库连接成功！");
                    }else{
                        alert("数据库连接失败！");
                    }
                },
                error:function(rs){
                    alert("数据库连接失败！");
                }
            });
        })
    })
</script>

$(function(){

//测试数据库连接

$('#testConnect').click(function(){

var data = $("form").serializeArray();

$.ajax({

type:'post',

url:'/account/testConnect',

data:data,

headers: {

'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

success:function(rs){

if(rs.status=='true'){

alert("数据库连接成功！");

}else{

alert("数据库连接失败！");

}

error:function(rs){

alert("数据库连接失败！");

}

});

})

</script>

后端php部分

<?php
/**
 * 测试数据库连接状态
 */
public function testConnect(Request $request){
    
    if($request->ajax()){

        $con = @mysqli_connect($request->host,$request->username,$request->password);

        if(!$con){
            return response()->json(['status' => 'false']);
        }else{
            return response()->json(['status' => 'true']);
        }

    }
}

<?php

/**

* 测试数据库连接状态

public function testConnect(Request $request){

if($request->ajax()){

$con = @mysqli_connect($request->host,$request->username,$request->password);

if(!$con){

return response()->json(['status' => 'false']);

}else{

return response()->json(['status' => 'true']);

}

ajax的get请求

//规则删除
$(".delete-rule").click(function(){
    var rule_id = $(this).attr('data-rule-id');
    if(window.confirm("确认删除广告规则")){
        $.get("/fbrule/delete/" + rule_id, function(rs){
            if(rs.status=='true'){
                alert("广告规则删除成功！");
                window.location.reload();
            }else{
                alert("广告规则删除失败！");
            }
        });
    }
});