日拱一卒无有尽，功不唐捐终入海

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

Laravel Sam 702℃ 0评论

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

twig模板文件

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!--增加数据库配置-->
<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>

js部分

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>

后端php部分

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?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请求

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//规则删除
$(".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("广告规则删除失败！");
            }
        });
    }
});

更多待涛哥实践总结分享…

转载请注明：PHP笔记 » Lavarel框架中使用ajax提交form表单

喜欢 (0)
发表我的评论
取消评论

表情

Hi，您需要填写昵称和邮箱！

  • 昵称 (必填)
  • 邮箱 (必填)