JQuery_Ajax增删改实例二 (TP5框架之RESTful
2020-04-21 本文已影响0人
zhaoxiaohui520
前端代码
路径:application/restful/view/users/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{$title}</title>
{css href="__INDEX__/reset.css" /}
{css href="__INDEXCSS__/bootstrap.min.css" /}
{css href="__INDEXCSS__/toastr.min.css" /}
{js href="__INDEXJS__/jquery.min.js" /}
{js href="__INDEXJS__/bootstrap.min.js" /}
{js href="__INDEXJS__/toastr.min.js" / }
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 bg-primary p20">
<h1>{$title}</h1>
<hr>
<button class="btn btn-default" data-toggle="modal" data-target="#exampleModal">
添加用户
</button>
</div>
<div class="clearfix"></div>
<div class="row mt20">
<div class="col-md-6">
<table class="table table-hover bg-info">
<tr>
<th>ID</th>
<th>用户名</th>
<th class="col-md-6">操作</th>
</tr>
{volist name="list" key="k" id="v" mod="2"}
{eq name="mod" value="0"}
<tr>
<td>{$v['id']}</td>
<td id="tdname">{$v['name']}</td>
<td>
<button id="{$v['id']}" class="btn btn-xs btn-default read-btn" data-toggle="modal"
data-target="#myModal">查看信息框
</button>
<button id="{$v['id']}" class="btn btn-xs btn-primary edit-btn" data-toggle="modal"
data-target="#editModal">编辑
</button>
<button id="{$v['id']}" class="btn btn-xs btn-danger del-btn">删除</button>
</td>
</tr>
{/eq}
{/volist}
</table>
</div>
<div class="col-md-6">
<table class="table table-hover bg-info">
<tr>
<th>ID</th>
<th>用户名</th>
<th class="col-md-6">操作</th>
</tr>
{volist name="list" key="k" id="v" mod="2"}
{eq name="mod" value="1"}
<tr>
<td>{$v['id']}</td>
<td id="tdname">{$v['name']}</td>
<td>
<button id="{$v['id']}" class="btn btn-xs btn-default read-btn" data-toggle="modal"
data-target="#myModal">查看信息框
</button>
<button id="{$v['id']}" class="btn btn-xs btn-primary edit-btn" data-toggle="modal"
data-target="#editModal">编辑
</button>
<button id="{$v['id']}" class="btn btn-xs btn-danger del-btn">删除</button>
</td>
</tr>
{/eq}
{/volist}
</table>
</div>
</div>
</div>
</div>
<!-- 查询Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModaltitle"></h4>
</div>
<div class="modal-body" id="myModalbody">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<!--添加模态框-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModaltitle">用户添加</h4>
</div>
<form id="group">
<div class="modal-body" id="exampleModalbody">
<div class="form-group">
<label for="recipient-name" class="control-label">姓名:</label>
<input type="text" class="form-control" id="names" name="name" value="">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default gb-btn" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary add-btn">确认添加</button>
</div>
</form>
</div>
</div>
</div>
<!--修改模态框-->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModaltitle">用户修改</h4>
</div>
<input type="hidden" class="form-control" id="eid" name="eid" value="">
<form id="upGroup">
<input type="hidden" name="_method" value="PUT" >
<div class="modal-body" id="exampleModalbody">
<div class="form-group">
<label for="recipient-name" class="control-label">姓名:</label>
<input type="text" class="form-control" id="enames" name="name" value="">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default gb-btn" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary up-btn">确认修改</button>
</div>
</form>
</div>
</div>
</div>
<script>
// 设置弹框参数
toastr.options = {
closeButton: true,// 是否显示关闭按钮
progressBar: false,// 实现显示计时条
timeOut: "2000", // 自动关闭时间
positionClass: "toast-top-right" // 提示位置
// toast-top-full-width 顶端，宽度铺满整个屏幕
// toast-top-right 顶端右边
};
$(function () {
//查询
$('.read-btn').click(function () {
var id = $(this).attr('id'); //获得当前点击的ID
console.log('当前点击的ID: ' + id);
readAJAX(id);
});
//添加
$('.add-btn').click(function () {
var input = $('#group input').val();
// console.log(input);
//判断input表单是否为空
if ($.trim(input) == '') {
alert('值不能为空');
return false;
}
var arr = $('#group input').serializeArray(); //将获取到数据转换数组
// console.log(arr);
saveAJAX(arr);
});
//删除
$('.del-btn').click(function () {
var id = $(this).attr('id');//获取当前删除的id
console.log('当前点击ID:' + id);
if (confirm('您确定要[ 删 除 ]吗?')) {
var row = $(this).parents('tr');//获得当前行的所有信息
// console.log(row);
delAJAX(id, row);
}
});
//编辑
$('.edit-btn').click(function () {
var id = $(this).attr('id');
console.log('当前点击的ID:' + id);
editAJAX(id);
});
//保存编辑
$('.up-btn').click(function () {
var input = $('#upGroup input').val();
// console.log(input);
//判断input表单是否为空
if ($.trim(input) == '') {
alert('值不能为空');
return false;
}
var id = $('#eid').val();
var earr = $('#upGroup input').serializeArray(); //转换数组
// console.log(id, earr);
updAJAX(id, earr)
});
});
//保存编辑
function updAJAX(id, array) {
$.ajax({
type: 'post',
url: '/users/' + id,
dataType: 'json',
data: array,
success: function (data) {
console.log(data);
if (data.status) {
toastr.success(data.info);
$('.gb-btn').click();
setTimeout(function(){
window.location.reload();//刷新当前页面.
},2000)
} else {
toastr.error(data.info);
}
},
error: function () {
alert('重复值,请重试');
}
});
}
//查看编辑信息
function editAJAX(id) {
$.ajax({
type: 'get',
url: '/users/' + id,
dataType: 'json',
success: function (data) {
console.log(data);
if (data.status) {
$('#eid').val(data.body.id);
$('#enames').val(data.body.name);
} else {
$('#enames').val(data.body);
}
},
error: function () {
alert('失败');
}
});
}
//删除
function delAJAX(id, row) {
$.ajax({
type: 'delete',
url: '/users/' + id,
dataType: 'json',
success: function (data) {
console.log(data);
if (data.status) {
toastr.success(data.info);
row.remove('tr');
} else {
toastr.error(data.info);
}
},
error: function () {
alert('失败');
}
});
}
//添加信息
function saveAJAX(array) {
$.ajax({
type: 'post',
url: '/users/',
data: array,
dataType: 'json',
success: function (data) {
console.log(data);
if (data.status) {
toastr.success(data.info);
$('.gb-btn').click();
setTimeout(function(){
window.location.reload();//刷新当前页面.
},2000)
} else {
toastr.error(data.info);
}
},
error: function (data) {
alert('重复添加');
}
});
}
//查看详情
function readAJAX(id) {
$.ajax({
type: 'get',
url: '/users/' + id,
dataType: 'json',
success: function (data) {
console.log(data);
if (data.status) {
$('#myModaltitle').html(data.title);
$('#myModalbody').html(data.body.name);
} else {
$('#myModaltitle').html(data.title);
$('#myModalbody').html(data.body);
}
},
error: function () {
alert('失败');
}
});
}
</script>
</body>
</html>
定义页面访问路由地址
路径:application/route.php
<?php
use think\Route;
// +----------------------------------------------------------------------
// | ThinkPHP [ WE CAN DO IT JUST THINK ]
// +----------------------------------------------------------------------
// | Copyright (c) 2006~2018 http://thinkphp.cn All rights reserved.
// +----------------------------------------------------------------------
// | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
// +----------------------------------------------------------------------
// | Author: liu21st <liu21st@gmail.com>
// +----------------------------------------------------------------------
//tp首页
Route::get('/','index/index/index');//前台首页
//资源路由(用户列表)
Route::resource('users','restful/users');
后端php
路径:application/restful/controller/Users.php
<?php
namespace app\restful\controller;
use think\Controller;
use think\Request;
use think\Db;
class Users extends Controller
{
/**
* 显示资源列表
*
* @return \think\Response
*/
public function index()
{
$res = Db::table('hc_user')->field(['id', 'name'])->order(['id' => 'DESC'])->select();
// var_dump($res);die();
return view('users/index', [
'title' => '用户列表',
'list' => $res
]);
}
/**
* 显示创建资源表单页.
*
* @return \think\Response
*/
public function create()
{
//
}
/**
* 保存新建的资源
*
* @param \think\Request $request
* @return \think\Response
*/
public function save(Request $request)
{
$post = $request->post();
// var_dump($post);die();
$list = [
'name' => $post['name']
];
// var_dump($list);
$res = Db::table('hc_user')->insert($list);
// var_dump($res);
if ($res > 0 ){
$info['status'] = true;
$info['info'] = '添加成功';
} else {
$info['status'] = false;
$info['info'] = '添加失败,请重试';
}
return json($info);
}
/**
* 显示指定的资源
*
* @param int $id
* @return \think\Response
*/
public function read($id)
{
$res = Db::table('hc_user')->field(['pass','status'],true)->find($id);
// var_dump($res);die();
if ($res === null){
$info['status'] = false;
$info['title'] = '无此信息';
$info['body'] = '无此人信息,请重试';
}else{
$info['status'] = true;
$info['title'] = $res['name'];
$info['body'] = $res;
}
return json($info);
}
/**
* 显示编辑资源表单页.
*
* @param int $id
* @return \think\Response
*/
public function edit($id)
{
}
/**
* 保存更新的资源
*
* @param \think\Request $request
* @param int $id
* @return \think\Response
*/
public function update(Request $request, $id)
{
// var_dump($request);die();
$post = $request->post();
// var_dump($post);
// die();
$res = Db::table('hc_user')->where(['id'=>$id])->update($post);
if ($res){
$info['status'] = true;
$info['info'] = '修改成功';
}else{
$info['status'] = false;
$info['info'] = '修改失败';
}
return json($info);
}
/**
* 删除指定资源
*
* @param int $id
* @return \think\Response
*/
public function delete($id)
{
$res = Db::table('hc_user')->delete($id);
if($res){
$info['status'] = true;
$info['info'] = '删除成功';
}else{
$info['status'] = false;
$info['info'] = '删除成功';
}
return json($info);
}
}
