您的位置：首页 > 数据库

Ajax_与数据库进行交互详解

2019-05-09 14:35 99 查看

上一篇讲解了AJAX是如何与服务器端进行数据交互的，现在这章就来讲讲AJAX是如何与数据库进行交互的：
web端通过ajax从数据库读取信息：

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8"/>
<h2>因为涉及到服务器相关数据，所以借用了菜鸟教程的数据，大家编译的时候，在菜鸟教程的线上编译器上面编译即可成功</h2>
<style>
select{
width:80%;
height:50px;
border:5px solid #a91;
background-color:yellow;
}
option{
background-color:yellow;
}
</style>
<script>
function Test(str){
/*创建请求对象*/
var xmlhttp=new XMLHttpRequest();
/*设置监听方法*/
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){

document.getElementById("test").innerHTML=xmlhttp.responseText;
}
/*设置请求参数，请求方式，请求地址，是否异步*/
}
xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);
/*发送请求*/
xmlhttp.send();
}
</script>
</head>
<body>
<form action="">
<select name="cust" onchange="Test(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="TIANMAO">Tian mao,1</option>
<option value="BAIDU">BAIDU, 2</option>
<option value="JINGDONG">JINGDONG,3</option>
</select>
</form>
<div id="test">对应信息会显示在这里</div>
</body>
</html>

该应用程序大体流程：
通过select选择框的选项变动，来触发ajax方法，Test（this.value),该方法发送请求到服务器，服务器再跟据该请求的值，从数据库总查找对应的value，若存在，则返回对应信息，若不存在，则返回NO DATA提示

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航