0

Здравствуйте, надо получить из php - url картинки и 4 имени кнопки и заменить существующие. Обязательно ли использовать JSON? Если да, то как это реализовать?

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<img src="#" id="img_load">

<a href="#" name="button1" data-num="1" class="button">кнопка</a>
<a href="#" name="button2" data-num="2" class="button">кнопка</a>
<a href="#" name="button3" data-num="3" class="button">кнопка</a>
<a href="#" name="button4" data-num="4" class="button">кнопка</a>

<div class="results"></div>

<script language="javascript" type="text/javascript">
    $('.button').on('click', function(e){
        e.preventDefault();

        var img = $('#img_load');
        var current = $(this);

        $.ajax({
            type: 'POST',
            url: 'setings.php',
            data: 'btn=' + current.data('num'),
            success: function(data){
                $('.results').html(data);
                img.attr('src', 'image url');
            }
        });

    });
</script>

5
  • Использовать JSON не обязательно: можно передавать ссылки простым текстом.
    – Regent
    15 июн 2015 в 7:22
  • у меня есть 4 кнопки, нужно поменять их на Васю, Петю,Рому,Колю, что то я вообще не могу понять 15 июн 2015 в 7:26
  • Никто не запрещает прислать ссылки простым текстом (строка, содержащая ссылки, разделённые, например, запятыми). После чего разбить data на массив и присвоить нужным кнопкам нужные значения ссылок из этого массива.
    – Regent
    15 июн 2015 в 7:31
  • а конкретней можно про разбитие или где можно прочитать 15 июн 2015 в 7:46
  • В классе String есть метод .split()
    – Regent
    15 июн 2015 в 9:21

2 ответа 2

0

В данном случе, я считаю, лучше всего json:

На сервере:

{
   "src" : "http://......",
   "btn_1" : "Кнопка 1",
   "btn_2" : "Кнопка 2",
   "btn_3" : "Кнопка 3",
   "btn_4" : "Кнопка 4"
 }

В JS:

    $.ajax({
        type: 'POST',
        url: 'setings.php',
        dataType: 'json',
        data: 'btn=' + current.data('num'),
        success: function(data){ 
            $('#img_load').attr('src', data.src);
             $('.button').each(function(i,e){
                $(this).text(data["btn_"+(i+1)]);//Вместо (i+1) можно было бы $(this).attr('data-num'); использовать, но в данном случае можно и обойтись (i - index - от 0 считается, поэтому +1)
              });
        }
    });

Если нигде не ошибся - должно сработать.

Можно однако и без json и тут 2 варианта:

1) заключить всю перезагружаемую область (картинки и кнопку) в отдельный див (скажем, <div id="block1">...</div>) и потом подгружая страницу с обнавленными даннами просто тупо перезаписывать содержимое этого div ( $('#block1').html($(data).find('#block1').html());)

Вариант 2й - по отдельности, примерно как ты делал:

       success: function(data) {
          $data = $(data);//Чтобы повторно не вызывать обработчик
          $('#img_load').attr('src', $data.find('#img_load').src);
          $data_btns = $data.find('.button');
             $('.button').each(function(i,e){
                $(this).text($data_btns.eq(i).text());//index i у них должен получиться одинаковым, но, при желании, мажно, для большей точности, присвоить кнопкам id - $(this).text($data.find('#'+this.id).text());
              });
       }   
6
  • 1
    Не format, а dataType в параметрах Ajax запроса.
    – Regent
    15 июн 2015 в 7:53
  • Пробую через JSON, масив получает, но что то ничего не происходит, для наглядность, только замену картинки оставил... 15 июн 2015 в 8:11
  • Regent, да, точно - благодарю! 15 июн 2015 в 8:16
  • 4uva4ok1905 во-первых, проверь json- массив через валидатор (загугль - json validator - их много), во-вторых, тут, как правильно Regent заметил - я опечатку format, а не dataType в параметрах указал, дальше надо смотреть, приходит ли data и что в этой data приходит 15 июн 2015 в 8:21
  • Нашел проблему Firebug, вместо data[0].src, просто data.src. Спасибо за помощь! 15 июн 2015 в 13:58
0

Доступ к атрибутам

ajax удобен тогда, когда вам не нужно перезагружать страницу.

Чтобы изменить атрибуты элемента в самом PHP, вам нужно написать нечто подобное

echo '<script type="text/javascript">тут код изменения атрибута;</script>';


Только лучше обращаться к элементу по его ID, чем по его имени, потому как вы будете менять это имя, и будет путаница ппц

Ваш ответ

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

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