使用 POST 方法的 ajax 搜索功能，没有 jquery

Question

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

这是搜索表单：

<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() 存储表单的全部内容

ajax() 函数发布到film.php

在 film.php 中，您可以使用 $_POST['zoekparameter'] 检索值

响应执行fu()

这是通过在 javascript 中将 eventListener 添加到 keyup 的输入字段来完成的。

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);
}