Category Archives: Ajax

ajax категория

Филтър за търсене в сайт (PHP и JavaScript)

В този пост ще Ви покажа как да направите филтър за търсене на информация във Вашия сайт. Първото нещо което трябва да направите е си създадете Вашата HTML форма, в която да заложите всички критерии, с които ще се извършва търсенето. Ето една примерна форма:

<form id=”searchingFilter”>

<label for=”criteri_1″>Критерийй 1:</label>
<select name=”criteri_1″ class=”srcr”>

<option value=”0″>All</option>
<option value=”1″>Option 1</option>
<option value=”2″>Option 2</option>

</select>
<label for=”criteri_2″>Критерийй 2:</label>
<select name=”criteri_2″ class=”srcr”

<option value=”0″>All</option>
<option value=”1″>Option 1</option>
<option value=”2″>Option 2</option>

</select>
<label for=”criteri_3″>Критерийй 3:</label>
<select name=”criteri_3″ class=”srcr”>

<option value=”0″>All</option>
<option value=”1″>Option 1</option>
<option value=”2″>Option 2</option>

</select>

<input type=”submit” value=”изпрати” />

</form>

Имаме 3 select елемента чрез които ще се задават нашите критерии за търсене.

Следващото нещо което ни е необходимо това е JavaScript кода, който ще събира всички зададени критерии от нашите select елементи, ще ги поставя в един JavaScript обект и последствие ще ги изпраща чрез Ajax заявка към скрипт намиращ се на сървъра. Ето и необходимия ни код:

<script type=”text/javascript”>

$(‘#searchingFilter’).submit(function($e){

$e.preventDefault();

//създаваме собствен обект
var myobj = new Object();

//вземаме стойностите на всички select елементи

$(‘select.srcr’).each(function(){

myobj[($(this).attr(“name”))] =$(this).val();

});

var json = JSON.stringify(myobj);

//извършваме Ajax заявка към serverScript.php
$.post(“serverScript.php”,{‘myobj’:json},function(returned_data){

eval(“var data =”+returned_data);

console.log(data.result);

});

});

</script>

Разбира се във филтъра за търсене може да се включат и други HTML елементи за входни данни. За някои от тях, които приемат текст набран от клавиатурата може да се наложи да направите верификация.

Последната част от филтъра ни за търсене е PHP частта (т.е. съдържанието на файла serverScript.php).

<?php

require_once ‘DBConnection.php’;

//вземаме нашия обект изпратен от JS
$result = jsonString2Object($_POST[‘myobj’]);

$query =”SELECT * FROM table WHERE

field1 LIKE ‘%”.$result->criteri_1.”%’ AND
field2 LIKE ‘%”.$result->criteri_2.”%’ AND
field3 LIKE ‘%”.$result->criteri_3.”%’ ‘”;

$result = mysql_query($query) or die(mysql_error());

//създаваме php масив 
$arr_obj = array();
$arr_obj[‘rows’] = mysql_num_rows($result);

if($arr_obj[‘rows’] > 0) $arr_obj[‘rows’]  = ‘Намерани са ‘.$arr_obj[‘rows’].’ записа’;

else $arr_obj[‘rows’] = ‘Няма намерени данни’;

//връщаме php масива съдържащ резултата

echo json_encode($arr_obj);

?>

Ако всичко е наред след задаване на критериите и натискането на бутона “изпрати” трябва да получите съобщение в конзолата за броя на откритите резултати в Базата Данни.

Едно малко допълнение за по-начинаещите. В заявката към базата дани

$query =”SELECT * FROM table WHERE

field1 LIKE ‘%”.$result->criteri_1.”%’ AND 
field2 LIKE ‘%”.$result->criteri_2.”%’ AND
field3 LIKE ‘%”.$result->criteri_3.”%’ ‘”;

на мястото на table поставете името на Вашата таблица, в която ще търсите записи. На местата на field1,field2,field3 поставете имената на колоните от таблицата, за които се извършва търсенето.

Ajax заявка чрез JSON обект

