如何使用Bootstrap模式将数据插入phpMyAdmin数据库?

时间:2017-04-17 13:07:55

标签: javascript php laravel modal-dialog

我试图通过Bootstrap模式向我的localhost数据库添加一些数据。我使用Laravel 5.2进行编码。

这是我的PHP函数:

index.properties

这是我的模态标记:

split(L,0,[],L).

我的数据库中没有添加任何内容。我观看了许多教程而没有解决我的问题。

1 个答案:

答案 0 :(得分:0)

使用bootstrap模型时,无法通过php(Laravel 5.2)直接保存数据。在jquery ajax或javascript ajax之间将发挥作用。

解决方案是一步一步......

第一步: 在routes.php文件中

Route::post('/modal-test',[
  'uses' => 'TestController@modal_test',
  'as' => 'modal-test'
]);

第二步: 在视图文件

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Tell Us What's Going On ?</h4>
                </div>
                <form>
                    <div class="modal-body">

                       <label><input type="radio" name="optradio" value="1">&nbsp;&nbsp;it's not interesting</label><br>
                        <label><input type="radio" name="optradio" value="2">&nbsp;&nbsp;I think it should not in our website</label><br>
                        <label><input type="radio" name="optradio" value="3">&nbsp;&nbsp;it's a spam</label><br>



                    </div>
                    <div class="modal-footer">
                        <button id="hello"  class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" id="report_post" class="btn btn-primary" data-dismiss="modal">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="{{ asset('js/juqery.min.js') }}"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function(){
        $('#myModal').on('shown.bs.modal', function () {
            $('#myInput').focus()
        });
    });
</script>

    <script>
        $(document).ready(function(){
            $('#report_post').on('click',function(){
                console.log('clicked');
                var token = '{{ csrf_token() }}';
                var process = "{{ route('modal-test') }}";
                var radio_input = $('input:radio[name=optradio]:checked').val();;
               // console.log(radio_input);


                var data = {
                    "_token":token,
                    "radio_input":radio_input
                }
                $.post(process, data, function(result){
                    console.log(result);


                });
            });

        });
    </script>

第三步: 在控制器文件

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use DB;
class TestController extends Controller
{

public function modal_test(Request $request){
   $radio_input = $request->radio_input;

    DB::table('modal_input')->insert(
        ['radio_input' => $radio_input]
    );
    echo "Data inserted Successfully";
}
}
 ?>

希望,这将是可行的。