你好我们学习在laravel上使用jquery ajax，我发现它在互联网上但我有一个问题，在我的情况下我只是尝试做一些简单的CRUD，但程序无法将所有数据存储到数据库，尽管我尝试检查元素，所有表单数据都显示在其上，其他操作如编辑，删除和从数据库读取数据正常工作但创建不正常，你能帮我弄清楚我的问题。 啊，我的代码
这里是我的Jquery和ajax脚本。
$(document).ready(function(){
var url = "/AJAX_INTEGRATED/public/tasks";
//display modal form for task editing
$('.open-modal').click(function(){
var task_id = $(this).val();
$.get(url + '/' + task_id, function (data) {
//success data
console.log(data);
$('#task_id').val(data.id);
$('#task').val(data.task);
$('#description').val(data.description);
$('#btn-save').val("update");
$('#myModal').modal('show');
})
});
//display modal form for creating new task
$('#btn-add').click(function(){
$('#btn-save').val("add");
$('#frmTasks').trigger("reset");
$('#myModal').modal('show');
});
//delete task and remove it from list
$('#tasks-list').on('click','.delete-task',function(){
var task_id = $(this).val();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
})
$.ajax({
type: "DELETE",
url: url + '/' + task_id,
success: function (data) {
console.log(data);
$("#task" + task_id).remove();
},
error: function (data) {
console.log('Error:', data);
}
});
});
//create new task / update existing task
$("#btn-save").click(function (e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
})
e.preventDefault();
var formData = {
task: $('input[name=task]').val(),
description: $('input[name=description]').val(),
}
//used to determine the http verb to use [add=POST], [update=PUT]
var state = $('#btn-save').val();
var type = "POST"; //for creating new resource
var task_id = $('#task_id').val();;
var my_url = url;
if (state == "update"){
type = "PUT"; //for updating existing resource
my_url += '/' + task_id;
}
console.log(formData);
$.ajax({
type: type,
url: my_url,
data: formData,
dataType: 'json',
success: function (data) {
console.log(data);
var task = '<tr id="task' + data.id + '"><td>' + data.id + '</td><td>' + data.task + '</td><td>' + data.description + '</td><td>' + data.created_at + '</td>';
task += '<td><button class="btn btn-warning btn-xs btn-detail open-modal" value="' + data.id + '">Edit</button>';
task += '<button class="btn btn-danger btn-xs btn-delete delete-task" value="' + data.id + '">Delete</button></td></tr>';
if (state == "add"){ //if user added a new record
$('#tasks-list').append(task);
}else{ //if user updated an existing record
$("#task" + task_id).replaceWith( task );
}
$('#frmTasks').trigger("reset");
$('#myModal').modal('hide');
},
error: function (data) {
console.log('Error:', data);
}
});
});
});
和我的路线。
<?php
use App\Task;
use Illuminate\Http\Request;
Route::get('/', function () {
$tasks = Task::all();
return View::make('welcome')->with('tasks',$tasks);
});
Route::get('/tasks/{task_id?}',function($task_id){
$task = Task::find($task_id);
return Response::json($task);
});
Route::post('/tasks',function(Request $request){
$task = Task::create($request->all());
return Response::json($task);
});
Route::put('/tasks/{task_id?}',function(Request $request,$task_id){
$task = Task::find($task_id);
$task->task = $request->task;
$task->description = $request->description;
$task->save();
return Response::json($task);
});
Route::delete('/tasks/{task_id?}',function($task_id){
$task = Task::destroy($task_id);
return Response::json($task);
});
我的HTML代码
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Laravel Ajax CRUD Example</title>
<!-- Load Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-narrow">
<h2>Laravel Ajax To Do App</h2>
<button id="btn-add" name="btn-add" class="btn btn-primary btn-xs">Add New Task</button>
<div>
<!-- Table-to-load-the-data Part -->
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Task</th>
<th>Description</th>
<th>Date Created</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="tasks-list" name="tasks-list">
@foreach ($tasks as $task)
<tr id="task{{$task->id}}">
<td>{{$task->id}}</td>
<td>{{$task->task}}</td>
<td>{{$task->description}}</td>
<td>{{$task->created_at}}</td>
<td>
<button class="btn btn-warning btn-xs btn-detail open-modal" value="{{$task->id}}">Edit</button>
<button class="btn btn-danger btn-xs btn-delete delete-task" value="{{$task->id}}">Delete</button>
</td>
</tr>
@endforeach
</tbody>
</table>
<!-- End of Table-to-load-the-data Part -->
<!-- Modal (Pop up when detail button clicked) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Task Editor</h4>
</div>
<div class="modal-body">
<form id="frmTasks" name="frmTasks" class="form-horizontal" novalidate="">
<div class="form-group error">
<label for="inputTask" class="col-sm-3 control-label">Task</label>
<div class="col-sm-9">
<input type="text" class="form-control has-error" id="task" name="task" placeholder="Task" value="">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Description</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="description" name="description" placeholder="Description" value="">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btn-save" value="add">Save changes</button>
<input type="hidden" id="task_id" name="task_id" value="0">
</div>
</div>
</div>
</div>
</div>
</div>
<meta name="_token" content="{!! csrf_token() !!}" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="{{asset('js/ajax-crud.js')}}"></script>
</body>
</html>
当我单击“添加新任务”按钮时，检查元素显示如下 {任务：“你好”，描述：“Blasdweas”} ajax-crud.js：89 {updated_at：“2017-11-05 10:44:02”，created_at：“2017-11-05 10:44:02”，id：22}
但仅保存创建和更新时保存。