返回Symfony \ Component \ HttpKernel \ Exception \ MethodNotAllowedHttpException将数据发布到服务器时没有消息

时间:2018-08-15 11:13:14

标签: javascript php jquery ajax laravel

尝试将数据发布到数据库时,我一直收到此消息。以下是错误页面,控制器,型号,路由,视图和javascript代码。

通过研究该主题,我找到了一些解决方案,这些建议表明人们在混合发布和获取请求。这里不是这样吗?坦克帮你!

错误页: errorpage

AjaxController.php

<?php

namespace App\Http\Controllers;

use Validator;

use Illuminate\Http\Request;

use App\DataTable;

use DataTables;

class AjaxController extends Controller
{
    public function index()
    {
        return view('ajax');
    }

    public function getData()
    {
        $data = DataTable::select('name', 'email');

        return DataTables::of($data)->make(true);
    }

    public function postData(Request $request)
    {
        $validation = Validator::make($request->all(), [
        'name' => 'required',
        'email' => 'required',
      ]);

        $errorArray = array();
        $succesOutput = '';

        if ($validation->fails()) {
            foreach ($validation->messages()->getMessages() as $field_name => $messages) {
                $errorArray = $messages;
            }
        } else {
            if ($request->get('buttonAction') == 'insert') {
                $data = new DataTable([
              'name' => $request->get('name'),
              'email' => $request->get('email')
            ]);

                $data->save();

                $succesOutput = '<div class="alert alert-succes">Tilføjet</div>';
            }
        }

        $output = array(
          'error' => $errorArray,
          'succes' => $succesOutput
        );
        echo json_encode($output);
    }
}

DataTable.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class DataTable extends Model
{
    protected $fillable = [
    'name', 'email'
  ];
}

web.php

Route::get('/ajax', 'AjaxController@index')->name('ajax');
Route::get('/ajax/getdata', 'AjaxController@getData')->name('ajax.getData');
Route::post('/ajax/postdata', 'AjaxController@postData')->name('ajax.postData');

ajax.blade.php

@extends('layouts.ajax')

@section('content')

<div class="container py-4">
  <div class="col-10 mx-auto">
    <div class="" align="right">
      <button type="button" name="add" id="addMember" class="btn btn-sm">Tilføj Medlem</button>
    </div>
    <table id="ajaxTable" class="table table-bordered" style="width: 100">
      <thead>
        <tr>
          <th>Navn</th>
          <th>Email</th>
        </tr>
      </thead>
    </table>


  </div>
</div>

<div class="modal fade" id="memberModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <form id="memberForm" method="post">
        @csrf
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"></button>
          <h4 class="modal-title">Tilføj medlem </h4>
        </div>

        <div class="modal-body">

          <span id="formOutput"></span>
          <div class="form-group">
            <label>Indtast Navn</label>
            <input type="text" name="name" value="" id="name" class="form-control">
            <label>Indtast E-mail</label>
            <input type="text" name="email" value="" id="email" class="form-control">
          </div>
        </div>

        <div class="modal-footer">
          <input type="hidden" name="buttonAction" id="buttonAction" value="insert">
          <input type="submit" name="submit" value="Tilføj" id="action" class="btn btn-info">
          <button type="button" class="btn btn-default" data-dismiss="modal">Luk</button>
        </div>
      </form>

    </div>
  </div>

</div>

@endsection

@section('scripts')
<script type="text/javascript">
  $(document).ready(function() {
    $('#ajaxTable').DataTable({
      'processing': true,
      'serverSide': true,
      'ajax': '{{ route('ajax.getData') }}',
      'columns': [
        {'data': 'name'},
        {'data': 'email'}
      ]
    })

    $('#addMember').click(function() {
      $('#memberModal').modal('show');
      $('#memberForm')[0].reset();
      $('#formOutput').html('');
      $('#buttonAction').val('insert');
      $('#action').val('Tilføj')
    });

    $('#formOutput').on('submit', function(event) {
      event.preventDefault();

      var formData = $(this).serialize();

      $.ajax({
        url: "{{ route('ajax.postData') }}",
        type: 'POST',
        dataType: 'json',
        data: formData,
        succes: function(data) {
          if (data.error.length > 0) {
            var error_html = '';
            for (var i = 0; i < data.error.length; i++) {
              error_html += '<div class="alert alert-danger">' + data.error[i] + '</div>';
            }
            $('#formOutput').html(error_html);
          } else {
            $('#formOutput').html(data).succes;
            $('#memberForm')[0].reset();
            $('#action').val('insert');
            $('.modal-title').text('Tilføj Medlem');
            $('#ajaxTable').DataTable().ajax.reload();
          }
        }
      })
      });

  });
</script>
@endsection

0 个答案:

没有答案