查詢數據庫與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

回答

相關問題