Cuộc gọi ajax của Laravel tới bộ điều khiển

Được đăng ban đầu @ https. // triển khai mã. com truy cập và tải xuống mã mẫu. https. // triển khai mã. com/blog/laravel/laravel-8-ajax-post-request-example

Trong bài đăng này, bạn sẽ tìm hiểu một ví dụ cơ bản về yêu cầu bài đăng ajax của Laravel 8 sẽ giúp bạn gửi yêu cầu bài đăng đến cơ sở dữ liệu của mình mà không cần làm mới trang. Ajax đang giúp trải nghiệm người dùng của chúng tôi rằng khi lưu dữ liệu không cần phải làm mới trang như cách lưu bản ghi gốc bằng biểu mẫu

Trong ví dụ này, chúng tôi sẽ tạo một bài đăng ajax Laravel 8 cơ bản với việc lưu/lưu trữ người dùng

Bước 1. Cài đặt Laravel

Trước khi bắt đầu, chúng ta cần cài đặt ứng dụng Laravel 8 trong môi trường cục bộ của mình. Trong ví dụ này, tôi đang sử dụng XAMPP qua Windows. Nhưng bạn muốn tự do sử dụng bất kỳ máy và hệ điều hành nào. Để thư mục HTDOCS của bạn chạy lệnh này

composer create-project laravel/laravel laravel-ajax-post-example --prefer-dist

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Sau khi hoàn thành lệnh trên, hãy chạy lệnh bên dưới để trỏ thư mục dự án Laravel 8 của chúng tôi

cd laravel-ajax-post-example

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bước 2. Cấu hình cơ sở dữ liệu

Nếu dự án Laravel của bạn mới thì bạn cần cập nhật thông tin đăng nhập cơ sở dữ liệu của mình. Chỉ cần mở. env trong dự án Laravel 8 của bạn

cd laravel-ajax-post-example

0

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name_here
DB_USERNAME=your_database_username_here

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bước 3. Tạo bộ điều khiển
Để tạo bộ điều khiển cho ví dụ về bài viết Laravel ajax của chúng tôi, vui lòng chạy lệnh sau.

php artisan make:controller UserController

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bước 4. Chạy di chuyển

Bây giờ, hãy chạy migration theo mặc định đã cài đặt Laravel 8

php artisan migrate

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bước 5. Bộ điều khiển cài đặt

Bây giờ, chúng ta sẽ thiết lập phương thức

cd laravel-ajax-post-example

1 cho UserController. php để xử lý bài đăng Laravel ajax của chúng tôi

namespace App\Http\Controllers;

use Response;
use App\Models\User;
use Illuminate\Http\Request;

class UserController extends Controller
{
    public function store(Request $request) 
    {
        $data = $request->validate([
            'name' => 'required',
            'email' => 'required|email|unique:users',
            'password' => 'required'
        ]);

        $project = User::create($data);

        return response()->json(['success'=>'Laravel ajax example is being processed.']);
    }
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bước 6. Thiết lập tuyến đường

Xem các tuyến đường bên dưới trong ví dụ này, chúng tôi đang sử dụng các tuyến đường của người dùng

________số 8

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bước 7. Thiết lập Chế độ xem của chúng tôi

Trong ví dụ này, chúng tôi sẽ sử dụng chào mừng. lưỡi. php mẫu như một mặc định của Laravel cài đặt

 lang="en">


     charset="utf-8">
     http-equiv="x-ua-compatible" content="ie=edge">
     name="viewport" content="width=device-width, initial-scale=1" />
     name="csrf-token" content="{{ csrf_token() }}">

    
     rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

    


 class="d-flex flex-column h-100">

    

        
         class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
             class="container-fluid">
                 class="navbar-brand" href="#">Fixed navbar
                 class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                     class="navbar-toggler-icon">
                
                 class="collapse navbar-collapse" id="navbarCollapse">
                     class="navbar-nav me-auto mb-2 mb-md-0">
                         class="nav-item">
                             class="nav-link active" aria-current="page" href="#">Home
                        
                         class="nav-item">
                             class="nav-link" href="#">Link
                        
                         class="nav-item">
                             class="nav-link disabled">Disabled
                        
                    
                     class="d-flex">
                         class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                         class="btn btn-outline-success" type="submit">Search
                    
                

cd laravel-ajax-post-example

cd laravel-ajax-post-example

Nhập thư viện jquery vào tệp xem của bạn để sử dụng các hàm ajax của jquery sẽ được sử dụng để gửi và nhận dữ liệu bằng ajax từ máy chủ . Về phía máy chủ, bạn có thể sử dụng hàm phản hồi () để gửi phản hồi cho máy khách và để gửi phản hồi ở định dạng JSON, bạn có thể xâu chuỗi hàm phản hồi bằng hàm json().