VPF::Нужна помощь с jQuery - Форум программистов

xZ0RGx

Дата 9.7.2009, 00:34 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 44
Регистрация: 5.6.2009

Репутация: нет
Всего: нет

Суть задачи.

Надо адаптировать PHP код под AJAX, чтобы не перезагружалась каждый раз страница. Фронтэнд и бэкенд одно и то же, все крутится на локалхосте на нем крутится и будет.

Мой первый опыт работы с jQuery и AJAX вообще.

test.php

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery.js"></script>

</head>
<body>
<button>Отправить ajax-запрос</button><br />
<span id="process"></span><br />
<script type="text/javascript">
<!--
$(document).ready(function(){
  // ajax-запрос
  $("button").click(function() {
    $.ajax({
    // Почему-то если указываю здесь ту же самую php-страницу (test.php) в которой находится этот скрипт, то в новое содержимое вставляется все вместе с кнопкой, а не только новые данные.
     url: "test2.php",  
     beforeSend: function(){
       $("#process").css("display","inline")
                    .text("Отправляю ajax-запрос");
     },
     success: function(answ){
       $("#process").text("Ответ получен")
                    .fadeOut(3000);
       $("body").append(answ);
     }
    });
  });
});
-->
</script>
</body>
</html>

test2.php

Код


<?php
header('Content-Type: text/html; charset=utf-8');
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
if(!isset($_GET['genre']) && !isset($_GET['artist']) && !isset($_GET['title'])) {
$genres = select_what("genre");
  foreach ($genres as $res) {
    echo '<a href="test2.php?genre='.$res.'" title="" class="button"><span>'.$res.'</span></a><br />';
  }
}

if(isset($_GET['genre']) && !isset($_GET['artist'])) {
$genre = $_GET['genre'];
$artists = select_what("artist", $genre);
  foreach ($artists as $res) {
      echo '<a href="?genre='.$genre.'&artist='.$res.'" title="" class="button"><span>'.$res.'</span></a><br />';
  }
}
}
?>

Как работало на PHP. Из БД делается выборка всех жанров, после чего они выводятся на страницу в foreach'е. Каждый элемент это ссылка передающая GET'ом название выбранного жанра.
Далее из GET'а параметр передается в функцию которая отбирает всех артистов в выбранном жанре.

Ну что тут можно переделать. например можно генерировать ссылки так, что по onclick будет присваиваться значение js переменной genre c именем выбранного жанра. а как дальше значение этой перменной передать скрипту test2.php аяксом? smile

Тяжко осваиваются новые технологии, товарищи smile

Помогите, пожалуйста! smile

krundetz

Дата 9.7.2009, 01:08 (ссылка)

(нет голосов)

Загрузка ...

Вечный странник

Профиль
Группа: Завсегдатай
Сообщений: 1400
Регистрация: 14.6.2007
Где: НН(Сормово)

Репутация: 1
Всего: 69

Цитата(xZ0RGx @ 9.7.2009, 00:34

)

Ну что тут можно переделать. например можно генерировать ссылки так, что по onclick будет присваиваться значение js переменной genre c именем выбранного жанра. а как дальше значение этой перменной передать скрипту test2.php аяксом?

как то расплывчато звучит, можешь сформулировать вопрос более четко?

из того что понял тебе необходимо из javascript передать данные на сервер при помощи ajax возможностей библиотеки jQuery?

если так то ты можешь передать их аяксом через массивы GET или POST. Если методом GET то просто формируешь ссылку вида sitename.ru/scriptname.php?argument1=znachenie1[&argument2=znachenie2[&......]] и передаешь по этой ссылке аякс запрос. Если передачу данных необходимо провести через POST то формируешь запрос вида

Код


$.ajax({
   type: "POST",
   url: "sitename.ru/scriptname.php",
   data: "argument1=znachenie1[&argument2=znachenie2[&......]] ",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
 });

и делаешь отправку.
И в первом и во втором случае argument1=znachenie1[&argument2=znachenie2[&......]] есть те данные которые тебе необходимо передать.

Это сообщение отредактировал(а) krundetz - 9.7.2009, 01:09

--------------------

!цензоры - Хранитель стратегической жидкости
Группа ТГВ
Группа Нижний Новгород

xZ0RGx

