Question

我有一个输入文字，我希望当我点击一个按钮时它会获取该值并将其传递给网址中的参数，这是我的代码到目前为止：

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

但是当我输入一个名字时，它只是添加：？ID =当前页面网址中的名字！它不会在我想要的网址中发送参数..

Answer 1

将您的代码从：nclick="showUser(this.form)"更改为onclick="return showUser(this.form)"

和

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

要 if（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例程检索您的文本。

将输入文本传递给参数

2 个答案: