具有多个输入的AJAX PHP调用

时间:2017-09-21 11:19:22

标签: php ajax

我希望有人可以帮助我...

我的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>
&#13;
&#13;
&#13;

ajax js

&#13;
&#13;
var delayTimer;// delay to prevent searches on every key up
	function showResult(str) {
	  
		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?q="+str,true);
			xmlhttp.send();
	  
		}, 300);//1000 is 1 second
	}//end function showResult
&#13;
&#13;
&#13;

php有点复杂,因为它使用模糊逻辑但基本上它使用$ _GET [&#34; q&#34;]字符串并回显对#livesearch的响应。

我能在javascript中找到的是如何将两个字符串(或带分隔符的连接字符串)传递给我的php,以便我可以独立处理它们。

这有意义吗?请忘记在这个阶段可悲的缺乏消毒:)

非常感谢任何帮助。

理查德

1 个答案:

答案 0 :(得分:1)

为每个字段添加一个ID,然后onKeyup调用values函数,该函数获取两个值。反过来又将名称和公司分别作为GET['name']GET['company']传递。如果您愿意,可以将它们作为一个字符串,但这种方式感觉更整洁。

&#13;
&#13;
  

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
&#13;
<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>
&#13;
&#13;
&#13;