使用POST方法而不使用jquery的ajax搜索功能

Question

我有一些关于电影的html页面，全部都包含相同的搜索表单。当用户在表单中键入内容时，我希望网站跳转到电影概览页面。我已经做了一个没有Ajax的搜索功能，但是用一个简单的发布请求来搜索数据库回声一个movielist。但是现在我希望每次用户按下某个键时都会发生同样的情况。

这是搜索表单：

<form action='films.php' method='post'> 
<input id="ZoekBalkSearch" type="search" name="zoekparameter" placeholder="Geef een zoekterm in." onkeyup="gaNaarFilm(this.value)"/> 
<input id="ZoekButton" type="submit" value="Zoek"/> 
</form> 

，这是我的Ajax代码：

function gaNaarFilm(str) 
{ 
    if (str.length==0) 
     { 
     document.getElementById("ZoekBalkSearch").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("ZoekBalkSearch").innerHTML=str; 
     } 
     } 
    xmlhttp.open("POST",'films.php',true); 
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xmlhttp.send('zoekparameter='+str); 
} 

函数被调用，但它似乎并没有做任何事情，可能有人请帮助我？提前致谢。

Answer 1

拳头大家通过this而不是this.value

再短的功能，我使用AJAX是这

var ajax=function(a,b,c){c=new XMLHttpRequest;c.open('GET',a);c.onload=b;c.send()} 

这种具有低支持（不IE5和IE6），但可以延长。

然后，直接从元素中直接输入代码，您可以直接在ajax中访问您的值。

这样：

JS

FormData()存储表单的全部内容

在film.php的ajax()功能员额film.php

u能检索与值$ _POST ['zoekparameter']

响应执行fu()

这是通过在输入字段中添加javascript中的eventListener来实现的。

var ajax=function(){ 
var fd=new FormData(document.querySelector('#form')); 
var c=new XMLHttpRequest||new ActiveXObject("Microsoft.XMLHTTP"); 
c.open('POST','film.php'); 
c.onload=fu; 
c.send(fd) 
}, 
fu=function(){ 
document.getElementById("ZoekBalkSearch").innerHTML=this.response; 
} 
window.onload=function(){ 
var i=document.querySelector('#form').childNodes[0]; 
i.addEventListener('keyup',ajax,false) 
} 

就像你看到的，不需要额外的id，大量的代码或每个输入字段每一个功能可以在不传递参数访问的一切传递给一个变量在这种情况下......等等这是
容易修改该代码后...

HTML

<form id="form"><input type="search" name="zoekparameter" placeholder="Geef een zoekterm in."></form> 

，如果你想添加更多的像今年字段或任何你只需要添加一个输入和一个名字

<input type="text" name="year"> 

您不需要编辑JavaScript，因为FormData会为您做所有事情。

如果你不明白的话要求... 如果想检查兼容性

使用caniuse.com

http://caniuse.com/xhr2

http://caniuse.com/queryselector

奖金

最短的路

window.onload=function(){ 
var s=function(){ 
var a=new XMLHttpRequest; 
a.open('POST','film.php'); 
a.onload=function(){console.log(this.response)}; 
a.send('zoekparameter='+i.value); 
}, 
i=document.createElement('input'); 
i.type='search'; 
i.addEventListener('keyup',s,false); 
document.body.appendChild(i); 
}