Много пъти ми се е налагало да изпращам Ajax заявки към сървърни скриптове с някакви изходни данни от web страницата заредена в браузъра. Правил съм това действие по най-различни начини, но най-добър и разбираем начин за мен остава чрез изоползването на JSON (JavaScript Object Notation).

Преди да преминем към същността на темата искам с няколко изречения да обясня какво представлява точно JSON.

Това е много лек формат за представяне на данни. Под лек се има предвид, че представянето на данните е много малко като размер в байтове и предаването по мрежата е изключително бързо. Също така синтаксиса на JSON е точно както синтаксиса за представянето на обекти в JavaScript, а именно:

{

property1:value,property2:value

}

JSON формата за представяне на данни се използва в езици като C, C++, C#, Java, JavaScript, Perl, Python и много други. За сравнение с XML, JSON е много по-лек за предаване по мрежата и много по разбираем за човек, тъй като стойностите на променливите в него представляват изброени чифтове свойство:стойност.

Нека си направим една форма за приемане на двете имена и пола на човек в нашата web страница:

<form>

<input type=”text” name=”frm_first_name” />

<input type=”text” name=”frm_last_name” />

<select name=”frm_gender”>

<option value=”m”>Мъж</option>

<option value=”f”>Жена</option>

</select>

<input type=”submit” value=”Прати” />

</form>

Има много начини за осъществяването на една Ajax заявка, аз лично предпочитам чрез JavaScript библиотеката JQuery и за това ще обясня този начин тук. Нека сега напишем кода за осъществяването на една POST  заявка към сървъра, на който се намира нашата web страница. Чрез JQuery това става по следния начин :

$(‘form’).submit(function($e){

$e.preventDefault();
var myobj = new Object();
$.each($(this).find(‘*[name^=”frm”]’),function(){

myobj[$(this).attr(“name”).substr(4)] = ($(this).val());

});
var json = JSON.stringify(myobj);
$.post(“serverScript.php”,{‘myobj’:json},function(returned_data){

eval(“var data =”+returned_data);

console.log(data.is_valid);

});

});

Следва обяснение на кода ред по ред:

– $e.preventDefault();//предотвратява презареждането на страницата, което ще се случи при натискането на бутона “Прати”. Затова тази заявка може да се нарече Ajax заявка.

– var myobj = new Object();//създаваме нов обект, който ще съдържа стойностите на всички полета от нашата форма (име,фамилия и пол)

– $.each($(this).find(‘*[name^=”frm”]’),function(){

myobj[$(this).attr(“name”).substr(4)] = ($(this).val());

});// минаваме през всички полета на формата и слагаме техните стойности като свойства в нашия нов обект. Тези три реда код казват на браузъра да направи следното: Обиколи всички елементи от web страницата който имат зададен атрибут name и стойността в него започва с думата “frm”. За всеки от тези елементи вземи стойността му и я задай като ново свойство на обекта myobj;

– myobj[$(this).attr(“name”).substr(4)]//създава ново свойство в обекта myobj, което ще се казва като върнатата част от текста съдържаща се в атрубута name. Например за първия елемент на формата където атрибута name е зададен да бъде “frm_first_name” извикването на кода $(this).attr(“name”).substr(4) ще върне “first_name” и нашия код ще стане myobj[“first_name”] =  ($(this).val());. т.е. substr(4) премахва първите 4 символа от стринга.

– var json = JSON.stringify(myobj);//създава нова променлива от обекта myobj, която ще представлява нашия JSON обект

– $.post(“serverScript.php”,{‘myobj’:json},function(returned_data)

eval(“var data =”+returned_data);

console.log(data.is_valid);

});

//чрез POST заявка изпращаме нашия JSON обект (json) към файлa serverScript.php, който се намира на сървъра в същата директория в която се намира и нашата web страница. Кода

function(returned_data){

eval(“var data =”+returned_data);

console.log(data.is_valid);

}

казва на браузъра да изпише в конзолата върнатия резултат от скрипта serverScript.php.

Ако не Ви е ясно точно какво и как би трябвало да работи и представлява един сървърен скрипт прочетете поста “PHP код от Ajax JSON заявка“.