Laravel框架中的Ajax安装Laravel 从https://getcomposer.org/download/下

安装Laravel

从getcomposer.org/download/下载并安装最新版本的Composer.
在Visual Studio Code中打开Windows终端，用下面的命令安装Laravel安装器。
```
composer global require laravel/installer
```
(adsbygoogle = window.adsbygoogle || []).push({});
创建新的文件夹命名为LearnLaravelWithRealApps.使用Visual Studio Code打开LearnLaravelWithRealApps文件夹。在这个文件夹中，创建名为LearnLaravelWithRealApps的新项目，命令如下。
```
laravel new LearnLaravelWithRealApps
```
(adsbygoogle = window.adsbygoogle || []).push({});
运行LearnLaravelWithRealApps项目，命令如下。
```
php artisan serve
```
打开LearnLaravelWithRealApps项目，网址如下。
```
http://localhost:8000
```
(adsbygoogle = window.adsbygoogle || []).push({});

(addsbygoogle = window.addsbygoogle || []).push({});

添加JQuery库

在公共文件夹中创建名为js的新文件夹。将JQuery库复制到public/js文件夹。

(adsbygoogle = window.adsbygoogle || []).push({})。

创建控制器

在app/Http/Controllers文件夹下创建名为DemoController.php的新PHP文件，如下所示。

<?php

namespace App\Http\Controllers;

class DemoController extends Controller
{
	public function index()
	{
		return view('demo/index');
	}

	public function ajax()
	{
		return response()->json(array('msg' => 'Hello World'));
	}
}

(adsbygoogle = window.adsbygoogle || []).push({})。

创建视图

在resources/views文件夹下创建名为demo的新文件夹。在这个文件夹中，创建名为index.blade.php的新刀片文件，如下所示。

<html>

	<head>
		<title>Laravel</title>
		<script src="{{asset('js/jquery-3.6.0.min.js')}}" type="text/javascript"></script>
		<script>
			$(document).ready(function() {

				$('#buttonDemoAjax').on('click', function() {
					$.ajax({
						type: 'GET',
						url: "{{url('/demo/ajax')}}",
						success: function(data) {
							$('#result').html(data.msg);
						}
					});
				});

			});
		</script>

	</head>

	<body>

		<h3>Index</h3>
		<input type="button" value="Demo Ajax" id="buttonDemoAjax">
		<br>
		<span id="result"></span>

	</body>

</html>

(adsbygoogle = window.adsbygoogle || []).push({})。

创建路线

打开routes文件夹中的web.php文件, 添加新的路由，如下所示:

<?php
				
use Illuminate\Support\Facades\Route;

use App\Http\Controllers\DemoController;

Route::group([], function () {
	Route::get('/', [DemoController::class, 'index']);
	Route::get('/demo', [DemoController::class, 'index']);
	Route::get('/demo/index', [DemoController::class, 'index']);
	Route::get('/demo/ajax', [DemoController::class, 'ajax']);
});

Laravel项目的结构

(adsbygoogle = window.adsbygoogle || []).push({});

运行应用程序

在Demo控制器中访问index动作，其URL如下。

输出

点击Demo Ajax按钮来调用Ajax

The postAjax in Laravel Frameworkappeared first onLearn Programming with Real Apps.