首页 > 代码库 > 使用AJAX添加数据!
使用AJAX添加数据!
在数据库当中建一张表!写上需要打印出来的值内容!以下每句代码都有注释
多的我就不说了,具体代码如下所示:
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> 4 <script type="text/javascript" src="http://www.mamicode.com/pp.js"></script>//链接JS 5 </head> 6 <body> 7 8 <?php 9 $conn = mysql_connect("localhost","root","") or die("数据库连接失败".mysql_error()); 10 mysql_select_db("test"); 11 mysql_query("set names ‘utf8‘"); 12 $sql = "SELECT `id`, `biaoti`,`nr`,`banzhu` FROM `student`"; 13 $result=mysql_query($sql);//以上是数据库代码! 14 15 while($row = mysql_fetch_array($result)){//循环打印数据库当中的内容! 16 ?> 17 <div style="width:200px; height:100px; background-color:#cccccc;border: 1px solid #999999"> 18 标题:<?php echo $row[‘biaoti‘]?><br/>//打印出我们数据库当中的名字对应的值! 19 内容:<?php echo $row[‘nr‘]?><br/> 20 版主:<?php echo $row[‘banzhu‘]?><br/> 21 </div> 22 <?php 23 } 24 ?> 25 26 <div id="lol"></div>//创建一个DIV; 27 28 29 标题:<input type="text" id="biaoti" name="user"><br/> 30 //写上一些输入框当我们点击按钮时就出现一个DIV有内容,同时也上传到了数据库里! 31 //在每个里面写上一个ID,一个名字; 32 内容:<input type="text" id="nr" name="user"><br/> 33 版主:<input type="text" id="banzhu" name="user"><br/> 34 <input type="button" value="http://www.mamicode.com/发表" onclick="sendTopic()"><br/> 35 </body> 36 37 </html>
以下是第二个页面具体代码如下:
1 <?php 2 3 if(isset($_GET[‘biaoti‘])){//判断有没有值和是否是布尔值! 4 $biaoti = $_GET[‘biaoti‘];//接收另一个页面传过来的值! 5 $nr = $_GET[‘nr‘]; 6 $banzhu = $_GET[‘banzhu‘]; 7 8 9 $conn = mysql_connect("localhost","root","")or die("数据库连接失败".mysql_error()); 10 mysql_select_db("test"); 11 mysql_query("set names ‘utf8‘"); 12 13 $sql = "INSERT INTO `student`(`id`, `biaoti`, `nr`, `banzhu`) VALUES (null,‘$biaoti‘,‘$nr‘,‘$banzhu‘)"; 14 $result=mysql_query($sql); 15 16 // if($result){//更新数据库当中的ROOTid与第一个ID一样! 17 // $id = mysql_insert_id(); 18 // $sql = "UPDATE `student` SET id=$id"; 19 // $result = mysql_query($sql); 20 21 22 23 if($result) {//判断 24 $sql = "SELECT `id`, `biaoti`,`nr`,`banzhu` FROM `student` ";//查询数据库当中的表的所有类型; 25 $result = mysql_query($sql); 26 $row=mysql_fetch_row($result); 27 28 echo " <div style=‘width:200px; height:100px; background-color:#cccccc;border: 1px solid #999999‘> 29 标题: $row[1]<br/> 30 内容:$row[2]<br/> 31 版主:$row[3]<br/></div>";//打印出结果以DIV方式打印出现; 32 33 34 35 } 36 37 mysql_close($conn);//关掉数据库; 38 39 } 40 41 42 43 ?>
以下是JS和AJAX代码,具体代码如下所示:
1 var xmlHttp; 2 function getXmlHttp(){ 3 if(window.ActiveXObject){ 4 xmlHttp = new ActiveXObject("MICROSOFT.XMLHTTP"); 5 }else if(window.XMLHttpRequest){ 6 xmlHttp = new XMLHttpRequest(); 7 } 8 }//判断浏览器是否有对象! 9 10 function sendTopic(){ 11 getXmlHttp();//调用以上的函数; 12 var biaoti = document.getElementById("biaoti").value;//获取另一个页面上输入框里面的值和ID; 13 var nr = document.getElementById("nr").value; 14 var banzhu = document.getElementById("banzhu").value; 15 16 // alert(user+" " + content + " "+title); 17 xmlHttp.open("GET","to.php?biaoti="+biaoti+"&nr="+nr+"&banzhu="+banzhu,true);//使用GTE方式传递,因为我们这里是用JS方式,打开连接到其他页面上,传值, 18 19 xmlHttp.onreadystatechange = function(){//立名函数 20 if(xmlHttp.readyState == 4){//完成 21 if(xmlHttp.status == 200){//成功 22 var str = xmlHttp.responseText;//获取我们需要打印出来的结果 23 alert(str); 24 var lol = document.getElementById("lol");//去获取页面上的我们创建的那个ID当我们点击添加的时候就会获取值! 25 lol.innerHTML += str + "<br/>";//内容打印出来加上换行 26 } 27 } 28 } 29 30 xmlHttp.send(null);//必要有这一步!否测得不到值也传不到值过去; 31 }
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。