Laravel框架实现即点即改功能的方法分析
本文实例讲述了Laravel框架实现即点即改功能的方法。分享给大家供大家参考,具体如下:
有的时候我们不需要更改大量数据,只需要更改一个字段的时候,我们就用到了即点即改,以用户模块,修改用户名称为例,下图为我的展示模块
当我们点击用户名时,会出现一个修改框,那么这个修改框是怎么来的呢? 我们点击时,隐藏在这个td当中的修改框会出现,而展示时的用户名会隐藏起来,我们怎么利用代码实现?
<td onclick="saveuser({{$v- id}})"
<span id="bbb{{$v- id}}" {{$v- username}}</span
<input type="text" value="{{$v- username}}" style="display:none" id="aaa{{$v- id}}"
onblur="edituser({{$v- id}})"
</td
从上述代码中我们可以看到一个存放用户名的span标签,还有一个默认为隐藏的input框,用来存放用户名,接下来我们要做的就是:通过相应的点击事件,实现即点即改;在修改数据时,我们尽量要根据他的唯一字段id进行修改,避免出错:
首先,我在页面显示span标签当中起了一个id,名为 “bbb”+用户的id,在隐藏的input中id为 “aaa”+用户的id,在相应点击事件中存放id,方便ajax取用户的id值;
接下来就是通过ajax技术,传递相应id值,以及要修改的数据到控制器,进行相应的修改:
1)首先引入jquery文件
<script src="{{asset('Follow')}}/js/jquery.min.js" </script
2)点击事件:当我们点击时,span标签内容设置为空值,input标签出现
function saveuser(id){
document.getElementById('aaa'+id).style.display='block';//显示input
document.getElementById('bbb'+id).innerHTML="";//span标签的值设置为空
}
3)输入我们需要修改的数据,如下图:
4)要修改的数据写完之后,就到了最关键的时候,怎样进行修改?
通过上面,可以看到input有一个失去焦点事件,因此我在这个事件里进行ajax请求
function edituser(id){
var username = document.getElementById('aaa'+id).value;//获取文本框的值
$.ajax({
type:'GET',//请求方式
data:{'id':id,'username':username},//传递参数
url:"{{url('edituser')}}",//地址
success:function(e){//回调
if(e==1){
document.getElementById('aaa'+id).style.display = 'none';//如果修改成功,input隐藏
document.getElementById('bbb'+id).innerHTML = username;//修改成功,将表里修改后的数据赋值给span标签
}else{
alert('修改失败');
window.location.reload();
}
}
})
}
5)通过ajax传递的参数,进行数据查询和修改: 首先我们在控制器接收:
public function edituser(){
$arr = Input::get();//接收ajax传递的参数
$result = BlueShop::useredit($arr);//调用模型,并将接收到的 id 和要修改的数据赋给模型
if($result){
$status = 1;
}else{
$status = 2;
}
return $status;//将结果返回给展示页面
}
然后我们在模型进行我们的逻辑代码部分
//$arr数组 $arr['id'] 用户id $arr['username']要修改的用户名
public static function useredit($arr){
$res = DB::table('jy_user')- where('id',$arr['id'])- update($arr);//通过id修改
return $res;//返回结果
}
6)此时我们可以看到,页面已经修改
而数据表中的数据也进行了更新
这就是一个简单的即点即改,希望对大家能有所帮助!!!
更多关于Laravel相关内容感兴趣的读者可查看本站专题:《Laravel框架入门与进阶教程》、《php优秀开发框架总结》、《php面向对象程序设计入门教程》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》
希望本文所述对大家基于Laravel框架的PHP程序设计有所帮助。
- WordPress REST API 内容注入漏洞分析
- 如何为Kerberos环境的CDH集群在线扩容数据节点
- WinDbg 漏洞分析调试(一)
- MySQL MVCC(多版本控制)
- 如何在集群外节点跨网段向HDFS写数据
- 如何使用HAProxy实现Kerberos环境下的Impala负载均衡
- Hue中使用Oozie创建Shell工作流在脚本中切换不同用户
- Python学习(七):模块 优雅的封装
- 非Kerberos环境下Kafka数据到Flume进Hive表
- 6.如何为Hue配置OpenLDAP认证
- Socket 通信原理
- PHP 面试知识梳理
- 5.如何为Impala配置OpenLDAP认证
- 传统Spring项目使用FeignClient组件访问微服务
- php概述
- php教程
- php环境搭建
- PHP书写格式
- php变量
- php常量
- PHP注释
- php数组
- php字符串 string
- PHP整型 integer
- PHP浮点型 float
- php布尔型
- php数据类型之数组
- php数据类型之对象
- php数据类型之null
- php数据类型之间的转换
- php运算符
- php表达式
- PHP循环控制
- PHP流程控制
- php函数
- php全局变量
- PHP魔术变量
- php命名空间
- php 日期
- PHP包含文件
- php文件
- PHP 文件上传
- php Cookies
- php Sessions
- php email
- php安全email
- php错误处理
- PHP异常处理
- php过滤器
- PHP 高级过滤器
- php json
- php 表单
- PHP MySQL 简介
- PHP 连接 MySQL
- php创建数据库
- php 创建表
- php mysq 插入数据
- PHP MySQL 插入多条数据
- PHP MySQL 预处理语句
- php mysql 读取数据
- php mysql where
- PHP MySQL Order By
- PHP MySQL Update
- PHP MySQL Delete
- php ODBC
- 【淘宝】python的淘宝秒杀抢购下单源码参考
- Python素材下载爬虫,ui素材下载爬取采集源码
- Python与seo的应用,sitemap.xml文件制作工具源码
- 关键词爬虫,Python花瓣画板关键词采集存储数据库
- 电商商品爬虫,亚马逊amazon采集源码
- Python tk例子,古董音乐播放器exe
- 爬虫例子,Python多线程爬虫例子案例
- 【爬虫】花瓣图片爬虫,Python图片采集下载源码
- Python大作网图片采集下载,多线程图片爬虫
- Python素材下载爬虫,多线程rar下载爬虫
- 一个简单的图片爬虫,Python图片采集下载
- 百度统计后台总是被广告骚扰?看看应用python是如何实现的
- Python电商爬虫,法国亚马逊商品采集
- Python堆糖网图片爬虫,多进程及多线程的使用例子
- Python Post提交简单案例,文本内容在线语音合成