ajax 增删改查

1.Ajax 添加表格含下拉框添加展示（两次添加）

<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 οnclick=(editData(this)) value="'+data[i].id+'" data-userid="'+data[i].belong_to+'">修改</button><button οnclick="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 οnclick='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" οnclick="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+");'>&lt; 上一页</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+");'>下一页 &gt;</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);
}

参考：

（小白适用）前端数据交互（ajax form）