如何用jQuery AJAX从MySQL获取记录 - Laravel 9检索数据是使用AJAX时的基本要求之一。数据被加

检索数据是使用AJAX时的基本要求之一。数据被加载而不需要重新加载整个页面。

在这个教程中，我展示了如何在Laravel 9中使用jQuery AJAX从MySQL数据库中使用GET和POST方法获取记录。

How to Fetch records from MySQL with jQuery AJAX - Laravel 9

1.数据库配置

打开.env 文件。

指定主机、数据库名称、用户名和密码。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=tutorial
DB_USERNAME=root
DB_PASSWORD=

2.表的结构

使用迁移创建一个新的表employees 。

php artisan make:migration create_employees_table

现在，从项目根目录导航到database/migrations/ 文件夹。
找到一个以create_employees_table 结尾的PHP文件并打开它。
在up() 方法中定义表的结构。

public function up()
{
    Schema::create('employees', function (Blueprint $table) {
       $table->bigIncrements('id');
       $table->string('username');
       $table->string('name');
       $table->string('email');
       $table->timestamps();
    });
}

运行迁移------。

php artisan migrate

表已经创建，我向它添加了一些记录。

3.模型

创建Employees 模型。

php artisan make:model Employees

打开app/Models/Employees.php 文件。
使用$fillable 属性指定大量可分配的模型属性 - 用户名、姓名和电子邮件。

完成的代码

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Employees extends Model
{
   use HasFactory;

   protected $fillable = [
      'username','name','email' 
   ];
}

4.控制器

创建EmployeesController 控制器。

php artisan make:controller EmployeesController

创建3个方法 -

index() -加载index 视图。
getEmployees() -这个方法是用来处理AJAX GET请求。

从employees 表中获取所有记录并分配给$employees 。将$employees 赋给$response['data'] 数组。

以JSON格式返回$response 数组。

getEmployeebyid() -该方法用于处理AJAX POST请求。读取POST值并分配给$employeeid 变量。

从employees 表中通过id搜索记录。将$employees 赋值给$response['data'] 数组。

以JSON格式返回$response 数组。

完成的代码

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Employees;

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

   public function getEmployees(){

     $employees = Employees::orderby('id','asc')->select('*')->get(); 
     
     // Fetch all records
     $response['data'] = $employees;

     return response()->json($response);
   }

   public function getEmployeebyid(Request $request){

      $employeeid = $request->employeeid;

      $employees = Employees::select('*')->where('id', $employeeid)->get();

      // Fetch all records
      $response['data'] = $employees;

      return response()->json($response);
   }
}

5.路线

打开routes/web.php 文件。
定义3条路线------。
- / -加载索引视图。
- /getEmployees -这是获取所有记录的GET类型路线。
- /getEmployeesebyid -这是一个POST类型的路由，通过ID来记录。

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\EmployeesController;

Route::get('/', [EmployeesController::class, 'index']);
Route::get('/getEmployees', [EmployeesController::class, 'getEmployees']);
Route::post('/getEmployeebyid', [EmployeesController::class, 'getEmployeebyid']);

6.视图

在resources/views/ 创建index.blade.php 文件。

HTML

在<meta > 标签中存储CSRF令牌。
创建一个输入id的文本框和2个按钮---。
- 第1个按钮是通过雇员ID来获取记录，第2个按钮是获取所有的雇员列表。
- 第二个按钮获取所有的雇员列表。
使用<table id="empTable"> ，使用jQuery AJAX来列出获取的记录。

脚本

从<meta > 标签中读取CSRF令牌，并将其分配给CSRF_TOKEN 变量。
在#but_fetchall 和#but_search 上定义点击事件。
如果#but_fetchall 被点击，然后发送AJAX GET请求到'getEmployees' ，设置dataType: 'json' 。在成功的回调中，将response 传递给createRows() 函数来创建表行。
如果#but_search 被点击，那么从文本框中读取数值并将其分配给employeeid 变量。发送AJAX POST请求到'getEmployeebyid' ，传递CSRF_TOKEN 和employeeid 作为数据，设置dataType: 'json' 。在成功的回调中，将response 传递给createRows() 函数来创建表格行。

createRows() -清空<table> <tbody> 。如果response['data'] 的长度大于0 ，则在response['data'] 上循环，创建新的<tr > ，并追加到#empTable tbody ，否则，追加 "没有找到记录 "<tr> 到<tbody> 。

完成的代码

<!DOCTYPE html>
<html>
<head>
   <title>How to Fetch records from MySQL with jQuery AJAX - Laravel 9</title>

   <!-- Meta -->
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta charset="utf-8">
   <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
   <input type='text' id='search' name='search' placeholder='Enter userid 1-24'>
   <input type='button' value='Search' id='but_search'>
   <br/>
   <input type='button' value='Fetch all records' id='but_fetchall'>

   <!-- Table -->
   <table border='1' id='empTable' style='border-collapse: collapse;'>
     <thead>
       <tr>
         <th>S.no</th>
         <th>Username</th>
         <th>Name</th>
         <th>Email</th>
       </tr>
     </thead>
     <tbody></tbody>
   </table>

   <!-- Script -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

   <script type='text/javascript'>
   var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
   $(document).ready(function(){

      // Fetch all records
      $('#but_fetchall').click(function(){

         // AJAX GET request
         $.ajax({
           url: 'getEmployees',
           type: 'get',
           dataType: 'json',
           success: function(response){

              createRows(response);

           }
         });
      });

      // Search by userid
      $('#but_search').click(function(){
         var employeeid = Number($('#search').val().trim());

         if(employeeid > 0){

           // AJAX POST request
           $.ajax({
              url: 'getEmployeebyid',
              type: 'post',
              data: {_token: CSRF_TOKEN, employeeid: employeeid},
              dataType: 'json',
              success: function(response){

                 createRows(response);

              }
           });
         }

      });

   });

   // Create table rows
   function createRows(response){
      var len = 0;
      $('#empTable tbody').empty(); // Empty <tbody>
      if(response['data'] != null){
         len = response['data'].length;
      }

      if(len > 0){
        for(var i=0; i<len; i++){
           var id = response['data'][i].id;
           var username = response['data'][i].username;
           var name = response['data'][i].name;
           var email = response['data'][i].email;

           var tr_str = "<tr>" +
             "<td align='center'>" + (i+1) + "</td>" +
             "<td align='center'>" + username + "</td>" +
             "<td align='center'>" + name + "</td>" +
             "<td align='center'>" + email + "</td>" +
           "</tr>";

           $("#empTable tbody").append(tr_str);
        }
      }else{
         var tr_str = "<tr>" +
           "<td align='center' colspan='4'>No record found.</td>" +
         "</tr>";

         $("#empTable tbody").append(tr_str);
      }
   } 
   </script>
</body>
</html>

7.演示

8.总结

在发送AJAX请求时，您可以根据您的要求使用GET或POST方法。

当使用POST方法发送时，请确保将CSRF令牌与数据一起传递，否则将无法获取数据。

如果您觉得本教程有帮助，请不要忘记分享。

如何用jQuery AJAX从MySQL获取记录 - Laravel 9

1.数据库配置

2.表的结构

3.模型

4.控制器

5.路线

6.视图

7.演示

8.总 结

8.总结