如何在laravel中使ajax工作？

Question

我是这里的新手，我目前正在学习Laravel，我试图使ajax将数据发送到数据库并将其发布到视图中。 但是，无论我做什么，都行不通。 这是我的文件：

FileUploadController.php

<?php

namespace App\Http\Controllers;
use App\UploadModel;
use App\file;
use Illuminate\Http\Request;
use Illuminate\Foundation\Bus\DispatchesJobs;
use Illuminate\Routing\Controller as BaseController;
use Illuminate\Foundation\Validation\ValidatesRequests;
use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
use Auth;


class FileUploadController extends BaseController
{
   use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
   public static function file_upload_form(){
        return view('file_upload_form');
   }

   function index()
    {
     return view('home');
    }

  public function processData(Request $request){

   $data = $request->all();
   print_r($data);
   echo $data['email'];

}



   public function image_page(){
    $images = UploadModel::all();
    return view('images',compact('images'));
   }
   public function showall(){
    $images = UploadModel::all();

    return view ('show',compact('images'));
   }

   public static function image_upload(Request $userdata){
    $imageTempName = $userdata->file('image_file')->getPathname();
    $imageName = $userdata->file('image_file')->getClientOriginalName();
    $path = base_path() . '/public/images_1';
    $userdata->file('image_file')->move($path , $imageName);
    $upload_image = new UploadModel;
    $upload_image->image_title = $userdata->image_title;
    $upload_image->image_file = $imageName;
    $upload_image->user_id=Auth::id();
    if($upload_image->save())
{           echo "File Uploaded Successfully";
    }else{
        echo "Upload Error!";
    }
  }

}

模型-> UploadModel.php

  <?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class UploadModel extends Model
{
    protected $table='upload_file';
    protected $fillable = [
        'image_file', 'image_title', 'rating','user_id','review','download'
        ];

    public function user(){
        return $this->belongsTo('App\User');
    }

    public function profile()
    {
        return $this->belongsTo('Title', 'image_title');
    }


}

路线：

Route::get('/', function () {
    return view('home');
});


Route::get('/file_upload_form', function () {
    return view('file_upload_form');
});

Route::get('/images', 'FileUploadController@image_page');



Route::get('/file_upload_form','FileUploadController@file_upload_form');
Route::post('image_upload','FileUploadController@image_upload');




Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');

观看次数： file_upload_form.blade.php

@extends('layouts.app')

@section('content')

  <div class="container">
   <h3 align="center" style="color:black"><strong>Movie Posting</strong></h3>
   <br />
      <div class="container">
      <div class="row">
        <div  class="col-md-6 col-md-offset-3">
          {{Form::open(array('url'=>'image_upload','method'=>'post','files'=>true))}}
            <div class="form-group">
              <label for="name">Movie Title:</label>
              <input type="text" class="form-control" id="image_title" placeholder="Enter image Titlte" name="image_title">
            </div>
            <div class="form-group">
              <label for="image">Icon:</label>
              <input type="file" class="form-control" id="image_file" name="image_file">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          {{Form::close()}}


   <br />
  </div>
@endsection

images.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
<div class="panel panel-primary">
 <div class="panel-heading">Movie posting
 <button id="btn_add" name="btn_add" class="btn btn-primary pull-right">Add New Movie</button>
    </div>
      <div class="panel-body"> 
       <table class="table">
        <thead>
          <tr>
            <th style="width:175px">Movie</th>
            <th style="width:150px">Icon</th>
            <th style="width:125px">User</th>
            <th style="width:125px">Rating</th>
            <th style="width:125px">Review</th>
            <th style="width:250px">Date</th>
          </tr>
         </thead>
        <tbody>
        @foreach($images as $image)
          <tr>
            <td><p class="text-center">{{ $image->image_title }}</p></td>
            <td><img src="{{ asset('images_1/'.$image->image_file) }}" alt="" width="200"   height="100"></td>
            <td><p class="text-center">{{ $image->user->name }}</p></td>
            <td>Rating</td>
            <td>    
                @if(auth()->check())
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Image-review-modal">Write a review</button>
                @else
                <a href="/login" class="button">Write a review</a>
                @endif
                </td>
            <td><p class="text-center">{{ $image->created_at}}</p></td>
          </tr>
          @endforeach
        </tbody>
        </table>
       </div>
       </div>
    <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">Movie</h4>
            </div>
            <div class="modal-body">
            <form id="frmProducts" name="frmProducts" class="form-horizontal" novalidate="">
                <div class="form-group error">
                 <label for="inputName" class="col-sm-3 control-label">Title</label>
                   <div class="col-sm-9">
                    <input type="text" class="form-control has-error" id="name" name="name" placeholder="Product Name" value="">
                   </div>
                   </div>
                 <div class="form-group">
                 <label for="inputDetail" class="col-sm-3 control-label">Date</label>
                    <div class="col-sm-9">
                    <input type="text" class="form-control" id="details" name="details" placeholder="details" 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="product_id" name="product_id" value="0">
            </div>
        </div>
      </div>
  </div>
</div>
@endsection

这是我的js。 app.js

var page = 1;
var current_page = 1;
var total_page = 0;
var is_ajax_fire = 0;

manageData();

 // Manage data list

function manageData() {
    $.ajax({
        dataType: 'json',
        url: 'images'
    }).done(function(data){
        total_page = data.last_page;
        current_page = data.current_page;
        $('#pagination').twbsPagination({
            totalPages: total_page,
            visiblePages: current_page,
            onPageClick: function (event, pageL) {
                page = pageL;
                if(is_ajax_fire != 0){
                      getPageData();
                    }
                }
            });
        console.log(total_page);
            manageRow(data.data);
            is_ajax_fire = 1;
        });
}

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

// Get Page Data
function getPageData() {
    $.ajax({
        dataType: 'json',
        url: url,
        data: {page:page}
    }).done(function(data){
        manageRow(data.data);
    });
}

// Add new Post table row 
function manageRow(data) {
    var rows = '';
    $.each( data, function( key, value ) {
        rows = rows + '<tr>';
        rows = rows + '<td>'+value.image_title+'</td>';
        rows = rows + '<td>'+value.image_file+'</td>';
        rows = rows + '<td>'+value.user_id+'</td>'
        rows = rows + '<td>'+value.content+'</td>'
        rows = rows + '<td data-id="'+value.id+'">';
        rows = rows + '<button data-toggle="modal" data-target="#edit-item" class="btn btn-primary edit-item">Edit</button> ';
        rows = rows + '<button class="btn btn-danger remove-item">Delete</button>';
        rows = rows + '</td>';
        rows = rows + '</tr>';
    });
    $("tbody").html(rows);
}

那么谁能告诉我我做错了什么？请。 我真的很感激任何信息，因为我想尽可能地了解这一点。