ajax html / php arama formu

3 Cevap php

Veritabanı sorgu php kodlu olan burada ben bir arama formu var ve html dosyası arama formunda sonuçlarını görüntülemek için ajax bu php dosyasını çağırır. Sorun sonuç search.html gibi aynı formda görüntülenen istiyorum, olduğu; ajax çalışırken, henüz bu sonuçlarını görüntülemek için search.php gider.

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>

Ben form etiketi için action = "search.php" eklerseniz, bu sonucu görüntüler ama search.php üzerinde. Ben sadece [yukarıda yapıldığı gibi], bu search.html üzerinde hiçbir şey görüntüler javascript işlevi eklerseniz, aynı formda görüntülemek [yani search.html değil search.php] isterim.

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 Cevap

onclick="run_query();"

Sen formun varsayılan eylemi engellemek için görünmüyor. Sonuna a return false; ekleme onclick,

onclick="run_query(); return false;"

run_query() aslında yanlış döndürür ya, o zaman aşağıdaki gibi onclick yeniden yazın:

onclick="return run_query();"

Update: Eğer gerçekten bir PHP kodu istek parametresi geçemedi. Değiştirmek

var url = "search.php";

tarafından

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

Ve $_GET PHP kullanın. Aslında POST kullanmak istiyorsanız, daha sonra yapılacak

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

(searchvalue Açıkçası kullanıcı girilen değerdir. Seni JS kullanarak HTML DOM onu kapmak için nasıl anlamaya olabilir varsayalım.

Söyledi ve gerçek sorunu ilgisiz, bunun yerine tüm bu opak ve Demirbaş Ajax kod Bunu için jQuery kullanmanızı öneririm. Bu büyük ölçüde ajaxical şeyler yapıyor kolaylaştırır. Örneğin tüm bunun yerine jQuery.post() kullanabilirsiniz. Bağlantı çeşitli örneklerle işaret.

Ben bir return false; yere Javascript eklemeniz gerekir tahmin ediyorum?

Yani, düzgün bir anlaşılır olmadığını bakayım:

Sen 2 dosya var: Eğer yukarıda belirtilen formu var, bir düz metin, HTML ve AJAX dilekçeleri alan bir search.php dosyayı, değil mi? Ve sen, veri göndermek yerine AJAX göndermek ve searchContainer div sonuçları oluşturmak için değil, dosyayı istiyorum?

Sonra 2 seçeneğiniz var:

  1. XML / Düz metin dilekçe sonuçları Construct
  2. Tarayıcınız tarafından destekleniyorsa, innerHTML kullanın.

Cevabını büküm, önceki cevaplar doğru, ihtiyacınız olan bir return false; sunucuya formu göndererek önlemek için. Şimdi, geri cevap olacak, ayrıca bunun yerine sadece bir düğmeye kullanmak için button için submit adlı türünü değiştirmek olabilir.

Şimdi seçenekleri:

  1. İlk seçenek ideali olmalıdır: Eğer o bölünmüş ve createElement() ve appendChild() ile kurabileceği bir önceden biçimlendirilmiş dize sonuçları, olsun. Bu biraz daha fazla kodlama gerektirir rağmen (tarayıcı çok yukarıda belirtilen 2 işlevlerini kullanamazsınız berbat sürece), çapraz tarayıcı desteği sağlamak.
  2. Bu oldukça fazla tarayıcı-bağımlı (Firefox ve Internet Explorer ile sorunları vardı), ve searchContainer içinde yazılı geçerli HTML değiştirmek için kontrol ve diğer fonksiyonları bir sürü uygulamak zorunda kalabilirsiniz.

Ben 1 numara için gitmek istiyorum, o omuz kapalı ağırlığı çok kapalı koyar.

Güncelleme:

Istek başına, I) 1 bir örnekle düzenleme ediyorum. text_1:value_1|text_2:value_2|... (I XML hakkında çok şey bilmiyorum, ve bu benim için daha kolay): Eğer xhr_results kaydedilir ve bu gibi format düz metin olarak sonuçlar elde düşünürsek.

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

Bu kod parçası AJAX geçirilen tüm seçenekleri ile size bir açılır menü inşa edecek.

etiketler