简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  PHP Framework  >  Simple application tutorial of PHP+Laravel [Usage of ajax]

Simple application tutorial of PHP+Laravel [Usage of ajax]

藏色散人
藏色散人forward
2020-12-14 11:55:512396browse

The following is a simple application tutorial of PHP Laravel [Usage of ajax] from the Laravel 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

If the creation is successful, you will be promptedController created successfully.
After successful creation, the TestController.php file will be generated in the app/Http/Controllers/ directory
Add to the TestController.php file 

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

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

Create a view file

Create a new view file in the resources/views directory test.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');

Add a new route to receive Ajax requests

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

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. php file, find about line 111:

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

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

<a href="{{route(&#39;test.index&#39;)}}" class="ml-1 underline">
    测试入口</a>

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 downloaded jquery.min.js into public/assets/ Directory

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

Modify the contents of the resources/views/test.blade.php file

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>Test Ajax</title>
    <script src="{{asset(&#39;assets/jquery.min.js&#39;)}}"></script></head><body>
    返回的内容:<p style="color: red" class="response-message"></p>
    <form method="post" action="{{route(&#39;test.ajax&#39;)}}">
        {!! csrf_field() !!}
        提交的内容：<input type="text" name="text">
        <span class="submit-btn">提交</span>
    </form></body><script>
    $('.submit-btn').click(function () {
        let url = $(this).closest('form').attr('action');
        let formData = $(this).closest('form').serialize();
        $.post(url,formData,function (response) {
            $('.response-message').text(response);
        })
    })</script></html>

Click on the ## of the test page #Submit You can see that the content returned by testAjax() in the controller has been displayed on the page

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

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

Modify the content of the request interface in the controller

File path

app/Http/Controllers/TestController.php Original 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 = '<span style="border: 1px solid blue">'+responseData.text+'</span>';
            $('.response-message').empty().append(appendStr);
        })})

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

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!

Statement：
This article is reproduced at:learnku.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Laravel's form forgery and CSRF protectionNext article：Laravel's form forgery and CSRF protection

Related articles

See more