Форма поиска в html / php через ajax - PullRequest
Новая
       10

Форма поиска в html / php через ajax

0 голосов
/ 26 апреля 2010

У меня есть форма поиска, в которой запрос к базе данных был закодирован в php, а html-файл вызывает этот php-файл через ajax для отображения результатов в форме поиска. Проблема в том, что я хотел бы, чтобы результат отображался в той же форме, что и search.html; пока ajax работает, он отправляется в search.php для отображения результатов.

search.html: 

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="scripts/search_ajax.js" type="text/javascript"></script> 
</head>

<body>
<form id="submitForm" method="post">
<div class="wrapper">
<div class="field">
<input name="search" id="search" />
</div><br />
<input id="button1" type="submit" value="Submit" class="submit" onclick="run_query();" /><br />
</div>
<div id="searchContainer">
</div>
</form>
</body>
</html>

Если я добавлю action = "search.php" к тегу формы, он отобразит результат, но в search.php. Я хотел бы, чтобы он отображался в той же форме [то есть search.html, а не search.php], если я просто добавлю функцию javascript [как сделано выше], в search.html она ничего не отобразит.

search_ajax.js: 

var xmlHttp


function run_query() {
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null) {
alert ("This browser does not support HTTP Request");
return;
} // end if
var url="search.php";
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} //end function

function stateChanged(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("searchContainer").innerHTML=xmlHttp.responseText;
} //end if
} //end function

function GetXmlHttpObject() {
var xmlHttp=null;
try {
// For these browsers: Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
//For Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
} //end function

search.php: 

<?php
include 'config.php';

$search_result = "";

$search_result = $_POST['search'];

$result = mysql_query("SELECT cQuotes, vAuthor, cArabic, vReference FROM thquotes WHERE cQuotes LIKE '%$search_result%' ORDER BY idQuotes DESC", $conn)
  or die ('Error: '.mysql_error());

Ответы [ 3 ]

4 голосов
/ 26 апреля 2010 
onclick="run_query();"

Вы не блокируете действие формы по умолчанию. Добавьте return false; в конец onclick: 

onclick="run_query(); return false;"

Или, если run_query() на самом деле возвращает false, то переписать onclick следующим образом: 

onclick="return run_query();"

Обновление : вы действительно не передали параметр запроса в код PHP. Заменить 

var url = "search.php";

от 

var url = "search.php?search=" + searchvalue;

И использовать $_GET в PHP. Если вы действительно хотите использовать POST, тогда сделайте 

var url = "search.php";
xmlHttp.open("POST",url,true);
xmlHttp.send("search=" + searchvalue);

(searchvalue, очевидно, является введенным пользователем значением. Я предполагаю, что вы можете понять, как извлечь его из HTML DOM с помощью JS.

Сказав это и не имея отношения к реальной проблеме, вместо всего этого непрозрачного и стандартного кода Ajax я предлагаю вам использовать для этого jQuery . Это значительно облегчает выполнение аяксов. Например, вы можете использовать jQuery.post () вместо всего этого. Ссылка указывает на несколько примеров.

0 голосов
/ 26 апреля 2010

Итак, давайте посмотрим, правильно ли я вас понял:

У вас есть 2 файла: простой текстовый HTML, где у вас есть вышеупомянутая форма, и файл search.php, который получает петиции AJAX, верно? И вы хотите, чтобы файл не отправлял данные, а вместо этого отправлял AJAX и создавал результаты в div searchContainer, верно?

Тогда у вас есть 2 варианта:

  1. Создайте результаты из петиции XML / Обычный текст
  2. Используйте innerHTML, если поддерживается вашим браузером.

Исходя из ответа, предыдущие ответы верны, вам нужно return false;, чтобы избежать отправки формы на сервер. Теперь, возвращаясь к ответу, вы также можете изменить тип с submit на button, чтобы вместо него использовать только кнопку.

Теперь параметры:

  1. Первый вариант должен быть идеальным: вы получите результаты в предварительно отформатированной строке, которую затем можете разбить и построить с помощью createElement() и appendChild(). Хотя для этого требуется немного больше кодирования, вы должны поддерживать кросс-браузерную поддержку (если браузер не слишком загружен, вы не можете использовать две функции, упомянутые выше).
  2. Это в значительной степени зависит от браузера (у меня были проблемы с Firefox и Internet Explorer), и вам, возможно, придется реализовать множество проверок и других функций, чтобы заменить текущий HTML, написанный внутри searchContainer.

Я бы выбрал номер 1, он сильно сбрасывает вес с вашего плеча.

Обновление:

По запросу я редактирую с примером 1). Предположим, что вы получите результаты в виде простого текста, сохраненные в xhr_results и отформатированные так: text_1:value_1|text_2:value_2|... (я не очень разбираюсь в XML, и для меня это проще). 

var options = xhr_results.split('|');
var options_text = [];
var options_value = [];
for (var i = 0; i < options.length; i++){
options_text[i] = options[i].split(':')[0];
options_value[i] = options[i].split(':')[1];
}
var sel = document.createElement('select');
for (var i = 0; i < options.length; i++){
    opt = document.createElement('option');
opt.text = options_text[i]
opt.value = options_value[i];
sel.appendChild(opt);
}

Этот фрагмент кода создаст вам выпадающее меню со всеми параметрами, переданными из AJAX.

0 голосов
/ 26 апреля 2010

Я предполагаю, что вам нужно добавить return false; где-нибудь в вашем Javascript?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...