Tutoriel d'application simple de PHP+Laravel [Utilisation d'ajax]-Laravel-php.cn

Tutoriel d'application simple de PHP+Laravel [Utilisation d'ajax]

藏色散人

Libérer： 2020-12-16 14:27:19

avant

2407 Les gens l'ont consulté

Ce qui suit est

Framework Laravel La colonne tutoriel présentera le tutoriel d'application simple de PHP+Laravel [utilisation d'AJAX], j'espère que cela sera utile aux amis dans le besoin !

Déclaration

Cet article n'est qu'un didacticiel d'application dispersé. Le projet Laravel par défaut a été installé et fonctionne normalement ; >Ajax Utilisez

pour créer un contrôleur

et exécutez la commande

php artisan make:controller TestController

Copier après la connexion

dans le répertoire racine du projet. Si la création réussit, vous le ferez. sera invité

une fois la création réussie. Le

fichier

sera généré dans le répertoire

Ajouter Controller created successfully.

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

Copier après la connexion

app/Http/Controllers/TestController.php
<.>TestController.php au fichier pour créer le fichier de vue

PHP + Laravel 的简单应用教程 — ajax 的使用 Créez un nouveau fichier de vue dans le répertoire

Le contenu du fichier sont les suivantsresources/viewstest.blade.php

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

Configuration du routage

PHP + Laravel 的简单应用教程 — ajax 的使用 Ouvrez le fichier de routage

, la route par défaut est la suivante :

Ajouter un itinéraire ci-dessous pour afficher la page de test Ajaxroutes/web.php

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

Copier après la connexion

Ajouter un nouvel itinéraire pour recevoir les requêtes Ajax

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

Copier après la connexion

Pour plus d'informations sur le routage, veuillez consulter le document de routage "Laravel 8 Chinese Documentation" (Adresse : https://learnku.com/docs /laravel/8.x/routing/9365)

Ajouter une entrée à la page de test
Ouvrez le fichier

et recherchez la ligne 111 :

Copiez le contenu et modifiez à l'entrée de la page de test requiseresources/views/welcome.blade.php

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

Copier après la connexion

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

Enregistrez et actualisez la page pour voir Atteint l'entrée de test

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

Cliquez l'entrée du test pour accéder à la page de test, vous verrez le contenu suivant

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

Modifier le contenu de la page

PHP + Laravel 的简单应用教程 — ajax 的使用 Mettre le téléchargé

dans le répertoire

jquery.min.jsModifier le contenu du public/assets/ fichier

<!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>

Copier après la connexion

Cliquez PHP + Laravel 的简单应用教程 — ajax 的使用 sur la page de test et vous pouvez voir que le contenu renvoyé par

dans le contrôleur a été affiché sur la page

resources/views/test.blade.php

提交testAjax()

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

Modifier le contenu de l'interface de requête dans le contrôleur

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

Contenu original

Contenu modifié :

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

Copier après la connexion

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

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