Ajax如何实现向数据库修改和添加功能

tangjin

作者

这篇文章将为大家详细讲解有关Ajax如何实现向数据库修改和添加功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

修改和添加关于数据库的信息，可以用于任何的添加和修改这些数据库和前面的随笔数据库是一样的

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

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

<ulid="myTab"class="navnav-tabs">
<liclass="active"><ahref="#home"rel="externalnofollow"data-toggle="tab">饭面类</a>
</li>
<li><ahref="#ios"rel="externalnofollow"data-toggle="tab">特色小吃</a></li>
<liclass="dropdown">
<ahref="#"rel="externalnofollow"id="myTabDrop1"class="dropdown-toggle"data-toggle="dropdown">酒水饮品<bclass="caret"></b>
</a>
<ulclass="dropdown-menu"role="menu"aria-labelledby="myTabDrop1">
<li><ahref="#jmeter"rel="externalnofollow"tabindex="-1"data-toggle="tab">
酒水</a>
</li>
<li><ahref="#ejb"rel="externalnofollow"tabindex="-1"data-toggle="tab">
饮品</a>
</li>
</ul>
</li>
</ul>

二、修改内容

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

<pid="mian">
</p>

（2）进行数据库遍历

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

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

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

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

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

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

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

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

$("#tijiao").click(function(){
varcode=$(".name").attr("code");//找到名称中的代号
varcode=$(".price").attr("code");//找到价格的代号
varname=$(".name").val();//找到名称的值
varprice=$(".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）同上面的写一个弹框，里面有文本框

<divid="tianjia"data-toggle='modal'data-target='#myModall'>添加菜品</div>
<divclass="modal-content">
<divclass="modal-header">
<buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">×</button>
<h5class="modal-title"id="myModalLabel">添加菜品</h5>
</div>
<divclass="modal-body"id="content">
<divid="name">名称：<inputtype="text"id="ming"/></div>
<br/>
<divid="price">价格：<inputtype="text"id="jia"/></div>
</div>
<divclass="modal-footer">
<buttontype="button"class="btnbtn-primary"id="tijiao1">提交</button>
</div>
</div>

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

$("#tijiao1").click(function(){
varn=$("#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="externalnofollow";
}
　　　　})
})

（3）处理页面的编写

<?php
include("DBDA.php");
$db=newDBDA();
$n=$_POST["n"];//将传来的值接收
$j=$_POST["j"];
$sql="selectmax(code)fromcaidanwherefcode='1101'";//查找这个父级代号的最大代号
$attr=$db->Query($sql);
foreach($attras$v)
{
$c=$v[0]+1;//使最大值加1
$sqll="insertintocaidanvalues('{$j}','{$c}','{$n}','1101','','','')";//写入数据库
$db->Query($sqll,0);
echo"ok";
}
?>

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