使用AJAX如何得到数据库当中的值！

最新推荐文章于 2024-04-25 15:28:54 发布

weixin_30715523

最新推荐文章于 2024-04-25 15:28:54 发布

阅读量126

点赞数

文章标签：数据库 java php

原文链接：http://www.cnblogs.com/ws3366/p/3716408.html

版权

首先还是在数据库当中新建一张表，在新建的页面上写上连接数据库的代码，我这里是以点击名字就出现一个DIV,DIV里面就显示你的数据库当中的所有的内容！

每句代码我都写的注释，具体代码如下所示：

 1 <html>
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
 4 </head>
 5 
 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 
13 $sql = "select id,userName from users";//查询数据库当中表
14 
15 $result = mysql_query($sql);//返回一个资源类型；
16 while($row = mysql_fetch_array($result)){//使用循环打印出来所有的内容；
17     echo "<a href='javascript:queryDetail($row[id])'>".$row['userName']."</a> &nbsp;&nbsp;&nbsp;&nbsp;";//使用数据库当中的名字用A标签，我们要用他点击去
18 显示一个DIV，DIV的内容就是我们在数据库当中写的值；
19 
20 }
21 
22 ?>
23 </body>
24 
25 
26 
27 
28 <script>
29     var xmlHttp;//使用AJAX声明；
30     function queryDetail(id){//写一个函数，给他一个参数；
31         if(window.ActiveXObject){//判断浏览器有没有ActiveXObject，现在IE是用的一个控件方式提醒，
32             xmlHttp = new ActiveXObject("MICROSOFT.XMLHTTP");
33         }else if(window.XMLHttpRequest){
34             xmlHttp = new XMLHttpRequest();
35         }
36 
37         if(!xmlHttp){
38             alert("没有获取到对象!");
39             return;//判断有没有得到对象；//IE十以下的版本没有这个对象；
40         }
41 
42         //由于javascript是没有办法连接数据库的，所以，需要通过后台语言
43         //结合来连接数据库,那么这里就是把js从界面获取的值，传递给后台程序
44         //xmlHttp.open()其实也就是链接到一个后台程序，把值传递过去
45         //这其实是第一步
46         xmlHttp.open("GET","queryById.php?id="+id,true);//链接到另一个页面上去！
47 
48         //这是第三步
49         //这一步是一个回调函数，回调函数其实就和打电话代办事情是一个意思
50         //这个回调函数其实就是状态改变的时候，js应该做什么事情
51         xmlHttp.onreadystatechange = function(){
52             if(xmlHttp.readyState == 4){//完成
53                 if(xmlHttp.status == 200){//成功
54                     var txt = xmlHttp.responseText;
55                     var show = document.getElementById("show");//获取ID；
56 
57                     if(show){//判断
58                         show.innerHTML = txt;//先放到我们的DIV里面去；
59                         document.body.removeChild(strs);//当我们点击第二个名字的时候就删除掉；
60                     }else{
61                         var d = document.createElement("div");//使用DOM创建一个DIV；
62                         d.id = "show";//使用JS dom给d一个ID为show,
63                         d.style.cssText="width:200px;height:300px;border:1px solid red;";//给DIV一个样式；
64                         var strs = txt.split(",");//分割字符串；
65 
66 //                        alert(strs);
67 
68                         for(var i=0;i<strs.length;i++){//判断我们分割的字符串，
69                             d.innerHTML += strs[i]+",";把我们数据库当中的值放到DIV里面去；
70                         }
71                         document.body.appendChild(d);//把我们生成的DIV放到页面上去；
72                     }
73                 }
74             }
75         }
76         //注意，open()方法就仅仅只是打开了连接，并没有传递，所以需要send方法
77         //这是第二步
78         xmlHttp.send(null);
79     }
80 </script>
81 
82 
83 </html>

接下来是另一个页面，这个页面同样要写上链接数据库的代码，查询语句，以及使用isset判断有没有值，以及使用什么方式来接收他,A标签和JS是使用GET方式，

单纯的接收或者跳转到另一个页面上去就使用post方式来接收他：

具体代码如下所示：

 1 <?php
 2 
 3 if(isset($_GET['id'])){//判断有没有值布尔值；
 4     $id = $_GET['id'];//接收传过来的ID应为我们是通过ID来寻找我们在数据库当中的内容的；
 5 
 6     $conn = mysql_connect("localhost","root","") or die("数据库连接失败".mysql_error());
 7     mysql_select_db("test");
 8     mysql_query("set names 'utf8'");//以上是连接数据库的代码；
 9 
10     $sql = "select * from users where id=$id";//查询数据库当中的表的ID，
11 
12     $result = mysql_query($sql);//返回资源类型
13     $row = mysql_fetch_row($result);//打印一行；
14     $arr = "";//声明一个名字
15     for($i=0;$i<count($row);$i++){//判断是不是小于一行，count计数；
16         $arr .=$row[$i].",";//将数据库的内容先拼成一个字符串；
17     }
18 
19     echo $arr;//打印出ARR结果;
20 }
21 
22 
23 ?>

转载于:https://www.cnblogs.com/ws3366/p/3716408.html

weixin_30715523

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用AJAX如何得到数据库当中的值！

首先还是在数据库当中新建一张表，在新建的页面上写上连接数据库的代码，我这里是以点击名字就出现一个DIV,DIV里面就显示你的数据库当中的所有的内容！每句代码我都写的注释，具体代码如下所示： 1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html;ch...
复制链接

扫一扫