tp 5.1 ajax删除写法,JQuery_Ajax增删改实例一 (TP5框架)

前端代码

路径:application/index/view/user/index.html

{$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" / }

{$title}

---

添加用户

ID	用户名	操作

{volist name="list" key="k" id="v" mod="2"}

{eq name="mod" value="0"}

{$v['id']}{$v['name']}

data-target="#myModal">查看信息框

data-target="#editModal">编辑

删除

{/eq}

{/volist}

ID	用户名	操作

{volist name="list" key="k" id="v" mod="2"}

{eq name="mod" value="1"}

{$v['id']}{$v['name']}

data-target="#myModal">查看信息框

data-target="#editModal">编辑

删除

{/eq}

{/volist}

×

...

关闭

aria-hidden="true">×

用户添加

姓名:

关闭

确认添加

aria-hidden="true">×

用户修改

姓名:

关闭

确认修改

// 设置弹框参数

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);

addAJAX(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: '/update/' + 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: '/edit/' + id,

dataType: 'json',

success: function (data) {

console.log(data);

if (data.status) {

$('#eid').val(data.info.id);

$('#enames').val(data.info.name);

} else {

$('#enames').val(data.info);

}

},

error: function () {

alert('失败');

}

});

}

//删除

function delAJAX(id, row) {

$.ajax({

type: 'get',

url: '/del/' + 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 addAJAX(array) {

$.ajax({

type: 'post',

url: '/add/',

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: '/read/' + 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('失败');

}

});

}

定义页面访问路由地址

路径:application/route.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

// +----------------------------------------------------------------------

//tp首页

Route::get('/','index/index/index');//前台首页

//用户列表

Route::get('user','index/user/index');//列表首页

Route::get('read/:id','index/user/read');//查看用户详情

Route::post('add','index/user/add');//添加用户

Route::get('del/:id','index/user/del');//删除用户

Route::get('edit/:id','index/user/edit');//编辑用户

Route::post('update/:id','index/user/update');//保存编辑

后端php

路径:application/index/controller/User.php

/**

* Created by PhpStorm.

* User: 14280

* Date: 2019/8/22

* Time: 15:44

*/

namespace app\index\controller;

use think\Controller;

use think\Db;

use think\Request;

class User extends Controller

{

//主页

public function index()

{

$res = Db::table('hc_user')->field(['id', 'name'])->order(['id' => 'ASC'])->select();

// var_dump($res);die();

return view('user/index', [

'title' => '用户列表',

'list' => $res

]);

}

//查看详情

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);

}

//添加用户

public function add(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);

}

public function del($id)

{

$res = Db::table('hc_user')->delete($id);

if($res){

$info['status'] = true;

$info['info'] = '删除成功';

}else{

$info['status'] = false;

$info['info'] = '删除成功';

}

return json($info);

}

//查看编辑

public function edit($id)

{

$res = Db::table('hc_user')->field(['pass','status'],true)->find($id);

// var_dump($res);

if ($res === null){

$info['status'] = false;

$info['info'] = '无此信息';

}else{

$info['status'] = true;

$info['info'] = $res;

}

return json($info);

}

public function update(Request $request,$id)

{

$post = $request->post();

// var_dump($post);

$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);

}

}