【发布时间】：2017-12-15 20:01:16
【问题描述】：
我正在使用 Laravel 5.4 制作一个简单的博客。我想知道如何使用 ajax 和模式引导程序创建记录，以便每次添加记录时都不必重新加载页面？我尝试了网上的教程，但我仍然无法让它在我的项目上运行（因为我真的不擅长 JS）。
我目前的存储方式：
public function store(Request $request) {
$input = $request->all();
$validator = Validator::make($input, [
'title' => 'required|string'
]);
if ($validator->fails()) {
return back()->withErrors($validator)->withInput()->with($this->addTagError);
} else {
$tag = Tag::create($input);
}
return redirect()->route('tagsindex')->with($this->addTagSuccess);
}
路线：
Route::post('dashboard/tags', 'TagCon@store')->name('tagstore');
观点：
<div class="alert alert-info fade in">
<h4>Manage Blog Tags From Here</h4>
<p>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#addModal">Add a new Tag</button>
</p>
<!-- Add Modal start -->
<div class="modal fade" id="addModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add a new Tag</h4>
</div>
<form action="{{ route('tagstore') }}" method="POST" enctype="multipart/form-data">
<div class="modal-body">
{{ csrf_field() }}
<div class="form-group">
<div class="form-group{{ $errors->has('title') ? ' has-error' : '' }}">
<label class="control-label">Tag Name<span style="color: red">*</span> :</label>
<input type="text" name="title" id="title" class="form-control" value="{{old('title')}}" />
@if ($errors->has('title'))
<span class="help-block">
<strong>{{ $errors->first('title') }}</strong>
</span>
@endif
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-info"><span id="" class='glyphicon glyphicon-check'></span> Submit</button>
<button type="button" class="btn btn-warning" data-dismiss="modal"><span id="" class='glyphicon glyphicon-remove'></span> Cancel</button>
</div>
</form>
</div>
</div>
</div>
<!-- add modal code ends -->
</div>
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-dark mb30">
<thead>
<tr>
<th>#</th>
<th>Tags Name</th>
<th style="text-align: center">Action</th>
</tr>
</thead>
<tbody>
@foreach($tags as $indexKey => $t)
<tr>
<td>{{ $indexKey+1 }}</td>
<td><a href="{{ url('dashboard/tags/' . $t->titleslug) }}">{{$t->title}}</a> ({{$t->posts->count()}})</td>
<td class="table-action">
<a href="{{url('dashboard/tags/'. $t->id .'/edit')}}" class="tooltips" data-toggle="tooltip" data-placement="top" title="Edit">
<button style=" background: none;">
<i class="fa fa-edit" aria-hidden="true"></i>
</button>
</a>
<a class="tooltips" data-toggle="tooltip" data-placement="top" title="Delete">
<form action="{{route('tagdestroy', $t->id)}}" method="POST">
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="{{ csrf_token() }}" />
<button type="submit" style=" background: none;" onclick="return confirm('Anda yakin ?');">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</form>
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div><!-- table-responsive -->
</div><!-- col-md-6 -->
上面的代码有效，但每次添加记录时它仍会重新加载页面。抱歉，我没有在这里放一个 ajax 代码，因为正如我之前所说，我什至不知道从哪里开始。我确信一个使用我的应用程序的例子就足以让我学习它，然后下次我自己创建它。
【问题讨论】：