① 设置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. 原生js获取子元素

    感谢原文作者:归一山人 原文链接:https://www.cnblogs.com/guiyishanren/p/12214757.html 获取子元素的方法有 //获取第一个demo类 dom = d ...

  2. Eclipse集成Git/SVN插件及使用

    感谢大佬:https://www.cnblogs.com/jpfss/p/8027347.html 1. Git插件安装 1.1 下载插件 首先打开Eclipse,然后点击Help>Instal ...

  3. MySQL的注释方法

    MySQL的三种注释方式 #1.单行注释 -- 2.单行注释(注意中间要带有一个空格才能生效) /*3.多行注释*/

  4. Redis的配置文件redis.conf详解

    Redis的配置文件位于redis的安装目录下,一般不要直接操作出厂设置的配置文件,需要对其进行备份.# Redis的配置文件样例: # Redis configuration file exampl ...

  5. chmod以数字形式改变文件权限

    Linux文件的三种身份和四种权限,三种身份分别为: u:文件的拥有者 g:文件所属的群组 o:其他用户 对于每个身份,又有四种权限,分别为: r:读取文件的权限(read) w:写入文件的权限(wr ...

  6. Docker的数据管理（上）

    Docker的数据管理(上) 1.管理docker容器中数据 2.容器互联(使用centos镜像) 1.管理docker容器中数据: 管理Docker 容器中数据主要有两种方式:数据卷(Data Vo ...

  7. JDK线程池

    简介 多线程技术主要解决处理器单元内多个线程执行的问题,它可以显著减少处理器单元的闲置时间,增加处理器单元的吞吐能力,但频繁的创建线程的开销是很大的,那么如何来减少这部分的开销了,那么就要考虑使用线程 ...

  8. suse 12 二进制部署 Kubernetets 1.19.7 - 第12章 - 部署dashboard插件

    文章目录 1.12.0.创建namespace 1.12.1.创建Dashboard rbac文件 1.12.2.创建dashboard文件 1.12.3.查看pod以及svc 1.12.4.获取 d ...

  9. Spring的AOP的底层实现原理？

    aop是ioc的一个扩展功能,先有的ioc,再有的aop,只是在ioc的整个流程中新增的一个扩展点而已:BeanPostProcessor 底层实现用的是动态代理 AOP应用场景 场景一: 记录日志 ...

  10. CentOS7更新OpenSSH8

    今天使用漏洞扫描工具扫描了一下系统漏洞,发现有一个openssh版本的漏洞.所以本着安全的原则修复一下. 第一时间打开百度搜索相关内容,大多数是编译安装的.每个人的环境和版本也不一样.有一定连不上去的 ...