Дата 13.7.2009, 21:03 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 44
Регистрация: 5.6.2009

Репутация: нет
Всего: нет

Ну сначала хотелось бы разобраться почему скрипт работает некорректно если отсылает данные сам на себя.

Цитата

// Почему-то если указываю здесь ту же самую php-страницу (test.php) в которой находится этот скрипт, то в новое содержимое вставляется все вместе с кнопкой, а не только новые данные.
url: "test2.php",

По нажатию на кнопку должен вставляться ответ сервера. Но почему-то он вставляется вместе с кнопкой smile

-------------------------------

Ну а потом хотелось бы понять как мне надо генерировать на PHP ссылки.

Код



<a href="" onclick="var genre=genre1">Genre1</a>
<a href="" onclick="var genre=genre2">Genre2</a>
<a href="" onclick="var genre=genre3">Genre3</a>

$.ajax({
   type: "POST",
   url: "sitename.ru/scriptname.php",
   //data: "genre=?",            // а здесь как указать, что отправляется установленная раньше переменная и следовательно ее значение я заранее не знаю.
   //data: "$genre",
   data: "argument1=znachenie1[&argument2=znachenie2[&......]] ",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
 });

Все жанры выбираются из БД и естественно такая менюшка генерируется PHP. Запрос к БД, а потом вывод из полученного массива через foreach().

IDVsbruck

Дата 14.7.2009, 08:30 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 7
Всего: 22

$("body").append(answ);
Ты к имеющейся странице добавляешь подгружаемый контент, поэтому данные "наслаиваются".
Обычно делают двумя способами: а) $("body").empty().html(answ) - я тоже делаю с очисткой и б) replaceWith (кажись) - синтаксис посмотри в доке jQuery - заменяет содержимое на новое.

Правда, чего я не понял, - зачем менять страницу ajax'ом, а не перегружать, когда ты меняешь ее полностью? Обычно подгрузкой меняют какие-то данные или определенный КОНТЕЙНЕР - обычно DIV. Думаю, тебе стоит оптимизировать проект, сделать рестайлинг страницы и менять контейнер(ы), а не всю страницу.

xZ0RGx

Дата 20.7.2009, 23:56 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 44
Регистрация: 5.6.2009

Репутация: нет
Всего: нет

Цитата

Правда, чего я не понял, - зачем менять страницу ajax'ом, а не перегружать, когда ты меняешь ее полностью?

А, ну я пока не волшебник. Я только учусь smile

Это пример просто нашел какой-то где-то и пытаюсь его переписать под свои нужды, изучая тем самым фреймворк smile

Мне по сути надо контент только в одном диве обновлять по нажатию на ссылку <a>

Спасибо большое за ответ.

Если посоветуете какой-нибудь учебник с примерами, то тоже буду благодарен. Только совсем для идиотов чтобы, а то я как-то статей 5 наверное уже прочел разных и никак не въезжаю почему-то =(

UPD: вроде сделал. работает... завтра будет второй заход )

Это сообщение отредактировал(а) xZ0RGx - 21.7.2009, 04:40

krundetz

Дата 21.7.2009, 07:37 (ссылка)

(нет голосов)

Загрузка ...

Вечный странник

Профиль
Группа: Завсегдатай
Сообщений: 1400
Регистрация: 14.6.2007
Где: НН(Сормово)

Репутация: 1
Всего: 69

xZ0RGx, посмотри вот этот ресурс

--------------------

!цензоры - Хранитель стратегической жидкости
Группа ТГВ
Группа Нижний Новгород

xZ0RGx

Дата 23.7.2009, 17:17 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 44
Регистрация: 5.6.2009

Репутация: нет
Всего: нет

Был там. Спасибо за ссылку. Не могу сказать чтобы там разжевывалось. У меня такой вот вопрос еще.

В общем есть два дива на странице. Мне надо менять контент и в одном и другом одновременно. Как это сделать?
Сейчас у меня вот так.

Код


function send_none() {
  $(document).ready(function(){
    $.ajax({
      type: "POST",
       url: "processor.php",
       data: "none=",
       success: function(answ){
         $("#select").empty().append(answ);
       }
    });
  });
}

А мне надо по сути как-то так:

Код


