За последние 24 часа нас посетили 17500 программистов и 1713 роботов. Сейчас ищет 1561 программист ...

Создание Ajax запроса через ссылку

Тема в разделе "JavaScript и AJAX", создана пользователем igroc, 15 июл 2014.

  1. igroc

    igroc Активный пользователь

    С нами с:
    15 июл 2014
    Сообщения:
    75
    Симпатии:
    1
    Помогите решить проблему с написание скрипта отправителя и обработчика
    У меня формируется меню из базы данных

    {echo '<li><a href="?razdel='.$row['razdel']."&".$row1['podrazdel'].'">'.$row1['podrazdel'].'</a></li>';}

    как сделать чтобы полученная ссылка отправляла post запрос и в div появлялся ответ из базы данных из учета отправленных данных без перезагрузки страницы
     
  2. runcore

    runcore Старожил

    С нами с:
    12 окт 2012
    Сообщения:
    3.625
    Симпатии:
    158
    jquery ajax() load()
     
  3. igroc

    igroc Активный пользователь

    С нами с:
    15 июл 2014
    Сообщения:
    75
    Симпатии:
    1
    это я понял как должна выглядеть ссылка при наведении и что должно быть написано в обрабатываемом файле
    я пытаюсь типа <a href="#" onclick="$.post('index.php?razdel=myrazdel&podrazdel=test ', function(data)">Отправить</a>
     
  4. runcore

    runcore Старожил

    С нами с:
    12 окт 2012
    Сообщения:
    3.625
    Симпатии:
    158
  5. igroc

    igroc Активный пользователь

    С нами с:
    15 июл 2014
    Сообщения:
    75
    Симпатии:
    1
    я уже зачитался и напробовался ничего не получается можно по конкретнее с примером

    наподобие:
    подробная ссылка
    файл обработки
    ответ
     
  6. Luge

    Luge Старожил

    С нами с:
    2 фев 2007
    Сообщения:
    4.680
    Симпатии:
    1
    Адрес:
    Минск
    как пробовал и как не получается? Толку в готовом коде?
     
  7. Deonis

    Deonis Старожил

    С нами с:
    15 фев 2013
    Сообщения:
    1.521
    Симпатии:
    504
    Посмотрите эту статейку. Там же есть и пример вместе с обработчиком.
     
  8. igroc

    igroc Активный пользователь

    С нами с:
    15 июл 2014
    Сообщения:
    75
    Симпатии:
    1
    что-то не получается
    вместо кнопки пишу
    <a href="#" onclick="$.ajax({type: 'POST', url: 'handler.php?action=sample2', data: 'name=Andrew&nickname=Aramis', success: function(data){ $('.results').html(data);}});">Отправить</a>

    в результате нечего а хотелось бы передать три параметра обработать sql запрос и вывести результат
     
  9. Хыиуду

    Хыиуду Активный пользователь

    С нами с:
    3 июн 2014
    Сообщения:
    618
    Симпатии:
    5
    А библиотеку jQuery добавили?
     
  10. igroc

    igroc Активный пользователь

    С нами с:
    15 июл 2014
    Сообщения:
    75
    Симпатии:
    1
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Cool page site</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><!-- Библиотека jQuery -->
    <script src="js/script.js"></script><!-- Наш JS-код -->
    </head>
    <body>
    <button id="btn">Кликни меня!</button><!-- Кнопка для старта AJAX-запроса -->

    <a href="#" onclick="$.ajax({type: 'POST', url: 'handler.php?action=sample2', data: 'name=Andrew&nickname=Aramis', success: function(data){ $('.results').html(data);}});">Отправить асинхронный запрос00000000</a>



    <div id="output"></div><!-- Блок для вывода результатов -->
    </body>
    </html>

    Добавлено спустя 1 минуту 1 секунду:
    Кнопка для старта AJAX-запроса работает а ссылка нет
     
  11. Luge

    Luge Старожил

    С нами с:
    2 фев 2007
    Сообщения:
    4.680
    Симпатии:
    1
    Адрес:
    Минск
    ну, запрос на handler.php?action=sample2 отправляет
     
  12. igroc

    igroc Активный пользователь

    С нами с:
    15 июл 2014
    Сообщения:
    75
    Симпатии:
    1
    поправил все вот так

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Cool page site</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><!-- Библиотека jQuery -->
    <script src="js/script.js"></script><!-- Наш JS-код -->
    </head>
    <body>


    <a href="#" onclick="$.ajax({type: 'POST', url: 'handler.php', data: 'data1=1&data2=2&data3=3', success: function(data){ $('.results').html(data);}});">Отправить</a>


    <div id="data"></div>

    </body>
    </html>

    Добавлено спустя 1 минуту 3 секунды:
    что написать в handler.php что бы в <div id="data"></div> появилось
    1 2 3
     
  13. Luge

    Luge Старожил

    С нами с:
    2 фев 2007
    Сообщения:
    4.680
    Симпатии:
    1
    Адрес:
    Минск
    1. у тебя
    Код (Text):
    1. $('.results').html(data);
    обновит элемент с классом results. Такого блока в твоём примере нет
    2.
    Код (PHP):
    1. echo '1 2 3'; 
     
  14. igroc

    igroc Активный пользователь

    С нами с:
    15 июл 2014
    Сообщения:
    75
    Симпатии:
    1
    поправил
    <div id="results"></div>

    echo '1 2 3'; не подойдет т.к. я вместо 1 2 3 в data1=1&data2=2&data3=3 буду присваивать значения
    и что написать в handler.php
     
  15. Luge

    Luge Старожил

    С нами с:
    2 фев 2007
    Сообщения:
    4.680
    Симпатии:
    1
    Адрес:
    Минск
    Код (PHP):
    1. echo $_POST['data1'] 
     
  16. igroc

    igroc Активный пользователь

    С нами с:
    15 июл 2014
    Сообщения:
    75
    Симпатии:
    1
    не работает
    index.html

    <html>
    <head>
    <meta charset="utf-8">
    <title>Cool page site</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><!-- Библиотека jQuery -->
    <script src="js/script.js"></script><!-- Наш JS-код -->
    </head>
    <body>


    <a href="#" onclick="$.ajax({type: 'POST', url: 'handler.php', data: 'data1=1&data2=2&data3=3', success: function(data){ $('.results').html(data);}});">Отправить</a>


    <div id="results"></div>

    </body>
    </html>


    handler.php

    <?
    echo $_POST['data1'];

    ?>


    ссылка отправить есть
    при наведение показывает #
    при нажатии не чего не делает
     
  17. Luge

    Luge Старожил

    С нами с:
    2 фев 2007
    Сообщения:
    4.680
    Симпатии:
    1
    Адрес:
    Минск
  18. igroc

    igroc Активный пользователь

    С нами с:
    15 июл 2014
    Сообщения:
    75
    Симпатии:
    1
    напиши как должно быть а я пока лекцию почитаю

    Добавлено спустя 32 минуты 18 секунд:
    Luge если понимаешь помоги пожалуйста а то я уже около месяца не могу найти выхода
     
  19. Хыиуду

    Хыиуду Активный пользователь

    С нами с:
    3 июн 2014
    Сообщения:
    618
    Симпатии:
    5
    Либо в success не $('.results'), а $('#results'), либо в диве не <div id=results>, а <div class=results>
     
  20. igroc

    igroc Активный пользователь

    С нами с:
    15 июл 2014
    Сообщения:
    75
    Симпатии:
    1
    спасибо работает буду разбирать далее
     
  21. igroc

    igroc Активный пользователь

    С нами с:
    15 июл 2014
    Сообщения:
    75
    Симпатии:
    1
    помогите победить еще
    код текста

    {echo '<a href="#"
    onclick="
    $.ajax
    ({
    type: "POST", url: "rez.php",
    data: "data1=1&data2=2&data3=3",
    success: "function(data){.$('#results')..html(data);}"});">'.$row1['podrazdel'].'</a></li>';}

    как прописать {.$('#results') чтобы php правильно понял
     
  22. Хыиуду

    Хыиуду Активный пользователь

    С нами с:
    3 июн 2014
    Сообщения:
    618
    Симпатии:
    5
    Вы неверно понимаете принцип Ajax.
    Вот вы нажали вашу ссылку. Ajax отправил POST-запрос скрипту. Скрипт обработал запрос и выдал некий текст, Ajax вернул его обратно в JS в переменную data.responseText (кажется, так, сделайте console.log(data), чтобы убедиться). На стороне клиента никакого PHP уже нет, там только JS, которому дали data. Все эти $row1['podrazdel'] для него - китайская грамота.
    Обычно в таких случаях делают так: на стороне php формируют какой-то массив, который надо передать js-скрипту, и в конце делают echo json_encode($data). А на стороне js делают eval('res = '+data.responseText), и получают в res ровно тот же массив
     
  23. igroc

    igroc Активный пользователь

    С нами с:
    15 июл 2014
    Сообщения:
    75
    Симпатии:
    1
    нет все правильно

    {echo '<a href="#"
    onclick="
    $.ajax
    ({
    type: "POST", url: "rez.php",
    data: "data1=1&data2=2&data3=3",
    success: "function(data){.$('#results')..html(data);}"});">Отправить</a></li>';}

    '.$row1['podrazdel'].' можно заменить на отправить у меня из базы подставляет значение и оно получается в меню

    что на стороне сервера не совсем понял что где дописать

    data: "data1=1&data2=2&data3=3", тут тоже будут значения из базы, а на стороне в rez.php будут выбираться данные из базы и выводится в div контейнер
     
  24. Хыиуду

    Хыиуду Активный пользователь

    С нами с:
    3 июн 2014
    Сообщения:
    618
    Симпатии:
    5
    Да, с $row1['podrazdel'] я ступил.
    Попробуйте передавать данные не строкой, а словарем:
    data: {data1: 1, data2: 2, data3: 'abcd'}
     
  25. igroc

    igroc Активный пользователь

    С нами с:
    15 июл 2014
    Сообщения:
    75
    Симпатии:
    1

    код
    Код (PHP):
    1. <?
    2. echo '<a href="#" 
    3. onclick="
    4. $.ajax
    5. ({
    6. type: "POST", 
    7. url: "handler.php",
    8. data: "data1=1&data2=2&data3=3", 
    9. success: "function(data)
    10. { $('#results')
    11. .
    12. html(data)},
    13.  
    14.  
    15. })
    16.  
    17. ">Отправить</a>'
    18. ?>
    // используем BB-коды. Luge

    ошибка пишет html(data)},
    Parse error: syntax error, unexpected '}', expecting ',' or ';' in W:\home\4.ru\www\1\index.php on line 38

    что не хватает или хватает уже не знаю все перебпробовал разделил по строчно специально что бы найти ошибку