PHP+Laravel的简单应用教程【ajax的使用】PHP·拉弗尔的简单应用教程【阿贾克斯的使用】,下面由Laravel框架教程栏目给大家介绍PHP Laravel的简单应用教程【阿贾克斯的使用】,希望对需要的朋友有所帮助!
声明
本文只是零散的应用教程,默认Laravel项目已经安装完成,并正常运行;
Ajax 的使用
创建控制器
在项目根目录下运行命令
PHP工匠制作:控制器测试控制器创建成功会提示控制器创建成功。
创建成功后会在app/Http/Controllers/目录下生成TestController.php文件
在TestController.php文件中加入
公共函数索引(){
返回视图(‘ test ‘);}公共函数TestJax(){
“回声”请求成功了;死去;}
创建视图文件
在资源/视图目录中新建一个视图文件test.blade.php
文件中的内容如下
路由配置
打开路由文件routes/web.php,默认路由如下:
下方新增一条展示测试埃阿斯页面的路由
Route:get(‘test ‘,[test controller :3360 class,’ index ‘])-name(‘ test。索引’);新增一条接收埃阿斯请求的路由
Route:post(‘test ‘,[test controller :3360 class,’ Testjax ‘])-name(‘ test。Ajax’);更多路由相关内容请查看文档路由《Laravel 8 中文文档》
增加进入测试页面的入口
打开资源/视图/欢迎。刀锋。PHP文件,找到大概111 行的位置:
复制内容,修改为需要的测试页面入口
a href=’ { { route(‘ test。索引’)} ‘ class=’ ml-1下划线’
测试入口/a
保存后刷新页面,就能看到测试入口了
点击测试入口,进入测试页面,会看到以下内容
修改页面内容
将下载好的jquery.min.js放入公共/资产/目录下
修改资源/视图/测试。刀锋。PHP文件的内容
!DOCTYPE htmlhtmlhead
meta charset=’utf-8 ‘
标题测试Ajax/标题
脚本src=’ { { asset(‘ assets/jquery。分钟。js ‘)} } ‘/脚本/头体
返回的内容: p style=’ color : red ‘ class=’ response-message ‘/p
form method=’ post ‘ action=’ { { route(‘ test。Ajax ‘)} } ‘
{!csrf_field()!}
提交的内容:输入类型=’text ‘名称=’text ‘
span class=’submit-btn ‘提交/span
/form/bodyscript
$(‘.提交-BTN ‘).click(function () {
让url=$(this).最接近(‘ form ‘).attr(‘ action ‘);
让formData=$(this).最接近(‘ form ‘).连载
$。post(url,formData,function (response) {
$(‘.响应消息’)。文本(回复);
})
})/script/html点击测试页面的提交可以看到控制器中testAjax()返回的内容已经显示在页面上
修改控制器中接收请求接口的内容
文件路径app/Http/Controllers/Testcontroller。PHP原内容
修改后的内容:
修改前端页面
文件路径资源/视图/测试。刀锋。PHP
$(‘.提交-BTN ‘).click(function () {
让url=$(this).最接近(‘ form ‘).attr(‘ action ‘);
让formData=$(this).最接近(‘ form ‘).连载
$。post(url,formData,function (response) {
让responseData=response.data
let appendStr=’ span style=’ border : 1px纯蓝’ ‘响应数据。文本’/span ‘;
$(‘.响应消息’)。空()。append(appendStr);
})})保存后在页面输入框中输入内容,点击提交后即可看到最新内容
结语