ajax 增删改查
1.Ajax 添加表格含下拉框添加展示（两次添加）
html代码
<input id="account" type="text" placeholder="请输入账号">
<input id="password" type="password" placeholder="请输入密码">
<input id="again" type="password" placeholder="请输入确认密码">
<input id="nickname" type="text" placeholder="请输入昵称">
<select id="belongtoList">//显示归属人下拉框
</select>
<button> 添加归属人</button>//点击时弹出归属人模态框
//添加归属人弹出框内
<input type="text" id="addName">
<input type="text" id="addPhone">
<button onclick="addSystemUser()"> 确认添加归属人</button>//向后台添加归属人数据复制代码
//添加展示归属人jq
//添加归属人function addSystemUser(){
var name = $("#addName").val();
var phone = $("#addPhone").val();
$.ajax({
type:'post',
dataType:'json',
url: "/sAdmin/add_user",//访问服务器后台的url
data:{
'name': name,
'phone': phone,
'project_id':0,//传给后台 页面隐藏不显示
'company_id':0,
'_token':'{{ csrf_token() }}'},
success: function (result) {//返回成功后执行的函数，result是返回的数据
alert("添加成功！");
getSystemUser();
}
})
}
//展示归属人
$(document).ready(function () {
getSystemUser();
});
function getSystemUser(){ $.ajax({
type:'post',
dataType:'json',
url: "/sAdmin/get_user",//访问服务器后台的url
data:{'project_id':0, 'company_id': 0,'_token':'{{ csrf_token() }}'},
success: function (result){ //返回成功后执行的函数，result是返回的数据
var data = result.data;
var html="<option value='' hidden>请选择归属人</option><option value='0'>无</option>";
for(var i=0;i<data.length;i++){
html+="<option value='"+data[i].id+"'>"+data[i].name+"</option>"
}
$("#belongtoList").html(html);
},
error: function (err) {
alert("提交失败");
}
})
}
<button onclick="add()"> 添加</button>复制代码
<table class="table">
<thead>
<tr>
<th>名称</th>
<th>昵称</th>
<th>归属人</th>
<th>创建时间</th>
</tr>
</thead>
<tbody id="projectBody"></tbody>
</table>
复制代码
jq代码
//点击添加按钮向数据库添加信息
function add(){
$.post("add_project",//访问后台接口路径
{
"account":$("#account").val(), //key值前后端商议
"password":$("#password").val(),
"password_confirmation":$("#again").val(),
"name":$("#nickname").val(),
'_token':'{{ csrf_token() }}'//使用levaral模板需要加这句
},
function(json){
if(json.status == 0){
location.reload(window.location.href);//成功之后刷新页面
}else{
$(".noInfo").html(json.msg);//提示信息
}
});
}
//将添加到数据库的数据 渲染到页面表格中
$(document).ready(function () {
projectTable()//打开页面就执行渲染方法
});
function projectTable() {
var system_admins = @json($system_admins)['data'];//php将数据请求过来，也可以用ajax再次获取
var data = system_admins;
var html ="";
for(var i=0;i<data.length;i++){
html+='<tr><td>'
+data[i].account+'</td><td>'
+data[i].name+'</td><td>'+data[i].belong_to_name+'</td><td>'
+data[i].created_at
+'</td><td><button onclick=(editData(this)) value="'+data[i].id+'" data-userid="'+data[i].belong_to+'">修改</button><button onclick="sAdminIdDel('+data[i].id+')">删除</button></td></tr>'
}
$("#projectBody").html(html);
}
//表格数据添加结束
复制代码
2(a).ajax删除表格数据
思路:每个table 有好多行tr 每行对应有一个删除按钮
1.点击删除按钮时弹出bootstrap模态框 执行一个方法
<buttonon click='setIdDel("+comData[i].id+")'>删除</button>
//comData[i].id后台传来的数据对应的id
function setIdDel(id) {
//模态框内的隐藏的 <input type="hidden" id="company_id_del">
$("#company_id_del").val(id)
}
2.弹出框 两个按钮 一个取消 一个确认删除按钮
<button onclick="companyDel()">确认删除</button>
点击确认删除时执行ajax后台删除
function companyDel() {
$.post("delete_company",
{
"id":$("#company_id_del").val(),
'_token':'{{ csrf_token() }}'
}, function(json){
if(json.status===0){
alert(json.msg);
location.reload(window.location.href);//后台删除后刷新页面
}else{
alert(json.msg);
}
});
}复制代码
2（b）表单方式删除数据
<buttonon click='setIdDel("+comData[i].id+")'>删除</button>
function setIdDel(id) {
//模态框内的隐藏的 <input type="hidden" name="id" id="company_id_del">
$("#company_id_del").val(id)
} <form action="{{ route('deleteWeeklyPlanExpand') }}" method="post">
{{ csrf_field() }}
//<input type="hidden" name="_method" value="DELETE">
<div class="modal-body" style="color: #000;text-align: center">
<h3 style="color: #f00;">您确定要删除本条周计划信息吗?</h3>
<input type="hidden" name="id" id="company_id_del">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消删除</button>
<button type="submit" class="btn btn-red" style="color: #FFFFFF">确定删除</button>
</div>
</form>
复制代码
3.ajax添加数据添加展示 （表格）
思路 1页面内有一添加按钮 点击弹出bootstrap模态框，
//模态框内代码
<input id="addName" placeholder="名称">
<input id="addDesc" placeholder="描述">
<input id="addNum" placeholder="账号">
<input id="addPassword" placeholder="密码">
<input id="againPassword" placeholder="确认密码">
//确认添加按钮
<button>取消</button>
<button onclick="Add()">确认添加</button>
//页面表格代码
<button>添加</button>
<table class="table">
<tr> <th>公司名称</th>
<th>公司描述</th>
<th>公司账号</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tbody id="companyProBody">展示表格数据</tbody>
</table>
//向数据库中添加数据
function Add() {
$.post("add_company", {
"name":$("#addName").val(),
"desc":$("#addDesc").val(),
"account":$("#addNum").val(),
"password":$("#addPassword").val(),
"password_confirmation":$("#againPassword").val(),
'_token':'{{ csrf_token() }}'
},
function(json){
if(json.status == 0){
location.reload(window.location.href);
}else{
$("#noInfo").html(json.msg);
}
});
}
//将数据展示到页面表格中
$(document).ready(function () {
companyTable()
});
function companyTable() {
for(var i=0;i<len;i++){
html+="<tr>"+
"<td>"+comData[i].name+"</td>"+
"<td>"+comData[i].desc+"</td>"+
"<td hidden>"+comData[i].id+"</td>"+
"<td>"+comData[i].company_admin.account+"</td>"+
"<td>"+comData[i].created_at+"</td>"+
"<td><button onclick='setIdDel("+comData[i].id+")' data-toggle='modal' data-target='#cyy_delete'>删除</button></td>"+
"</tr>"
}
$("#companyProBody").html(html);
}
复制代码
4.ajax 修改数据
思路：每个table 中每行对应一组数据 有一个修改当前行的按钮。
1.点击当前行弹出模态框 显示当前行的信息 并且可以修改
2.修改后点击确认修改按钮Ajax 向后台发起请求 刷新页面
难点 ：如何获取当前行得按钮id 与模态框对应
//点击修改按钮
<button onclick=(editData(this)) value="'+data[i].id+'" data-userid="'+data[i].belong_to+'">
修改
</button>
//弹出模态框内容
<input id="accountId" name="account" type="text" placeholder="管理员账号">
<input id="nickname" name="name " type="text" placeholder="请修改昵称">
<input id="passWord" name="password" type="password" placeholder="不改密码请留空">
<button id="system_account_id" value="" hidden></button>
//确认修改按钮
<button id="edit_admin">确认修改</button>
function editData(that){
var parent=$(that).parent().parent();
$("#nickname").val(parent.find("td:eq(1)").html());
$("#accountId").val(parent.find("td:eq(0)").html());
// console.log(that.value);
$('#system_account_id').val(that.value)
//归属人
//$("#edit_a").val(that.dataset.userid);
//console.log(that.dataset.userid)
}
$("#edit_admin").click(function() { $.ajax({
type: 'post',
url: "/sAdmin/update_system_account",
data:{
'id':$('#system_account_id').val(),// 传给后台
'name':$('#nickname').val(),
'password': $('#passWord').val(),
//'belong_to':$("#edit_a").val(),
'_token':'{{ csrf_token() }}'
},
success: function (result) {//返回成功后执行的函数，result是返回的数据
if(status==0){
window.location.reload();
console.log(result)
$(".edit_suss").css({"display":"block","color":"red"}).html("修改成功");
}else{
// alert("修改失败！");
$(".edit_suss").css({"display":"block","color":"red"}).html("修改失败");
}
}
});
})
（1.）修改数据（表单提交简单）//修改按钮 弹出模态框
<button data-toggle='modal' data-target='#cyy_edit' onclick='updateAuth(this)'>修改</button> 复制代码
//弹出模态框
<form action="{{ route('updateUser') }}" method="post">
{{ csrf_field() }} <div class="modal-body">
<div class="">
<ul class="list-unstyled cyy_user_ul">
<li>
<label class="testPa">
<span class="left_b">人员名称</span>
<input class="cyy_user_input" name="name" type="text" id="updateName" autocomplete="off">
</label>
</li>
<li>
<label>
<span class="left_b">手机号码</span>
<input class="cyy_user_input" name="phone" type="text" id="updatePhone" autocomplete="off">
</label>
</li>
<li>
//影藏的id
<input name="id" type="hidden" id="updateId">
</li>
</ul>
</div>
</div>
<div class="modal-footer cyy_modal_footer">
<p style="text-align: center">
<button type="button" class="btn cyy_add_user" data-dismiss="modal">关闭</button>
<button type="submit" id="userProjectTiJiao" class="btn cyy_add_user">确认修改</button>
</p>
</div>
</form>
function updateAuth(that) {
var parent=$(that).parent().parent();
$("#updateName").val(parent.children("td:eq(0)").html());
$("#updatePhone").val(parent.children("td:eq(1)").html());
//模态框影藏的id
$("#updateId").val(parent.children("td:eq(2)").html());
}复制代码
5.按条件查询数据+展示数据+分页
思路 ：与展示数据一样 向后台传参数
<label class="selectDiv">
<span>工点：</span>
<select class="selectStyle" id="select_id" onchange="font_Color()">
</select>
</label>
<label class="selectDiv">
<span>开始时间：</span>
<input id="searchStarTime" class="applyInput appDateTime addFromTime selectStyle" placeholder="请选择开始时间">
</label>
<label class="selectDiv">
<span>结束时间：</span>
<input id="searchEndTime" class="applyInput appDateTime addEndTime selectStyle" placeholder="请选择结束时间">
</label>
<button onclick="projectTable(1,10)">查询</button>
<script>
function projectTable(page,page_size){
$.ajax({
type: "post",
data:{
"workpoint_id":$("#select_id").val(),
"plan_start_time":timeChange($("#searchStarTime").val()),
"plan_end_time":timeChange($("#searchEndTime").val()),
"page":page,//分页
"page_size":page_size
},
url: "http://api.ltrailways.com/construction_plan/get_plans",
success: function (result) {
console.log(result);
var data = result.data;
var html = "";
var pageNumber = Math.ceil(result.count/page_size);
var ST ="";
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
ST =( data[i].status == 0 ) ? "待完成" :"已完成";
var start_tim = timeToDate(data[i].plan_start_time);
var st_tim = timeToDate(data[i].plan_end_time);
html += '<tr><td><input type="checkbox"></td><td>'
+ST+'</td><td>'
+data[i].response_times+'</td><td>'
+ start_tim + '</td><td>'
+ st_tim + '</td><td>'
+ data[i].workteam_name + '</td><td><span>' + data[i].workpoint_name + '</span><span>' + data[i].workitem_name + '</span><span>' + data[i].worksequence_name + '</span><span>' + data[i].workline_name + '</span><span>' + mileageShow(data[i].plan_start_pos) + '</span><span>到</span><span>' + mileageShow(data[i].plan_end_pos) + '</span></td><td>'
+ data[i].workpoint_name + '</td><td>'
+ data[i].workitem_name + '</td><td>'
+ data[i].worksequence_name + '</td><td>'
+ data[i].workline_name + '</td><td>'
+ mileageShow(data[i].plan_start_pos) + '</td><td>'
+ mileageShow(data[i].plan_end_pos) + '</td><td>'
+ transformMileage(data[i].plan_end_pos, data[i].plan_start_pos) + '<span>公里</span></td><td>'
+ data[i].plan_number + '</td><td></td><td><td></td><td></td><td><td></td><td></td><td></td><td></td><td>'
+ data[i].note + '</td><td><button class="btn btn-danger" data-toggle="modal" data-target="#delete_myModal" onclick="setIdDel(' + data[i].id + ')">删除</button></td></tr>'
}
$("#projectBody").html(html);
//表格添加分页
paging(page,page_size,pageNumber,".pagination","projectTable");
}
else {
$("#projectBody").html("此项目下暂无信息......");
}
}
});
}
</script>
复制代码
分页js (通用代码)
function paging(page,pageSize,pagenumber,pageHtml,Fn) {
var pageNext="", pagePrevious="",pagehtml = "";
for(var x=4;x>0;x--){
if(page-x>0){
pagePrevious+="<li><a href='javascript:"+Fn+"("+(page -x)+","+pageSize+");'>" + (page-x) + "</a></li>"
}
}
for(var n=1;n<=4;n++){
if(page+n<=pagenumber){
pageNext+="<li><a href='javascript:"+Fn+"("+(page + n)+","+pageSize+");'>" + (page+n) + "</a></li>"
}
}
pagehtml += "<li><a href='javascript:"+Fn+"(1,"+pageSize+");'>首页 <span class='pageSpan'>( 1 )</span></a>" + "</li>"
+"<li><a href='javascript:"+Fn+"("+(page > 1 ? page - 1: 1)+","+pageSize+");'>< 上一页</a>"
+pagePrevious
+"</li><li class='active'><a href='javascript:;' id='current_page'>" + page + "</a>"
+pageNext
+"</li><li><a href='javascript:"+Fn+"("+(page >= pagenumber ? page:page + 1)+","+pageSize+");'>下一页 ></a>"
+"</li><li><a href='javascript:"+Fn+"("+pagenumber+","+pageSize+");'>尾页 <span class='pageSpan'>( "+pagenumber+" )</span></a></li>" ;
$(pageHtml).html(pagehtml);
}
function pagingPhone(page,pageSize,pagenumber,pageHtml,Fn) {
var pagehtml = "";
pagehtml += "<li><a href='javascript:"+Fn+"(1,"+pageSize+",);'>首页 <span class='pageSpan'>(1)</span></a>" + "</li>"
+"<li><a href='javascript:"+Fn+"("+(page > 1 ? page - 1: 1)+","+pageSize+",);'>上一页</a>"
+"</li><li class='active'><a href='javascript:;' id='current_page'>" + page + "</a>"
+"</li><li><a href='javascript:"+Fn+"("+(page >= pagenumber ? page:page + 1)+","+pageSize+",);'>下一页</a>"
+"</li><li><a href='javascript:"+Fn+"("+pagenumber+","+pageSize+",);'>尾页 <span class='pageSpan'>("+pagenumber+")</span></a></li>" ;
$(pageHtml).html(pagehtml);
}
复制代码
扫一扫
1233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