function send_none() {
  $(document).ready(function(){
    $.ajax({
      type: "POST",
       url: "processor.php",
       data: "none=",
       success: function(answ){
         $("#select").empty().append(answ);
       }
       success: function(answ2){
         $("#navigation").empty().append(answ2);
       }
    });
  });
}

Как получить из PHP два разных ответа? Как PHP узнает какой ответ куда положить?

IDVsbruck

Дата 23.7.2009, 20:45 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 7
Всего: 22

Добавляй в ответ скрипт, который будет менять твои select и navigation.

P.S. Очень не советую использовать id с такими названиями как select.

xZ0RGx

Дата 24.7.2009, 13:53 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 44
Регистрация: 5.6.2009

Репутация: нет
Всего: нет

Не очень понял. Как это?

Обработчик на PHP выглядит примерно так.

Код


  if(isset($_POST['output_genres'])) {
    $genres = select_what("genre");           
     foreach ($genres as $id=>$res) {       
       echo '<a href="#" onclick="send_genre(\''.$id.'\');" title="" class="button"><span>'.$res.'</span></a><br />';
     }
  }

IDVsbruck

Дата 25.7.2009, 00:54 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 7
Всего: 22

Это не форум по ПэХаПэ, я в нем не разбираюсь. Сформируй нужный контент и всунь его в серверный код.

ksnk

Дата 25.7.2009, 07:23 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

xZ0RGx, Мысль первая -"дешевая"

Код


...
       success: function(answ){
         var res= answ.split('~~');
         $("#select").empty().append(res[0]||' Ничего нету! Все пропало, шеф!');
         $("#navigation").empty().append(res[1]||'и тут ничего нету! Все пропало, шеф!');
       }

, а в php между выводами этих контструкций вставить ~~

Мысль вторая - правильная. Если пользоватся не текстовым форматом вывода, а json, то выглядеть в JavaScript'е все это может вот так

Код


$.ajax({
      type: "POST",
       url: "processor.php",
       data: "none=",
       success: function(answ){
          if(!answ) alert('Все пропало!');
          if(answ.error) alert(answ.error);

          if (answ.select)    $("#select").empty().append(answ.select);
          if (answ.navigation)    $("#navigation").empty().append(answ. navigation);

       }
    });

На стороне Php формируется массив

Код


$result=array(
   'error'=>'В результате боев бойцами была оставлена шинель!',
   'select'=>'<h1>Hello</h1>',
   'havigation'=>'<a href="google.com">google it</a>'
);
...
echo json_encode ($result);

Вариант примерно такой-же стоимости - использовать Xml вместо json

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

xZ0RGx

Дата 28.7.2009, 05:00 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 44
Регистрация: 5.6.2009

Репутация: нет
Всего: нет

Мдеее.

Не все так просто в этом мире smile

ksnk: Спасибо большое за развернутый ответ. Очень все доходчиво. Если, бы мог поставил плюс в репу smile

Попробую на днях с JSON или XML. Хотя на крайний случай и «дешёвая» мысль сгодится, я думаю.

Это сообщение отредактировал(а) xZ0RGx - 28.7.2009, 05:03

Photon

Дата 2.8.2009, 04:20 (ссылка)

(нет голосов)

Загрузка ...

Злобный программер

Профиль
Группа: Участник
Сообщений: 282
Регистрация: 27.2.2009
Где: Таганрог

Репутация: нет
Всего: 12

ksnk, а кто сказал, что при запросе, указанном в мысли второй, данные, полученные с сервера, сразу распарсятся в массив? Кто будет указывать тип возвращаемого значения? По умолчанию-то, однако, xml или html smile

Так что надо малость подправить запросик:

Код


$.ajax({
      type: "POST",
      url: "processor.php",
      data: "none=",
      dataType: "json",
      success: function(answ){
          if(!answ) alert('Все пропало!');
          if(answ.error) alert(answ.error);
          if (answ.select)    
                $("#select").empty().append(answ.select);
          if (answ.navigation)    
                $("#navigation").empty().append(answ.navigation);
      }
});

Это сообщение отредактировал(а) Photon - 2.8.2009, 04:20

--------------------

With best regards..

ksnk

Дата 2.8.2009, 07:15 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Photon, ну да, dataType указывать надо... это упустил...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »