AJAX ajax与数据库

最新推荐文章于 2023-04-25 20:27:35 发布

Estom_yin

最新推荐文章于 2023-04-25 20:27:35 发布

阅读量444

点赞数 1

分类专栏： ajax 文章标签： ajax php 服务器数据交互

本文链接：https://blog.csdn.net/Estom_yin/article/details/52016677

版权

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

>实例分析：

<span style="font-size:14px;"><html>
<head>
<script type="text/javascript">
function showCustomer(str)
{
var xmlhttp;    
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 (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form action="" style="margin-top:15px;"> 
<label>请选择一位客户：
<select name="customers" οnchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="APPLE">Apple Computer, Inc.</option>
<option value="BAIDU ">BAIDU, Inc</option>
<option value="Canon">Canon USA, Inc.</option>
<option value="Google">Google, Inc.</option>
<option value="Nokia">Nokia Corporation</option>
<option value="SONY">Sony Corporation of America</option>
</select>
</label>
</form>
<br />
<div id="txtHint">客户信息将在此处列出 ...</div>

</body>
</html>
</span>

>>函数执行过程

首先定义了一个名为showCustomer(str)的函数，有一个参数str

如果读取到的字符串为空，则直接返回，当不为空时，继续执行下面的函数体

定义了一个ajax对象，当readystate改变时，自动调用onreadystatechange事件，执行相应的操作

用.open函数声明了请求的类型

用send函数发送了请求

>服务器界面

balabala没看懂，不太熟悉php的PDO，等回过头来在搞懂吧