javascript - laravel中使用ajax jquery将数据添加到数据库

标签 javascript php jquery laravel

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Category;

class categorycontroller extends Controller
{
    public function display()
    {
   		 $cat=Category::all();
        return view ('category',['cat'=>$cat]);

    }
    public function add(Request $request)
    {
    	Category::create([
    		'Name' =>$request->name
    	]);
    	return response()->json(['success'=>'Data is successfully added']);
    }
}
Route::get('/category','categorycontroller@display');
Route::get('/category/add','categorycontroller@add');
@extends('layout1')

@section('content')
<form id="myform">
    <div class="form-group">
    	<!--<label for="name">Name :</label>-->
    	<table class="table table-bordered">
            <thead><tr><th>Category</th><th colspan="2" align="center">Action</th></tr></thead>
    		<tbody>
            </div>
                @foreach($cat as $c)
    			<tr id='cat_{{$c->id}}'>
    			<td><input type="text" class="form-control" id="name_{{$c->id}}" value="{{$c->Name}}"></td>
    			<td><button class="btn btn-primary" id="btnupdate_{{$c->id}}" onclick="updatecat({{$c->id}})">Update</button></td>
    			<td><button class="btn btn-primary" id="btndelete_{{$c->id}}" onclick="deletecat({{$c->id}})">Delete</button></td>	
    			</tr>
                @endforeach
    		</tbody>
            <tr><th colspan="2">New Category</th></tr>
            <tr><td>
               <div class="form-group">
                <input type="text" class="form-control" id="name_0" value="">
            </div>
        </td>
        <td>
        <button class="btn btn-primary" id="btnadd">Add</button>
    </td>
</tr>
</table>
</form>
<script type="text/javascript" src="{{asset('js/jquery.js')}}"></script>
  <script>
     $(document).ready(function(){
          $("#btnadd").on('click',function(e){
            
            e.preventDefault();
            $.ajaxSetup({
                headers:{
                    'X-CSRF-TOKEN':$('meta[name="_token"]').attr('content');
                }
            });
               $.ajax({
               url:"{{url('category/add')}}",
                method:'get',
                data:{
                    name:$('#name_0').val()
                },
                success:function(result)
                {
                    $('.alert').show();
                    $('.alert').html(result.success);
                    //$('#tbcat').append(result.row);
                }
            });
        });
      });
</script>

@endsection

我编写此代码来显示数据库中表中的类别,它成功运行。然后我添加了ajax jquery代码将类别添加到数据库并在添加到表单中的表后显示它。我在 Blade.php 和 route 编写了代码,并使用了类类别和类别 Controller ,但是当我单击“添加”按钮时,它无法成功工作。请任何人帮助我纠正错误

最佳答案

在您的 resources/views/layouts 文件夹中,主布局文件应包含这两个元素以防止 CSRF 攻击。

<!DOCTYPE html>

...

  <meta name="csrf-token" content="{{ csrf_token() }}"/> 

...

</head>
<body>

    ...

    <script type="text/javascript">
      $.ajaxSetup({
         headers: { 'X-CSRF-Token' : $('meta[name=csrf-token]').attr('content') }
      });
    </script>

...

</body>

您还需要从 onclick 事件处理程序中删除第二部分 ($.ajaxSetup)。所以它看起来像这样:

<script>
 $(document).ready(function(){
      $("#btnadd").on('click',function(e){

        e.preventDefault();

           $.ajax({
           url:"{{url('category/add')}}",
            method:'get',
            data:{
                name:$('#name_0').val()
            },
            success:function(result)
            {
                $('.alert').show();
                $('.alert').html(result.success);
                //$('#tbcat').append(result.row);
            }
        });
    });
  });

关于javascript - laravel中使用ajax jquery将数据添加到数据库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53544077/

相关文章:

javascript - 模板上的每个 meteor ?

php - 选择距离最小的随机 GPS 点

javascript - 这是为 jQuery 中还没有 id 的元素设置 id 的正确方法吗?

javascript - 数组不能在数据表中使用

php - 链式选择问题

javascript - Gmaps.js 路线与时间

javascript - 我如何从本地主机 :5000 to localhost:3000 发送 http post 请求

php - 从网站上抓取带有 url 的 html

javascript - 当用户使用不同帐户打开新选项卡时,强制刷新旧选项卡中的站点

javascript - nestedsortable.js toarray 不工作