Ajax发布功能在laravel文档中不起作用

时间:2018-07-13 16:41:14

标签: jquery ajax laravel-5

这是我的index.blade.php文件:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
@extends('adminlte::page')

@section('content')

<div class="container">
<div class="row">
  <div class="col-md-8 col-md-offset-2">
        <div class="panel panel-default">
            <div class="panel-heading">Companies</div>
                <div class="panel-body">
            <form action="{{url("/delete")}}" method="post">
            {!!csrf_field()!!}
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Add Company</button><br><br>
                    <table id="datatable" class="display">
                      <thead>
                          <tr>
                    <th>Checkbox</th>
                    <th>Company ID</th>
                    <th>Name</th>
                    <th>Status</th>
                    <th>Created at</th>
                    <th>Updated at</th>
                    <th></th>
                    <th></th>
                  </tr>
                      </thead>
                      <tbody>
                        @foreach ($companies as $key => $com)
                  <tr>
                    <td>
                      <input type="checkbox" name="multi_id[]" value="{{$com->id}}">
                    </td>
                    <td>{{$com->id}}</td>
                    <td name="company_name" id="company_name">{{$com->company_name}}</td>
                    <td>{{$com->status}}</td>
                    <td>{{$com->created_at}}</td>
                    <td>{{$com->updated_at}}</td>
                    <td>
                      <a href="#" class="edit-model" data-id="{{$com->id}}" data-company_name="{{$com->comapany_name}}" data-status="{{$com->status}}">
                          <i class="glyphicon glyphicon-pencil"></i>
                      </a>  
                    </td>
                    <td>
                      <a href="#" class="delete-model" data-id="{{$com->id}}" data-company_name="{{$com->comapany_name}}" data-status="{{$com->status}}">
                          <i class="glyphicon glyphicon-trash"></i>
                      </a>     
                    </td>
                  </tr>
                @endforeach
                      </tbody>
                    </table>
            <button type="submit" class="btn btn-link" ><i class="glyphicon glyphicon-trash"></i></button>
            <button type="button" class="btn btn-link" ><i class="glyphicon glyphicon-pencil"></i></button>
          </form>
            </div>
      </div>
    </div>
</div>

<!-- 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" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>

  <form id="company_form" method="post">
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>

  <div class="modal-body">
    {{csrf_field()}}
    <span id="form_output"></span>
    <div class="form-group">
      <label for="company_name">Company Name</label>
      <input type="text" class="form-control" name="company_name" id="company_name">
    </div>

    <div class="form-group">
      <input type="text" class="form-control" name="status" id="status">
     <!--  <input type="radio" name="status" id="status"
      value="active"> Active<br>
      <input type="radio" name="status" id="status"
      value="inactive"> Inactive -->
    </div>
  </div>
  <div class="modal-footer">
    <input type="hidden" name="button_action" id="button_action" value="insert">
    <input type="submit" name="submit" id="action" value="Add" class="btn btn-info">
    <button type="button" class="btn btn-warning" data-dismiss="modal"><span class="glyphicon glyphicon-remove">Close</button>

    <!-- <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-plus">Save</button> -->
  </div>

  </form>

</div>

@endsection
@section('adminlte_js')

 $(document).ready(function(){

 $('#datatable').DataTable();
 $('#company_form').on('submit', function(event){
    event.preventDefault();
    var form_data = $(this).serialize();
    $.ajax({
        url: "{{route('companies/postdata')}}",
        method:"POST",
        data: form_data,
        dataType: "json",
        success: function(data)
        {
          if (data.error.length > 0) 
          {
            var error_html = '';
            for (var count = 0; count < data.error.length; count++) {
              error_html += '<div class="alert alert-danger">'+data.error[count]+ '</div>';
            }
            $('#form_output').html(error_html);
          }
          else
          {
            $('#form_output').html(data.success);
            $('#company_form')[0].reset();
            $('#action').val('Add');
            $('.modal-title').text('Add Company');
            $('#button_action').val('insert');
            $('#datatable').DataTable().ajax.reload();

          }
        }
    })
 });
 });
</script>
@stop

这是我的控制器文件:      

namespace App\Http\Controllers;

use Validator;
use Illuminate\Http\Request;
use App\companies;

class AjaxController extends Controller
{
public function index()
{

    $companies = companies::all();
    return view('ajax.index',compact('companies'));
}
public function delete(Request $request)
{
    $multi_id = $request->input('multi_id');
    companies::whereIn('id',$multi_id)
    ->delete();
    return redirect('/companies')->with('success','deleted');

}
 public function store(Request $request)
{
    companies::create($request->all());
    return back();
}
public function postdata(Request $request)
{
    // $validation = Validator::make($request->all(),[
    //         'company_name' => 'required',
    //         'status' => 'required',
    //     ]);
    $validation = $request->validate([
            'company_name' => 'required',
            'status' => 'required',
        ]);
    $error_array = array();
    $success_output = '';
    if($validation->fails())
    {

        foreach ($validation->messages()->getMessages() as 
            $field_name => $messages) 
        {
            $error_array[] = $messages;
        }
    }
    else
    {
        if ($request->get('button_action') == "insert") 
        {
            $companies = new companies([

                        'company_name'  => $request->get('company_name'),
                        'status' => $request->get('status'),
                ]);
            $companies->save();
                $success_output = '<div class="alert alert-success">Data Inserted</div>';

        }

    }
        $output = array(
                'errror' => $error_array,
                'success' => $success_output
            );
            echo json_encode($output);
}

}

但是当我单击弹出窗口上的“保存”按钮时,它不起作用,并且控制台中没有显示任何错误。在这种情况下有人可以帮助我吗?我想在数据库表和数据表中添加新的公司名称。我的路线链接是:  Route::post('companies/postdata',AjaxController@postdata)->name('companies/postdata');

**更新后的帖子

1 个答案:

答案 0 :(得分:0)

我看到两件事, 你在哪里

$.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

我看到公司有错字

Ajax:

  

url:“ {{route('companies / postdata')}}”,

路线:

  

->名称(“ comapnies / postdata”);