较简单的用ajax修改和添加功能（链接数据库）

修改和添加关于数据库的信息，可以用于任何的添加和修改

这些数据库和前面的随笔数据库是一样的

一、显示出数据库中的信息

（1）显示的效果也可以是用bootstrap的标签页显示（前面一定要引入bootstrap）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<ul id="myTab" class="nav nav-tabs">       <li class="active" style=" font-size:30px" ><a href="#home" data-toggle="tab"> 饭面类</a>       </li>       <li style=" font-size:30px"><a href="#ios" data-toggle="tab">特色小吃</a></li>       <li class="dropdown" style=" font-size:30px">             <a href="#" id="myTabDrop1" class="dropdown-toggle"data-toggle="dropdown">酒水饮品 <b class="caret"></b>             </a>             <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" style=" font-size:25px">                 <li><a href="#jmeter" tabindex="-1" data-toggle="tab">                     酒水</a>                 </li>                 <li><a href="#ejb" tabindex="-1" data-toggle="tab">                     饮品</a>                 </li>             </ul>       </li> </ul>

二、修改内容

（1）标题显示之后，就是每一个标题中的内容了，可以用ajax遍历

1 2 3

<p id="mian">        </p>

（2）进行数据库遍历

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$.ajax({     url:"mianlei.php",   //编写处理页面     dataType:"TEXT",     success: function(d){         var hang = d.split("|");  //拆分字符“|”串：显示行         var str = "";         for(var i=0;i<hang.length;i++)         {             var lie = hang[i].split("^");  //拆分字符串“^”:显示列             str += "<input type='button' value='"+lie[2]+"' class='aa1' code='"+lie[1]+"' data-toggle='modal' data-target='#myModal'/> ";         }     　　$("#mian").html(str);   //把遍历的内容写在上面的                             } })

（3）处理页面的编写如下

1 2 3 4 5 6

<?php include("DBDA.php");  //调用封装好的数据库类 $db = new DBDA();    $sql = "select * from caidan where fcode =('1101')";  //查询符合父级号的所有信息 echo $db->StrQuery($sql);  //输出结果

（4）然后进行修改的内容可以用模态框

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">      <div class="modal-dialog">           <div class="modal-content">                <div class="modal-header">                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>                         <h4 class="modal-title" id="myModalLabel">修改</h4>           　　　</div>           　　  <div class="modal-body" id="content">                     <!--这里是显示的修改的内容-->           　　  </div>           　　　<div class="modal-footer">                　　<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>                　　<button type="button" class="btn btn-primary" id="tijiao">提交</button>           　　　</div>           </div><!-- /.modal-content -->      </div><!-- /.modal --> </div>

（5）修改的时候，里面要默认显示原来的名字和价格，所以要将前面遍历的代号传过来

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

$(".aa1").click(function(){     var code = $(this).attr("code");  //找到code值     $.ajax({         url:"xiugaichuli.php",  //编写处理页面         data:{c:code},  //将code值传过去         type:"POST",         dataType:"TEXT",         success: function(d){             var hang = d.split("|");  //拆分字符“|”串：显示行             var str = "";             for(var i=0;i<hang.length;i++)             {                 var lie = hang[i].split("^");  //拆分字符串“^”:显示列                 str += "<div>名称：<input type='text' value='"+lie[2]+"' code='"+lie[1]+"' class='name'  /></div><br /><div>价格：<input type='text' value='"+lie[0]+"' code='"+lie[1]+"' class='price'  /></div>";             }                                                       $("#content").html(str);  //写入模态框中的content的位置                    }     })                                       })

（6）单击提交按钮后写入数据库，并且这里也修改了，单击提交按钮进行修改

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

$("#tijiao").click(function(){     var code = $(".name").attr("code");   //找到名称中的代号     var code = $(".price").attr("code");  //找到价格的代号     var name = $(".name").val();  //找到名称的值     var price = $(".price").val();  //找到价格的值     $.ajax({         url:"tjsk.php",  //处理页面的编写         data:{n:name,p:price,c:code},  //将值传到处理页面         type:"POST",         dataType:"TEXT",         success: function(data){  ///处理页面成功后输出             if(data.trim()=="ok")             {             　　alert("修改成功！");             }                                                                       }     }) })

          

三、添加内容

（1）同上面的写一个弹框，里面有文本框

1	<div id="tianjia" data-toggle='modal' data-target='#myModall'>添加菜品</div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div class="modal-content">      <div class="modal-header">          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>          <h4 class="modal-title" id="myModalLabel">添加菜品</h4>      </div>      <div class="modal-body" id="content">          <div id="name">名称：<input type="text" id="ming"/></div>          <br />      <div id="price">价格：<input type="text" id="jia"/></div>      </div>      <div class="modal-footer">          <button type="button" class="btn btn-primary" id="tijiao1">提交</button>      </div> </div>

（2）填写信息后，单击提交按钮写入数据库

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$("#tijiao1").click(function(){     var n = $("#ming").val();  //找到名称文本框的值     j = $("#jia").val();  //找到价格文本框的值     $.ajax({         url:"tianjia.php",  //编写处理页面         data:{n:n,j:j},  //将值传过去         type:"POST",         dataType:"TEXT",         success: function(d){             if(d.trim()=="ok")             {             　　alert ("添加成功！");             }         　　　window.location.href="xiugaicanpin.php";         }   　　　　})  })

（3）处理页面的编写

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<?php     include("DBDA.php");     $db = new DBDA();           $n = $_POST["n"];  //将传来的值接收     $j = $_POST["j"];           $sql = " select max(code) from caidan where fcode='1101' ";  //查找这个父级代号的最大代号     $attr = $db->Query($sql);     foreach($attr as $v)     {         $c = $v[0]+1;  //使最大值加1         $sqll = " insert into caidan values('{$j}','{$c}','{$n}','1101','','','')";  //写入数据库         $db->Query($sqll,0);         echo "ok";     } ?>

（4）添加结束后看下结果

    

到此，结束了，简单的添加和修改的功能，后面还要增加删除功能~~