AJAX調用PHP多輸入

Question

我希望有人能幫助一點與這個..

我的HTML/PHP是不是太寒酸，但我的JS是相當多的複製/粘貼所以忍耐一下...

很簡單 - 我有兩個表單域，我想要傳遞給一個PHP腳本異步。

HTML

<form> 
 
<input type="text" size="30" onKeyUp="showResult(this.value)" autocomplete="off" placeholder="Name"> 
 
<input type="text" size="30" onKeyUp="showResult(this.value)" autocomplete="off" placeholder="Company"> 
 
<div id="livesearch" class="livesearch"></div> 
 
</form>

AJAX JS

var delayTimer;// delay to prevent searches on every key up 
 
\t function showResult(str) { 
 
\t 
 
\t \t clearTimeout(delayTimer); 
 
\t \t delayTimer = setTimeout(function() { 
 
\t 
 
\t \t \t //AJAX stuff 
 
\t \t \t if (str.length==0) { 
 
\t \t \t \t document.getElementById("livesearch").innerHTML=""; 
 
\t \t \t \t //document.getElementById("livesearch").style.border="0px"; 
 
\t \t \t \t return; 
 
\t \t \t } 
 
\t \t \t if (window.XMLHttpRequest) { 
 
\t \t \t \t // code for IE7+, Firefox, Chrome, Opera, Safari 
 
\t \t \t \t xmlhttp=new XMLHttpRequest(); 
 
\t \t \t } else { // code for IE6, IE5 
 
\t \t \t \t xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
 
\t \t \t } 
 
\t \t \t xmlhttp.onreadystatechange=function() { 
 
\t \t \t \t if (this.readyState==4 && this.status==200) { 
 
\t \t \t \t \t document.getElementById("livesearch").innerHTML=this.responseText; 
 
\t \t \t \t \t //document.getElementById("livesearch").style.border="1px solid #A5ACB2"; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t \t xmlhttp.open("GET","livesearch.php?q="+str,true); 
 
\t \t \t xmlhttp.send(); 
 
\t 
 
\t \t }, 300);//1000 is 1 second 
 
\t }//end function showResult

的PHP變得有點複雜，因爲它是利用模糊邏輯BU基本上它使用$ _GET [「q」]字符串並回顯對#livesearch的響應。

我無法在JavaScript中看到的是如何將兩個字符串（或帶分隔符的連接字符串）傳遞給我的PHP，以便我可以獨立處理它們。

這是否有意義？請在此階段忘記可怕的缺乏衛生:)

任何幫助將不勝感激。

理查德

Answer 1

添加一個ID爲每個字段，然後調用的onkeyup值函數獲取兩個值。然後依次將姓名和公司分別傳遞給GET['name']和GET['company']。如果你願意，你可以把它們作爲一個字符串，但這種方式感覺更整潔。

 

 
var delayTimer;// delay to prevent searches on every key up 
 
function showResult() { 
 

 
    var name = document.getElementById("name"); 
 
    var company = document.getElementById("company"); 
 

 
    clearTimeout(delayTimer); 
 
    delayTimer = setTimeout(function() { 
 

 
     //AJAX stuff 
 
     if (str.length == 0) { 
 
      document.getElementById("livesearch").innerHTML = ""; 
 
      //document.getElementById("livesearch").style.border="0px"; 
 
      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 (this.readyState == 4 && this.status == 200) { 
 
       document.getElementById("livesearch").innerHTML = this.responseText; 
 
       //document.getElementById("livesearch").style.border="1px solid 
 
       // #A5ACB2"; 
 
      } 
 
     } 
 
     xmlhttp.open("GET", "livesearch.php?name=" + name + "&company=" + company, true); 
 
     xmlhttp.send(); 
 

 
    }, 300);//1000 is 1 second 
 
}//end function showResult

<form> 
 
    <input type="text" size="30" onKeyUp="showResult()" autocomplete="off" placeholder="Name" id="name"> 
 
    <input type="text" size="30" onKeyUp="showResult()" autocomplete="off" placeholder="Company" id="company"> 
 
    <div id="livesearch" class="livesearch"></div> 
 
</form>