Simple application tutorial of PHP+Laravel [Usage of ajax]-Laravel-php.cn

The following is a simple application tutorial of PHP Laravel [Usage of ajax] from theLaravel Frameworktutorial column. I hope it will be helpful to friends in need!

Statement

This article is just a scattered application tutorial. The default Laravel project has been installed and running normally;

Ajax Use

Create a controller

Run the command in the project root directory

php artisan make:controller TestController

Copy after login

If the creation is successful, you will be promptedController created successfully.
After successful creation, theTestController.phpfile will be generated in theapp/Http/Controllers/directory
Add to theTestController.phpfile

public function index(){ return view('test');}public function testAjax(){ echo '请求成功了';die;}

Copy after login

PHP + Laravel 的简单应用教程 — ajax 的使用

Create a view file

Create a new view file in theresources/viewsdirectorytest.blade.php

PHP + Laravel 的简单应用教程 — ajax 的使用
The contents of the file are as follows

PHP + Laravel 的简单应用教程 — ajax 的使用

Routing configuration

Open the routing fileroutes/web.php, the default route is as follows:

PHP + Laravel 的简单应用教程 — ajax 的使用

Add a route below to display the test Ajax page

Route::get('test', [TestController::class, 'index'])->name('test.index');

Copy after login

Add a new route to receive Ajax requests

Route::post('test', [TestController::class, 'testAjax'])->name('test.ajax');

Copy after login

For more routing related information, please check the document routing "Laravel 8 Chinese Documentation" (Address: https://learnku.com/docs /laravel/8.x/routing/9365)

Add the entrance to the test page

Openresources/views/welcome.blade. phpfile, find about line 111:

PHP + Laravel 的简单应用教程 — ajax 的使用

Copy the content and modify it to the required test page entrance

 测试入口

Copy after login

PHP + Laravel 的简单应用教程 — ajax 的使用

After saving, refresh the page and you will see the test entrance

PHP + Laravel 的简单应用教程 — ajax 的使用

Click on the test entrance to enter the test page and you will see the following content

PHP + Laravel 的简单应用教程 — ajax 的使用

Modify the page content

Put the downloadedjquery.min.jsintopublic/assets/Directory

PHP + Laravel 的简单应用教程 — ajax 的使用

Modify the contents of theresources/views/test.blade.phpfile

  Test Ajax 
 返回的内容:
  {!! csrf_field() !!} 提交的内容： 提交

Copy after login

Click on the ## of the test page #SubmitYou can see that the content returned bytestAjax()in the controller has been displayed on the page

PHP + Laravel 的简单应用教程 — ajax 的使用

Modify the content of the request interface in the controller

File path

app/Http/Controllers/TestController.phpOriginal content

PHP + Laravel 的简单应用教程 — ajax 的使用 Modified content:

PHP + Laravel 的简单应用教程 — ajax 的使用

修改前端页面

文件路径resources/views/test.blade.php

$('.submit-btn').click(function () { let url = $(this).closest('form').attr('action'); let formData = $(this).closest('form').serialize(); $.post(url,formData,function (response) { let responseData = response.data; let appendStr = ''+responseData.text+''; $('.response-message').empty().append(appendStr); })})

Copy after login

保存后在页面输入框中输入内容，点击提交后即可看到最新内容

PHP + Laravel 的简单应用教程 — ajax 的使用

结语

本文讲的是基础的接口应用，还有比如 Vue、Recat、mui 等项目中请求接口的示例请自行了解

The above is the detailed content of Simple application tutorial of PHP+Laravel [Usage of ajax]. For more information, please follow other related articles on the PHP Chinese website!