通過輸入文本參數

Question

我有一個輸入的文字，我想，當我需要的是價值，並傳遞它的URL參數點擊一個按鈕，這是我到目前爲止的代碼：

<div id="landmark-1" data-landmark-id="1"> 
    <form name ="data"> 
     <label>enter your name :</label> 
     <input type= "text" placeholder="ID" name="ID" value="" style="width:206px;" /> 
     <input type="submit" value="Suivant" onclick="showUser(this.form)" > 
    </form>  
</div> 
<br> 
<div id="txtHint"><b>Person info will be listed here.</b></div> 

，這是我的javascript代碼：

<script> 
function showUser(frm) 
{ 
    var str = frm.ID.value; 
    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","http://localhost/filename/page.php?q="+str,true); 
    xmlhttp.send(); 
} 
</script> 

，但是當我輸入一個名稱，它只是增加：在當前頁面的URL ID =名字！它不會在我想要的網址發送參數..

Answer 1

更改您的代碼從：○nclick="showUser(this.form)"到onclick="return showUser(this.form)"

和

if (str==""){ 
    document.getElementById("txtHint").innerHTML=""; 
    return; 
} 

到 如果（STR == 「」）{ document.getElementById（「txtHint」）。innerHTML =「」; 返回false; }

即使沒有輸入ID，您的表格也會被提交。返回false會阻止表單提交。

Answer 2

這是修改後的AJAX調用。它比w3schools例子稍微複雜一些，但功能更加完整。首先是AJAX例程：

function AJAX(url, processFunction) { 
    var XHR; 
    try{ 
    // Opera 8.0+, Firefox, Safari/Chrome 
    XHR = new XMLHttpRequest(); 
    }catch (e){ 
    // Internet Explorer Browsers 
    try{ 
     XHR = new ActiveXObject("Msxml2.XMLHTTP"); 
    }catch (e) { 
     try{ 
     XHR = new ActiveXObject("Microsoft.XMLHTTP"); 
     }catch (e){ 
     // Something went wrong 
     alert("Your browser doesn't support AJAX!"); 
     return false; 
     } 
    } 
    } 
    if(XHR.onreadystatechange) { 
    if(XHR.readyState == 4) { 
     if(XHR.status == 200) { 
     //--- we've got the data so process it 
     processFunction(XHR.responseText); 
     } 
     if(XHR.status != "OK") { 
     alert('Error : '+XHR.responseText); 
     } 
    } 
    } 
    //--- open 
    XHR.open('GET', url); // --- url is from the function call 
    //--- send 
    XHR.send(); 
} 

現在將處理返回的數據的函數。在這種情況下，你只是想顯示的文字：

function processMyData(data) { 
    document.getElementById("txtHint").innerHTML= data; 
} 

現在的修改showUser功能

function showUser(frm) { 
    var str = frm.ID.value; 
    if (str==""){ 
     document.getElementById("txtHint").innerHTML=""; 
     return false; 
    } else { 
     AJAX("http://localhost/filename/page.php?q="+str, 'processMyData') 
    } 
} 

如果在你的PHP文件應該在警告框出現錯誤。

如果你的代碼仍然沒有返回任何東西，也沒有錯誤，我可以想到的唯一的另外一件事就是你不是回顯/打印你的AJAX例程的數據來檢索你的文本。