查询数据库与Ajax和经典的ASP

我想修改一个脚本从w3scools使用asp和ajax的组合来查询数据库并返回结果。查询数据库与Ajax和经典的ASP

下面是代码：

<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>

我想与2个输入字段来替换选择字段。

有人可以告诉我如何修改JavaScript，以便两个输入值与查询字符串一起传递，以及需要在窗体上更改以调用该函数。

谢谢

来源

2011-05-17 Darren Cook

这取决于您希望页面如何操作。你能更具体一点吗？

当你说'输入值'你的意思是一个文本框？

我假设在下面的例子中，你将有两个字段和提交按钮：

<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>

你的JavaScript函数的定义将改变

function showCustomer(str)

到

function showCustomer()

而且您需要删除任何关联的str代码。

要拿起这些值使用document.getElementById：

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

这是非常粗糙和准备，但一个很好的起点。

来源

2011-05-17 12:04:01

谢谢詹姆斯，那正是我要找的。输入用于orderID和电子邮件用于检索订单数据。 – 2011-05-17 12:11:29

你应该在网址中命名第二个参数。 – 2011-05-17 12:12:57

@Gaby aka G.Petrioli - 哎呦 - 很好被发现 – 2011-05-17 12:14:24

取决于你想怎么做。现在，脚本本身由select元素的更改事件触发。如果您替换该元素，则需要使用其他事件来触发脚本。一个按钮，也许？如果是这样的话，那么很可能做到这一点，最简单的方法就是使用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>

还有更多你可以用$.get()功能做的，记载here，这实际上只是$.ajax()功能速记，记录here。前者较短，后者给你更多选择和控制。

（还要注意的是，如果你想使用其他JavaScript库，以及，你可能要与jQuery更换$别名在上面的代码，以避免混淆。）

注意这里的好处是它去 - 将标记（可以放在单独的文件中，如果需要的话）与标记耦合。作为整体设计范例，这通常优于标记中的onchange="someFunctionCall()"语法。

来源

2011-05-17 12:12:38 David

很好的答案，David。 jQuery可能是实现这一目标的最佳方式，但用户无需理解隐藏的内容以及jQuery所要封装的内容。 – 2011-05-17 12:14:58

@詹姆斯怀斯曼：绝对同意。在这种情况下，你的答案肯定是“原始问题的答案”。尽管如此，对于Stack Overflow的内容添加内容并没有什么坏处，特别是在总体设计上有几点。 – David 2011-05-17 12:17:30

同意。对我有+1。 :-) – 2011-05-17 12:19:38

查询数据库与Ajax和经典的ASP

回答

相关问题