Функция поиска ajax с использованием метода POST без jquery

Question

У меня есть несколько html-страниц о фильмах, содержащих одну и ту же форму поиска. Когда пользователь вводит что-то в форму, я хочу, чтобы сайт переходил на страницу обзора фильмов. Я уже сделал функцию поиска без ajax, но с простым почтовым запросом, который ищет базу данных en echos 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> 

и это мой Аякса код:

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), но может быть продлен.

тогда, как и lauche код непосредственно со своего элемента, вы можете получить доступ к своему значению непосредственно внутри ajax.

так:

JS

FormData() сохраняет все содержимое вашей формы

в ajax() сообщений функции в film.php

в film.php и может получить значение с $ _POST ['zoekparameter']

ответ выполняется fu()

Это делается добавлением eventListener в javascript в поле ввода, которое является ключом.

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

как у не видит никакой необходимости в дополнительных идентификаторов, много кода или прохождения каждого поля ввода переменной в этом случае все функции могут получить доступ все без передачи параметров ... и поэтому
легче изменить код позже ...

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