AJAX与SQL Server(一)

前端之家收集整理的这篇文章主要介绍了AJAX与SQL Server(一)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本实例演示利用Ajax技术,通过asp文件,从sql Server数据库中读取数据。

1、新建一个网站。

2、在网站目录下新建一个txt文档,改名为datasource.asp,内容为:

<%@Language="vbscript" Codepage="65001"%> 
<%
response.expires=-1
sql="SELECT * FROM "
sql=sql &  request.querystring("q") 

Set conn = Server.CreateObject("ADODB.Connection")  
conn.Open "Provider=sqlOLEDB;Persist Security Info=False;User ID=sa;PWD=abc;Initial Catalog=GoodLuck;Data Source=localhost"  
Set rs = Server.CreateObject("ADODB.RecordSet")
rs.Open sql,conn

response.write("<table>")
do until rs.EOF
  for each x in rs.Fields
    response.write("<tr><td><b>" & x.name & "</b></td>")
    response.write("<td>" & x.value & "</td></tr>")
  next
  rs.MoveNext
loop
response.write("</table>")
%>
以上代码使用VBScript实现的,连接sql Server数据库则用ADODB类,将结果写入表格中。

3、新建一个Default.aspx页面代码为:

</pre><pre name="code" class="html"><%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE 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","datasource.asp?q=" + str,true);
        xmlhttp.send();
    }
</script>
</head>
<body>

<form action="" style="margin-top:15px;"> 
<label>请选择个数据库表:
<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana,Arial,Helvetica,sans-serif;">
<option value="">Please choose</option>
<option value="S">S</option>
<option value="S_E">S_E</option>
<option value="Expert">Expert</option>
<option value="Unit_S">Unit_S</option>
</select>
</label>
<div id="txtHint">结果显示区域.</div>
</form>
<br />
4、界面展示
5、效果
原文链接:https://www.f2er.com/ajax/162268.html

猜你在找的Ajax相关文章