① 设置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模型修改数据的更多相关文章

  1. ajax传值修改数据

    主界面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  2. Django模型修改及数据迁移

    Migrations Django中对Model进行修改是件麻烦的事情,syncdb命令仅仅创建数据库里还没有的表,它并不对已存在的数据表进行同步修改,也不处理数据模型的删除. 如果你新增或修改数据模 ...

  3. ajax中的同步与异步修改数据的问题

    这次项目中因为前端有事儿,项目紧急加个新需求,于是自己硬着头皮上去看了下前端的逻辑后便开始动手了,但是为了简单起见就直接自己写了个ajax调服务来获取数据,然后修改前端定义的全局数据 //ajax来请 ...

  4. python 全栈开发,Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)

    昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...

  5. Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件

    一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...

  6. c#教程之通过数据绑定修改数据

    通过数据绑定修改数据 "实体框架"提供了与数据库的双向通信通道.前面已经讲述了如何使用"实体框架"获 取数据,现在来看看如何修改获取的信息,并将改动发送回数据库 ...

  7. ASP.NET MVC 5 学习教程:通过控制器访问模型的数据

    原文 ASP.NET MVC 5 学习教程:通过控制器访问模型的数据 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 创建连 ...

  8. Struts2.5 利用Ajax将json数据传值到JSP

    AJAX +JSON=>JSP AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着 ...

  9. jQuery插件:Ajax将Json数据自动绑定到Form表单

    jQuery注册方法的两种常用方式: //jQuery静态方法注册 //调用方法$.a1() $.extend({ a1: function () { console.log("a1&quo ...

随机推荐

  1. webpack打包如何统一js和css中图片资源路径

    目前项目应用的是vue-cli,自行修改了部分配置.三个环境的情况跟你差不多,测试/生产环境的层级比你还深. 先说下修改了哪些配置 1-build/utils.js下的cssLoaders内的gene ...

  2. 啥叫IP地址及子网掩码?

    啥叫IP地址及子网掩码 ??? 1.IP地址的定义及分类 1.1IP地址的定义 1.2IP地址的分类 2.子网掩码 1.1  互联网上连接的网络设备和计算机都有唯一的地址,此作为该主机在Interne ...

  3. LNMP架构的源码编译以及yum安装

    LNMP架构的源码编译以及yum安装 目录 LNMP架构的源码编译以及yum安装 一.LNMP架构的编译安装 1. 安装nginx服务 (1)关闭防火墙 (2)安装依赖包 (3)创建运行用户 (4)编 ...

  4. 问题描述 ens33 不见了

    事情是这样紫的 我今天用Xshell 连接Linux 发现连接不上去百思不得其解,然后就去Linux里看 ifconfig 的配置,然后发现 ens33居然不见了,就只有lo 和 virbr()  , ...

  5. zeppelin安装及配置

    1.下载安装包,zepplin下载地址:http://zeppelin.apache.org/download.html #创建解压目录 mkdir -p /opt/software #解压 tar ...

  6. MATLAB基础学习篇(1)

    MATLAB中只定义了以2和10为底对数,其它 使用换底公式,例如:log8(7)=log7/log8. x=input('Please enter x:'); y=input('Please ent ...

  7. Solution -「CF 1349D」Slime and Biscuits

    \(\mathcal{Description}\)   Link.   有 \(n\) 堆饼干,一开始第 \(i\) 堆有 \(a_i\) 块.每次操作从所有饼干中随机一块,将其随机丢到另外一堆.求所 ...

  8. Solution -「国家集训队」「洛谷 P4451」整数的 lqp 拆分

    \(\mathcal{Description}\)   Link.   求 \[\sum_{m>0\\a_{1..m}>0\\a_1+\cdots+a_m=n}\prod_{i=1}^mf ...

  9. Dubbo扩展点应用之一filter及@Activate自激活使用

    与很多框架一样,Dubbo也存在拦截(过滤)机制,可以通过该机制在执行目标程序前后执行我们指定的代码.Dubbo中Filter只是Dubbo提供的可自定义扩展的扩展点之一.通过该扩展点地理解,可以触类 ...

  10. Dubbo SPI机制之一JDK中的SPI

    首先简单阐述下什么是SPI:SPI 全称为 (Service Provider Interface) ,是JDK内置的一种服务提供发现机制.目前有不少框架用它来做服务的扩展发现,简单来说,就是一种动态 ...