因为做的是一个内部管理系统，只用了一个主页面，所有的都不允许整个网页刷新，所以我们只能用ajax
来做，当然刚开始做也走了很多的弯路，最终还是做出来了 这点还是比较欣慰的
今天要整理一下ajax实现修改功能 这里的login登录也不写了，主要是写一下修改的大体代码，方便以后
用的时候查找
样式我用的是bootstrap，一开始要引入三个文件，这里就不多说了，下面是页面所要显示的样式
<p class="modal fade" id="mymodal2" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> <p class="modal-dialog"> <p class="modal-content"> <p class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="mymodallabel">修改</h4> </p> <p class="modal-body"> <?php $sql="select * from qxcg "; $arr=$db->query($sql); foreach($arr as $v) { $sqn = select qxmc from qxypmx where qxdh='{$v[1]}'; $att = $db->query($sqn); $squ = select uid from login where num='{$v[4]}'; $ann = $db->query($squ); } ?> 器械名称： <input type="text" value="<?php echo $att[0][0]; ?> id=rmc/><br/><br> 采购数量：<input type="text" value="<?php echo $v[2]; ?> id=rsl/><br/><br/> 采购日期：<input type="text" value="<?php echo $v[3]; ?> id=rqi/><br/><br/> 采购员：<input type="text" readonly="readonly" value="<?php echo $ann[0][0]; ?> id=rcg/> </p> <p class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" id="rcbtn">保存</button> </p> </p><!-- /.modal-content --> </p><!-- /.modal --> </p> </p>
当然看到这个地方，还要有一个修改的按钮 需点击后触发事件
<input type='button' class='xiugai' value='修改' data-toggle='modal' data-target='#mymodal2' ids0='{$v[0]}' ids1='{$att[0][0]}' ids2='{$v[2]}' ids3='{$v[3]}' ids4='{$ann[0][0]}'/> //这里面的值是通过php代码求出来的，这里就不多说了
下面是ajax部分了 为了方便，我把修改写成了一个方法，用到的时候直接调用就可以了
function xiugai() { var ids = ; //首先定义为空 var rmc1= ; var rsl1= ; var rqi1= ; var rcg1= ; $(.xiugai).click(function() { //给修改按钮一个点击事件 ids = $(this).attr(ids0); rmc1= $(this).attr(ids1); //把之前有的值取出来，赋值给表单的val rsl1= $(this).attr(ids2); rqi1= $(this).attr(ids3); rcg1= $(this).attr(ids4); $(#rmc).val(rmc1); $(#rsl).val(rsl1); $(#rqi).val(rqi1); $(#rcg).val(rcg1); $(#rcbtn).click(function(){ var rmc=$(#rmc).val(); var rsl=$(#rsl).val(); var rqi=$(#rqi).val(); var rcg=$(#rcg).val(); $.ajax({ url:xiugai.php, data:{ids:ids,rmc:rmc,rsl:rsl,rqi:rqi}, type:post, datatype:text, success:function(xx){ //alert(xx); if(xx.trim()==ok) { alert(修改成功); load(); } } }) $('#mymodal2').modal('hide') }) }); }
<?php $ids=$_post["ids"]; $rmc=$_post["rmc"]; $cgsl=$_post["rsl"]; $cgrq=$_post["rqi"]; include("dbda.class.php"); $db=new dbda(); $sql1="select qxdh from qxypmx where qxmc='{$rmc}'"; $arr=$db->query($sql1); $sql=update qxcg set qxdh='{$arr[0][0]}',cgsl='{$cgsl}',cgrq='{$cgrq}' where ids='{$ids}'; if($db->query($sql,0)) { echook; } else { echono; }
这样就可以实现修改按钮的功能了 点击修改之后有个弹出框，如图所示：
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
php+ajax如何实现表格的实时编辑
用ajax实现session超时跳转到登录页面
以上就是ajax怎样实现修改功能（附代码）的详细内容。