Загрузка Ajax или OnClick() ⇐ Jquery

[Anonymous]

Я пытаюсь найти лучший способ загрузки некоторых результатов на основе кликов пользователя без загрузки новой страницы.
Прежде всего, мне удалось самостоятельно реализовать функцию поиска ajax в левой части страницы.
Теперь я хочу загрузить некоторые детали на основе того, что пользователь нажимает, в правую часть страницы. Это покажет подробную информацию о еде, которую они выбирают в результате поиска.
Что мне следует использовать для этого: Ajax или jQuery? Может кто-нибудь, пожалуйста, покажите мне, как это сделать? Я хотел бы иметь возможность передавать идентификатор, который вы можете видеть в результатах поиска HTML на моем сайте, и загружать его при нажатии.
Вот пример возвращаемого результата поиска, на который пользователь может нажать. Класс — это идентификатор элемента
APPLE JUC,CND OR BTLD,UNSWTND,W/ ADDED VIT C

Вот мой сайт, вы можете проверить, что я имею в виду.
http://challengeyourdiet.com/dev/usda/

Вот соответствующий код, над которым я сейчас работаю.
Ajax




$(document).ready(function() {
function ajax_delay(str){
setTimeout("str",2000);
}
$("#faq_search_input").watermark("Begin Typing to Search");
$("#faq_search_input").keyup(function()
{
var faq_search_input = $(this).val();
var dataString = 'keyword='+ faq_search_input;
if(faq_search_input.length>2)
{
$.ajax({
type: "GET",
url: "ajax-search.php",
data: dataString,
beforeSend: function() {
$('input#faq_search_input').addClass('loading');
},
success: function(server_response)
{
window.setTimeout(function() {
$('#searchresultdata').html(server_response).show();
$('span#faq_category_title').html(faq_search_input);
if ($('input#faq_search_input').hasClass("loading")) {
$("input#faq_search_input").removeClass("loading");
}
}, 1200);
}
});
}return false;
});
});


HTML

Food Details For : Keyword

Подробнее здесь: https://stackoverflow.com/questions/213 ... click-load