使用Ajax和经典ASP查询数据库

Question

I'm trying to modify a script from w3scools to use a combination of asp and ajax to query a database and return results. 我正在尝试从w3scools修改脚本，以结合使用asp和ajax来查询数据库并返回结果。

Here is the code: 这是代码：

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

<form action=""> 
    <select name="customers" onchange="showCustomer(this.value)">
        <option value="">Select a customer:</option>
        <option value="ALFKI">Alfreds Futterkiste</option>
    </select>
</form>
<br />

<div id="txtHint">Customer info will be listed here...</div>

</body>
</html>

I would like to replace the select field with 2 input fields. 我想将select字段替换为2个输入字段。

Can someone please tell me how to amend the javascript so that both the input values are passed with the querystring and what needs to be changed on the form to call the function. 有人可以告诉我如何修改javascript，以便输入值和querystring一起传递，以及需要在表单上更改哪些内容以调用函数。

Thanks 谢谢

Answer 1

It depends exactly how you want the page to operate. 这完全取决于您希望页面如何操作。 Can you be a bit more specific? 你能更具体一点吗？

When you say 'input values' do you mean a text box? 当您说“输入值”时，您的意思是一个文本框？

I'm assuming in the following example that you'll have two fields and a button for submitting: 在下面的示例中，我假设您将有两个字段和一个提交按钮：

<form action=""> 
    <label for="MyTextBox1>Enter some text:</label>
    <input type="text" id="MyTextBox1" />

    <label for="MyTextBox1>Enter some text:</label>
    <input type="text" id="MyTextBox2" />

    <input type="button" onclick="showCustomer();" />
</form>

The definition of your JavaScript function will change from 您的JavaScript函数的定义将从

function showCustomer(str)

to 至

function showCustomer()

And you'll need to remove any associated str code. 而且，您需要删除所有关联的str代码。

To pick up these values use document.getElementById : 要获取这些值，请使用document.getElementById ：

var val1 = document.getElementById("MyTextBox1").value);
var val2 = document.getElementById("MyTextBox1").value);
xmlhttp.open("GET","getcustomer.asp?q="+ val1 +"&r=" + val2 ,true);

This is very rough and ready, but a good starting point. 这很粗糙而且已经准备好，但是是一个很好的起点。

Answer 2

Depends on how you want to do it. 取决于你想怎么做。 Right now the script itself is triggered by the change event of the select element. 现在，脚本本身是由select元素的change事件触发的。 If you replace that element, you'll need a different event to trigger the script. 如果替换该元素，则将需要其他事件来触发脚本。 A button, perhaps? 一个按钮，也许？ If that's the case, then probably the easiest way to do this is with jQuery: 如果是这样，那么可能最简单的方法是使用jQuery：

Field 1: <input id="text1" type="text" />
Field 2: <input id="text2" type="text" />
<input id="buttonSend" type="button" value="Send" />
<script type="text/javascript">
  $(document).ready(function() {
    $('#buttonSend').click(function() {
      $.get('getcustomer.asp?text1=' +
          $('#text1').val() + '&text2=' + $('#text2').val()
      );
    });
  });
</script>

There's more you can do with the $.get() function, documented here , which is really just shorthand for the $.ajax() function, documented here . $.get()函数可以做更多的事情，在此处记录，实际上只是$.ajax()函数的简写，在这里记录。 The former is shorter, the latter gives you more options and control. 前者较短，后者为您提供更多选择和控制。

(Note also that if you want to use other JavaScript libraries as well, you may want to replace the $ alias with jQuery in the above code to avoid confusion.) （还请注意，如果您还想使用其他JavaScript库，则可能希望在上面的代码中将$别名替换为jQuery以避免混淆。）

Notice a benefit here is that it de-couples the script (which can be put in a separate file if need be) from the markup. 注意这里的一个好处是它将脚本（如果需要，可以将其放在单独的文件中）与标记分离。 As an overall design paradigm, this is generally preferred over the onchange="someFunctionCall()" syntax in the markup. 作为整体设计范例，通常比标记中的onchange="someFunctionCall()"语法更onchange="someFunctionCall()" 。

使用Ajax和经典ASP查询数据库

问题描述

2 个解决方案

解决方案1
2 已采纳 2011-05-17 12:04:01

解决方案2
1 2011-05-17 12:12:38

使用Ajax和经典ASP查询数据库

问题描述

2 个解决方案

解决方案1 2 已采纳 2011-05-17 12:04:01

解决方案2 1 2011-05-17 12:12:38

解决方案1
2 已采纳 2011-05-17 12:04:01

解决方案2
1 2011-05-17 12:12:38