tp5（laravel7） ajax模型修改数据
① 设置ajax请求（10分）
② 后台更改数据值（10分）
③ 重新计算平均分（10分）
④ 无刷新更新评分结果（10分）
思路：
在详情页面中有一个评分的按钮，单击后进行修改数据，首先找见本条数据的主键id，通过ajax 将id和修改的参数值传递到后台控制器中，再去模型进行修改数据。
代码：模型中提取数据，发送至视图进行循环渲染
模型代码
<?php namespace app\day29\model; use think\Model; class CompanyModel extends Model
{
//
protected $table = "day29"; //数据查询
public static function listInfo()
{
return self::paginate(6);
}
}
控制器代码：
<?php namespace app\day29\controller; use app\day29\model\CompanyModel;
use think\Controller;
use think\Request; class Company extends Controller
{
/**
* 显示资源列表
*
* @return \think\Response
*/
public function index()
{
//调取模型的数据
$data=CompanyModel::listInfo();
// 将数据发送至页面
$this->assign('data',$data);
return view(); }
}
视图代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<table class="table"> <tr>
<td>企业名称</td>
<td>企业评分</td>
<td>操作</td>
</tr> {foreach $data as $item}
<tr>
<td>{$item.name}</td>
<td>{$item.score}</td>
<td><a href="/day29/company/edit/id/{$item.id}">详情</a></td>
</tr>
{/foreach}
</table>
{$data->render()}
</body>
</html>
以上是代码和效果。
接下来就是点击详情后的功能实现，单击详情后将本条数据的id传至控制器
控制器代码
public function edit($id)
{
//接受id，并验证id
if (!intval($id)){
$this->error('id错误','/day29/company/index');
}
// 根据id提取模型中的数据
$details=CompanyModel::details($id);
// 发送视图至数据，并渲染
$this->assign('details',$details);
return view(); }
模型代码：
//详情查询
public static function details($id)
{
return self::find($id); }
视图代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> </head>
<body>
<div class="table-responsive">
<table class="table">
<caption>详情</caption> <tr>
<td>企业名称</td>
<td>企业评分</td>
</tr>
<tr>
<th>{$details.name}</th>
<th>{$details.score}</th>
</tr>
</table>
</div> <form action="" method="get">
<input type="hidden" name="id" value="{$details.id}" class="getId">
<p>评分：</p>
<input type="radio" name="score" value="10">10分
<input type="radio" name="score" value="8">8分
<input type="radio" name="score" value="6">6分
<input type="radio" name="score" value="4">4分
<input type="radio" name="score" value="2">2分
<input type="button" value="评分" class="btn btn-success test">
</form>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
$('.test').click(function (){
// 获取数据
var score=$('input[name=score]:checked').val();
var id=$('.getId').val(); $.ajax({
url:"http://www.day.com/day29/company/update",
method:"PUT",
data:{
score:score,
id:id
},
dataType:"JSON",
success:function (res){
alert(res.message)
} }) }) </script>
效果图：
接下来的修改的重点，选中单选按钮，点击评分按钮，即可修改评分
控制器代码，接受ajax的参数，发送至模型进行修改
public function update(Request $request,$id)
{
//
$data=$request->put();
$id=$data['id'];
$res=[
'score'=>$data['score']
];
$res=CompanyModel::updata($res,$id);
if (!$res){
return json(['code'=>500,'data'=>$res,'message'=>'更新失败']);
}else{
return json(['code'=>200,'data'=>$res,'message'=>'更新成功']);
} }
模型代码：
//修改
/* 更新数据
* @access public
* @param array $data 数据数组
* @param array $where 更新条件
* @param array|true $field 允许字段
public static function update($data = [], $where = [], $field = null)
*/
public static function updata($res, $id)
{
return self::update($res, ['id' => $id], true); }
模型易错点
控制器易错点
laravel实现以上功能：
① 设置ajax请求（10分）
② 后台更改数据值（10分）
③ 重新计算平均分（10分）
④ 无刷新更新评分结果（10分）
html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body> <table class="table">
<tr>
<td>id</td>
<td>企业名称</td>
<td>企业评分</td>
</tr>
<tr>
<td id="id" >{{$info->id}}</td>
<td>{{$info->name}}</td>
<td id="divide">{{$info->divide}}</td>
</tr>
</table> <form action="" method="">
<input type="hidden" name="id" value="{{$info->id}}">
<input type="radio" name="divide" value="10分">10分
<input type="radio" name="divide" value="8分">8分
<input type="radio" name="divide" value="6分">6分
<input type="radio" name="divide" value="4分">4分 <button type="button" id="sub">提交</button>
</form> </body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script src="/static/js/layer/layer.js">
</script>
<script>
$('#sub').click(function () {
var divide= $("input[type='radio']:checked").val()
var id= $("#id").text()
$.ajax({
url: '/day3/fraction',
type: 'POST',
data: {
divide,
id
},
dataType: 'JSON',
success: function (res) { if (res.code == 200) {
//替换值，实现无刷新更新评分结果
$('#divide').text(res.data)
layer.msg('修改成功!', {icon: 1, time:3000}); } else { layer.msg('修改失败!', {icon: 2, time:3000});
}
}
}) }) </script>
路由：
Route::group(['namespace'=>'Day3'],function (){
// 修改分值
Route::post('day3/fraction','ExamController@fraction')->name('day3.fraction');
});
控制器代码：
public function fraction(Request $request){
// 接值
$fraction=$request->post();
// 修改分值
$res= Day::where('id','=',$fraction['id'])->update(['divide'=>$fraction['divide']]);
if (!$res){
return ['code'=>500,'message'=>'error','data'=>''];
}
// 找见字段值，并将值传递给后台，前端进行替换即可
$divide=Day::find($fraction['id'])->divide;
return ['code'=>200,'message'=>'success','data'=>$divide];
}
}
tp5（laravel7） ajax模型修改数据的更多相关文章
- ajax传值修改数据
主界面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- Django模型修改及数据迁移
Migrations Django中对Model进行修改是件麻烦的事情,syncdb命令仅仅创建数据库里还没有的表,它并不对已存在的数据表进行同步修改,也不处理数据模型的删除. 如果你新增或修改数据模 ...
- ajax中的同步与异步修改数据的问题
这次项目中因为前端有事儿,项目紧急加个新需求,于是自己硬着头皮上去看了下前端的逻辑后便开始动手了,但是为了简单起见就直接自己写了个ajax调服务来获取数据,然后修改前端定义的全局数据 //ajax来请 ...
- python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)
昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...
- Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件
一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...
- c#教程之通过数据绑定修改数据
通过数据绑定修改数据 "实体框架"提供了与数据库的双向通信通道.前面已经讲述了如何使用"实体框架"获 取数据,现在来看看如何修改获取的信息,并将改动发送回数据库 ...
- ASP.NET MVC 5 学习教程：通过控制器访问模型的数据
原文 ASP.NET MVC 5 学习教程:通过控制器访问模型的数据 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 创建连 ...
- Struts2.5 利用Ajax将json数据传值到JSP
AJAX +JSON=>JSP AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着 ...
- jQuery插件：Ajax将Json数据自动绑定到Form表单
jQuery注册方法的两种常用方式: //jQuery静态方法注册 //调用方法$.a1() $.extend({ a1: function () { console.log("a1&quo ...
随机推荐
- webpack打包如何统一js和css中图片资源路径
目前项目应用的是vue-cli,自行修改了部分配置.三个环境的情况跟你差不多,测试/生产环境的层级比你还深. 先说下修改了哪些配置 1-build/utils.js下的cssLoaders内的gene ...
- 啥叫IP地址及子网掩码？
啥叫IP地址及子网掩码 ??? 1.IP地址的定义及分类 1.1IP地址的定义 1.2IP地址的分类 2.子网掩码 1.1 互联网上连接的网络设备和计算机都有唯一的地址,此作为该主机在Interne ...
- LNMP架构的源码编译以及yum安装
LNMP架构的源码编译以及yum安装 目录 LNMP架构的源码编译以及yum安装 一.LNMP架构的编译安装 1. 安装nginx服务 (1)关闭防火墙 (2)安装依赖包 (3)创建运行用户 (4)编 ...
- 问题描述 ens33 不见了
事情是这样紫的 我今天用Xshell 连接Linux 发现连接不上去百思不得其解,然后就去Linux里看 ifconfig 的配置,然后发现 ens33居然不见了,就只有lo 和 virbr() , ...
- zeppelin安装及配置
1.下载安装包,zepplin下载地址:http://zeppelin.apache.org/download.html #创建解压目录 mkdir -p /opt/software #解压 tar ...
- MATLAB基础学习篇（1）
MATLAB中只定义了以2和10为底对数,其它 使用换底公式,例如:log8(7)=log7/log8. x=input('Please enter x:'); y=input('Please ent ...
- Solution -「CF 1349D」Slime and Biscuits
\(\mathcal{Description}\) Link. 有 \(n\) 堆饼干,一开始第 \(i\) 堆有 \(a_i\) 块.每次操作从所有饼干中随机一块,将其随机丢到另外一堆.求所 ...
- Solution -「国家集训队」「洛谷 P4451」整数的 lqp 拆分
\(\mathcal{Description}\) Link. 求 \[\sum_{m>0\\a_{1..m}>0\\a_1+\cdots+a_m=n}\prod_{i=1}^mf ...
- Dubbo扩展点应用之一filter及@Activate自激活使用
与很多框架一样,Dubbo也存在拦截(过滤)机制,可以通过该机制在执行目标程序前后执行我们指定的代码.Dubbo中Filter只是Dubbo提供的可自定义扩展的扩展点之一.通过该扩展点地理解,可以触类 ...
- Dubbo SPI机制之一JDK中的SPI
首先简单阐述下什么是SPI:SPI 全称为 (Service Provider Interface) ,是JDK内置的一种服务提供发现机制.目前有不少框架用它来做服务的扩展发现,简单来说,就是一种动态 ...