首页 > 代码库 > 使用AJAX添加数据！

使用AJAX添加数据！

2024-07-03 20:50:24   227人阅读

在数据库当中建一张表！写上需要打印出来的值内容！以下每句代码都有注释

多的我就不说了,具体代码如下所示：

 

 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 }

 

 


联系
我们