JS AJAX---数据库

news/2024/7/19 13:20:22 标签: php, 数据库, js

AJAX可用于同数据库进行交互式通信

AJAX Database实例

showCustomer() 函数进行如下:

  • 检查是否选取客户
  • 创建 XMLHttpRequest 对象
  • 创建当服务器响应就绪时执行的函数
  • 向服务器上的文件发送请求
  • 请注意,参数 q 被添加到 URL(带有下拉列- 表的内容)
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<script>
function showUser(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("txtHint").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","/demo/getcustomer.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
<option value="">请选择一个客户:</option>
<option value="1">Alibaba</option>
<option value="2">APPLE</option>
<option value="3">BAIDU</option>
<option value="4">Canon</option>
<option value="5">Google</option>
<option value="6">HUAWEI</option>
<option value="7">Microsoft</option>
<option value="8">Nokia</option>
<option value="9">SONY</option>
<option value="10">Tencent</option>
</select>
</form>
<br>
<div id="txtHint"><b>客户信息将在此处列出。</b></div>

</body>
</html>

AJAX 服务器页面

解释:当查询从 JavaScript 发送到 PHP 文件时,会发生以下情况:

  • PHP 打开与 MySQL 服务器的连接
  • 找到了正确的客户
  • 创建一个 HTML 表,填充数据,并发送回“txtHint”占位符
php"><?php
$q = intval($_GET['q']);

$con = mysqli_connect('MyServer','MyUser','MyPassword','Customers');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

$sql="SELECT * FROM customerslist WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);

echo "<table>";
while($row = mysqli_fetch_array($result)) {
    echo "<tr><th>CustomerID</th><td>" . $row['CustomerID'] . "</td></tr>";
    echo "<tr><th>CompanyName</th><td>" . $row['CompanyName'] . "</td></tr>";
    echo "<tr><th>ContactName</th><td>" . $row['ContactName'] . "</td></tr>";
    echo "<tr><th>Address</th><td>" . $row['Address'] . "</td></tr>";
    echo "<tr><th>City</th><td>" . $row['City'] . "</td></tr>";
    echo "<tr><th>PostalCode</th><td>" . $row['PostalCode'] . "</td></tr>";
    echo "<tr><th>Country</th><td>" . $row['Country'] . "</td></tr>";
}
echo "</table>";
mysqli_close($con);
?>

http://www.niftyadmin.cn/n/553250.html

相关文章

contiki 学习资料

参考资料&#xff1a; Contiki官方网站&#xff1a; www.contiki-os.org Contiki Wiki&#xff1a;www.sics.se/contiki/wiki Contiki 源代码文档&#xff1a;http://dak664.github.com/contiki-doxygen Contiki代码下载&#xff1a;http://sourceforge.net/projects/contiki/f…

cannot be cast to javax.servlet.Servlet 解决

使用maven创建web项目的时候&#xff0c;通过添加依赖的方式来添加servlet-api&#xff0c;如下 通过maven的命令(tomcat:run)来启动项目&#xff0c;发现访问的时候报错&#xff0c;错误如下&#xff1a; 错误排查&#xff1a; 首先查看servlet&#xff0c;发现继承的是HttpSe…

安装elasticsearch遇到的几个问题

首先我已经安装好了jdk1.8的环境并成功解压&#xff0c;并打算用./bin/elasticsearch这个命令把elasticsearch跑起来&#xff0c;然后我遇到了第一个问题。 一 第一个问题的提示是&#xff1a; Java HotSpot(TM) 64-Bit Server VM warning: INFO: os::commit_memory(0x0000000…

js的window对象

js的window对象 1.子窗口方法 function testOpen(){   window.open(son.html,newwindow,height400, width600, top100px,left320px, toolbaryes, menubaryes, scrollbarsyes,     resizableyes,locationno, statusyes); } 注意&#xff1a;   关闭页面的方法window.clo…

vue的[__ob__: Observer]

为什么会获取不到里面的值 因为&#xff1a;vue data 里面值都是有这个属性的。这是被vue接管的数据&#xff0c;observer是Vue核心中最重要的一个模块&#xff08;个人认为&#xff09;&#xff0c;能够实现视图与数据的响应式更新&#xff0c;底层全凭observer的支持。 在初…

《构建之法》阅读笔记03

在软件开发过程中&#xff0c;团队是十分重要的&#xff0c;大部分的都是以团队为基础进行开发的。一个团队的模式也十分的重要&#xff0c;团队模式通常决定了团队的开发模式&#xff0c;例如一窝蜂的团队模式&#xff0c;感觉很容易养成“写了再改”的开发模式。而稍微成熟一…

Nmap命令-基础用法

Nmap 主机发现扫描 主机发现有时候也叫做 Ping 扫描,但它远远超越用世人皆知的 Ping 工具发送简单的 IcMp 回声请求报文,这些探测的目的是获得响应以显示某个 lP 地址是否是活动的(正在被某主机或者网络设备使用).主机发现能够找到零星分布于 lP 地址海洋上的那些机器. 批量Pin…

web前端学习(一)初识前端概况了解

1.软件的架构 1.1 C/S 即Client/Server(客户端/服务器)结构,它可以分为客户端和服务器两层&#xff1a;第一层是在客户机系统上结合了界面显示与业务逻辑&#xff0c;第二层是通过网络结合了数据库服务器。 C/S架构的优点&#xff1a; ​ 1.C/S架构的界面和操作可以很丰富。…