修改和添加關(guān)于數(shù)據(jù)庫的信息，可以用于任何的添加和修改這些數(shù)據(jù)庫和前面的隨筆數(shù)據(jù)庫是一樣的
一、顯示出數(shù)據(jù)庫中的信息
（1）顯示的效果也可以是用bootstrap的標(biāo)簽頁顯示（前面一定要引入bootstrap）
ul id="myTab" class="nav nav-tabs">
li class="active" style=" font-size:30px" >a href="#home" rel="external nofollow" data-toggle="tab"> 飯面類/a>
/li>
li style=" font-size:30px">a href="#ios" rel="external nofollow" data-toggle="tab">特色小吃/a>/li>
li class="dropdown" style=" font-size:30px">
a href="#" rel="external nofollow" 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" rel="external nofollow" tabindex="-1" data-toggle="tab">
酒水/a>
/li>
li>a href="#ejb" rel="external nofollow" tabindex="-1" data-toggle="tab">
飲品/a>
/li>
/ul>
/li>
/ul>
二、修改內(nèi)容
（1）標(biāo)題顯示之后，就是每一個標(biāo)題中的內(nèi)容了，可以用ajax遍歷
（2）進(jìn)行數(shù)據(jù)庫遍歷
$.ajax({
url:"mianlei.php", //編寫處理頁面
dataType:"TEXT",
success: function(d){
var hang = d.split("|"); //拆分字符“|”串：顯示行
var str = "";
for(var i=0;ihang.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); //把遍歷的內(nèi)容寫在上面的
}
})
（3）處理頁面的編寫如下
?php
include("DBDA.php"); //調(diào)用封裝好的數(shù)據(jù)庫類
$db = new DBDA();
$sql = "select * from caidan where fcode =('1101')"; //查詢符合父級號的所有信息
echo $db->StrQuery($sql); //輸出結(jié)果
（4）然后進(jìn)行修改的內(nèi)容可以用模態(tài)框
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">
!--這里是顯示的修改的內(nèi)容-->
/div>
div class="modal-footer">
button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉/button>
button type="button" class="btn btn-primary" id="tijiao">提交/button>
/div>
/div>!-- /.modal-content -->
/div>!-- /.modal -->
/div>
（5）修改的時候，里面要默認(rèn)顯示原來的名字和價格，所以要將前面遍歷的代號傳過來
$(".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;ihang.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); //寫入模態(tài)框中的content的位置
}
})
})
（6）單擊提交按鈕后寫入數(shù)據(jù)庫，并且這里也修改了，單擊提交按鈕進(jìn)行修改
$("#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("修改成功！");
}
}
})
})
三、添加內(nèi)容
（1）同上面的寫一個彈框，里面有文本框
div id="tianjia" data-toggle='modal' data-target='#myModall'>添加菜品/div>
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）填寫信息后，單擊提交按鈕寫入數(shù)據(jù)庫
$("#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" rel="external nofollow" ;
}
})
})
（3）處理頁面的編寫
?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','','','')"; //寫入數(shù)據(jù)庫
$db->Query($sqll,0);
echo "ok";
}
?>
（4）添加結(jié)束后看下結(jié)果
到此，結(jié)束了，簡單的添加和修改的功能，后面還要增加刪除功能~~
以上所述是小編給大家介紹的Ajax 向數(shù)據(jù)庫修改和添加功能(較簡答)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:- Ajax遍歷jSon后對每一條數(shù)據(jù)進(jìn)行相應(yīng)的修改和刪除(代碼分享)
- Ajax修改數(shù)據(jù)即時顯示篇實現(xiàn)代碼
- 用Jquery實現(xiàn)可編輯表格并用AJAX提交到服務(wù)器修改數(shù)據(jù)
- AJAX 自學(xué)練習(xí) 無刷新提交并修改數(shù)據(jù)庫數(shù)據(jù)并顯示
- Ajax動態(tài)為下拉列表添加數(shù)據(jù)的實現(xiàn)方法
- ajax添加數(shù)據(jù)后如何在網(wǎng)頁顯示
- Ajax添加數(shù)據(jù)與刪除篇實現(xiàn)代碼
- Ajax添加數(shù)據(jù)即時顯示信息篇
- JavaScript 聯(lián)動的無限級封裝類,數(shù)據(jù)采用非Ajax方式,隨意添加聯(lián)動
