通过输入文本参数

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例程的数据来检索你的文本。