0

Есть страница с некоторыми ссылками:
index.php:

<a href="#" id="1">Текст 1</a>
<a href="#" id="2">Текст 2</a>
<a href="#" id="3">Текст 3</a>

....

<div id="ajaxDiv"></div>

Есть файл, который принимает параметр id: images.php?id=....

Каким образом нужно сделать Ajax запрос, чтобы в файл images передавался ID ссылки, и результат выводить в <div id="ajaxDiv">?

5 ответов 5

2

Можно прописать ссылкам один общий класс:

<a href="#" class="my_class" id="1">Текст 1</a>
<a href="#" class="my_class" id="2">Текст 2</a>
<a href="#" class="my_class" id="3">Текст 3</a>

Потом навесить на них событие вот так:

jQuery(document).ready(function(){
        $('.my_class').click(function() {
            var id=$(this).attr("id");
            jQuery.post('images.php?id='+id, {},
                function(data) {
                    $("#ajaxDiv").text(data);
                }
            );
        });
    });
3
  • Вот только странно то, что функция срабатывает при клике только по ПЕВОЙ ссылке. На клики по остальным ссылкам - тишина. класс у ссылок общий....
    – Eugene
    5 сен 2011 в 13:10
  • 1
    попробуйте изменить var id=$(this).id; на var id=$(this).attr("id");
    – DemoS
    5 сен 2011 в 13:57
  • спасибо, работает. :)
    – Eugene
    5 сен 2011 в 17:08
2
var id=$(this).attr("id")

А в ajax запросе data: id

В ответе:

$("#ajaxDiv").text(responseText)

Примерно так.

2
  • <a href="#" id="images" title="images.php?id=$id">Text 1</a> .... $("#a_images").click(function(event) { var title_link = $(this).attr("title"); alert(title_link); $.ajax({ url: title_link, type:"GET", success: function(){ $("#ajaxMethod").text(responseText); } }); }); откуда взять этот самый ResponseText?
    – Eugene
    5 сен 2011 в 12:18
  • В переменной response будет ответ сервера success: function(response){ alert(response); }
    – DemoS
    5 сен 2011 в 12:35
2

Лучше тогда вместо

href="#" id="1"

сделать

href="#" onclick='имя_функции(1); return false;'

и так далее во всех. Вот вам и придет ваш ID в функцию, а дальше уже или аякс, если надо обновить что-то или просто ищите элемент на странице и меняете ему адрес, или текст, или что угодно.

Добавлено.

href="#" onclick='finik(1); return false;'

Остальные соответственно 2 и 3 и так далее, затем сама функция

function finik(id) {
    $.post('адрес_куда_запрос', {
        id: id,
        имя: 'переменная'
    }
    function (dates) {
        $("#ajaxDiv").text(dates);
        $("#ИД_рисунка").attr('src', 'images.php?id=' + id);
    });    
}
2
<ul class="nav">
    <li><a href="#" id="1">Текст 1</a></li>
    <li><a href="#" id="2">Текст 2</a></li>
    <li><a href="#" id="3">Текст 3</a></li>
</ul>

<div id="ajaxDiv"></div>

и

$(function(){
    $('ul.nav a').bind('click',function(){
        var id=$(this).attr('id');
        $.ajax({
            type:"POST",
            url:'images.php',
            data:'id='+id,
            dataType:'html',
            success:function(data){
               $('#ajaxDiv').html(data);
            },
            error:function(){alert('Error!')}
        });
        return false;
    });
});

http://jsfiddle.net/xYKsw/

1
$('#a_images').click(function(){
var id=$(this).attr('id');
$.post('image.php',
     {"id":id),
     function(result)
    {
        $('#ajaxDiv').html(result);
    });

});

result - это ответ от сервера. данные идут методом пост.

2
  • Переделал, слегка, но всё равно не работает: $('#a_images').click(function () { var title_link = $(this).attr("title"); alert(title_link); $.post(title_link), function (result) { $('#ajaxMethod').html(result); alert(result); }; });
    – Eugene
    5 сен 2011 в 12:39
  • Канеш не работает) ты ж в пост параметры $_GET пихаешь. И зачем в title их писать? не понятно. Если хочешь в строке передать то тогда $.get(url,function(res){ //do something });
    – iurii_n
    6 сен 2011 в 6:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.