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

                                                                                                                                                                                                                                                                          

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;}

Create a view file

Create a new view file in the resources/views directory test.blade.php

The contents of the file are as follows

Routing configuration

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

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:

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

<a>
    测试入口</a>

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

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

Modify the page content

Put the downloaded jquery.min.js into public/assets/ Directory

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

nbsp;html>
    <meta>
    <title>Test Ajax</title>
    <script></script>
    返回的内容:<p></p>
    

        {!! csrf_field() !!}         提交的内容：         提交     

<script> $(&#39;.submit-btn&#39;).click(function () { let url = $(this).closest(&#39;form&#39;).attr(&#39;action&#39;); let formData = $(this).closest(&#39;form&#39;).serialize(); $.post(url,formData,function (response) { $(&#39;.response-message&#39;).text(response); }) })</script>

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

Modify the content of the request interface in the controller

File path

app/Http/Controllers/TestController.php Original content

Modified content:

修改前端页面

文件路径 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>'+responseData.text+'</span>';
            $('.response-message').empty().append(appendStr);
        })})

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

结语

本文讲的是基础的接口应用，还有比如 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!