Форум программистов, компьютерный форум, киберфорум
PHP: базы данных
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.69/13: Рейтинг темы: голосов - 13, средняя оценка - 4.69
0 / 0 / 0
Регистрация: 27.10.2013
Сообщений: 35

Простой пример метода ajax

27.10.2013, 01:18. Показов 2725. Ответов 7
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте! Нужна ваша помощь. Только начала изучать метод метод ajax. Разобранный пример в интернете поняла хотела бы его немного переделать. даны три файла index.html vote.php 1.js в html дана одна кнопка и она выводит через ajax надпись. Моя задача сделать несколько кнопок. Соответствено мне надо передать через get параметр 1 или 2 или 3 и уже в php условие. Как передать параметр через get. надеюсь на вас)
index.html

HTML5
1
2
3
4
5
6
7
8
9
<html>
<head>
   <script language="javascript" type="text/javascript" src="1.js"></script>
</head>
<body>
<input name= "голос" value="Голосовать!" onclick="vote()" type="button" />
<div id="vote_status">Здесь будет ответ сервера</div>
</body>
</html>
1.js
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
function getXmlHttp(){
 
  var xmlhttp;
 
  try {
 
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 
  } catch (e) {
 
    try {
 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 
    } catch (E) {
 
      xmlhttp = false;
 
    }
 
  }
 
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
 
    xmlhttp = new XMLHttpRequest();
 
  }
 
  return xmlhttp;
 
}
// javascript-код голосования из примера
 
function vote() {
 
    // (1) создать объект для запроса к серверу
 
    var req = getXmlHttp() 
 
        
 
        // (2)
 
    // span рядом с кнопкой
 
    // в нем будем отображать ход выполнения
 
    var statusElem = document.getElementById('vote_status')
 
     
 
    req.onreadystatechange = function() { 
 
        // onreadystatechange активируется при получении ответа сервера
 
 
 
        if (req.readyState == 4) {
 
            // если запрос закончил выполняться
 
 
 
            statusElem.innerHTML = req.statusText // показать статус (Not Found, ОК..)
 
 
 
            if(req.status == 200) {
 
                 // если статус 200 (ОК) - выдать ответ пользователю
 
                alert("Ответ сервера: "+req.responseText);
 
            }
 
            // тут можно добавить else с обработкой ошибок запроса
 
        }
 
 
 
    }
 
 
 
       // (3) задать адрес подключения
 
    req.open('GET', 'vote.php', true); 
 
 
 
    // объект запроса подготовлен: указан адрес и создана функция onreadystatechange
 
    // для обработки ответа сервера
 
      
 
        // (4)
 
    req.send(null);  // отослать запрос
 
   
 
        // (5)
 
    statusElem.innerHTML = 'Ожидаю ответа сервера...'
 
}
vote.php
PHP
1
2
3
<?php
sleep(3);
echo 'Ваш голос принят!';
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
27.10.2013, 01:18
Ответы с готовыми решениями:

Простой пример использования базы данных
Здравствуйте. Скиньте пожалуйста ссылки или готовые примеры для использование базы данных. Так как ни разу не нуждался ранее базе данных,...

Простой запрос через AJAX
Помогите сделать задачку. С AJAX вообще разобраться не получается( Технология AJAX. Объект XMLHttpRequest. С использованием Ajax написать...

Простой пример иерархии классов, демонстрирующий полиморфный вызов метода
Приведите пример простой иерархии классов, демонстрирующий полиморфный вызов метода (работа с классом-наследником через ссылку на базовый...

7
 Аватар для koza4ok
632 / 440 / 67
Регистрация: 19.09.2012
Сообщений: 1,632
28.10.2013, 12:30
Цитата Сообщение от solare Посмотреть сообщение
Как передать параметр через get. надеюсь на вас)
Передача идет через строку запроса....
Параметры передаются в виде имя=значение разделенные &
JavaScript
1
 req.open('GET', 'vote.php?param='+val, true);
Принять параметр можно через $_GET['param'];
vote.php
PHP
1
2
3
<?php
sleep(3);
echo 'Ваш голос принят!'.$_GET['param'];
Сначала попробуйте разобратся с AJAX через JQUERY...Он очень будет понятен.Потом обезательно вернитесь к нативному скрипту
1
0 / 0 / 0
Регистрация: 27.10.2013
Сообщений: 35
04.11.2013, 01:14  [ТС]
koza4ok, А разве не надо в html файле указывать этот самый get рядом с кнопкой? т.е. ведь при нажатии на нее параметр передается. Если надо то как это указать?
0
 Аватар для koza4ok
632 / 440 / 67
Регистрация: 19.09.2012
Сообщений: 1,632
04.11.2013, 01:20
При нажатии на кнопку выполняете функцию которая делает запрос
HTML5
1
<button onclick="fn()"  >
function fn(){

req.open('GET', 'vote.php?param='+val, true);
//...
}
0
0 / 0 / 0
Регистрация: 27.10.2013
Сообщений: 35
04.11.2013, 15:51  [ТС]
простите что то не очень догоняю. А что за переменная val? И какое она принимает значение и как его получаете? И еще у меня запрос выполняет функция vote получается ее надо удалить или fn вставить внутрь функции vote?
0
1178 / 1128 / 94
Регистрация: 31.05.2012
Сообщений: 3,060
04.11.2013, 18:00
Цитата Сообщение от koza4ok Посмотреть сообщение
Сначала попробуйте разобратся с AJAX через JQUERY...Он очень будет понятен.Потом обезательно вернитесь к нативному скрипту
А я за то что бы сначала разобраться с нативным языком) а потом уже юзать фреймворки, которые облегчают жизнь, когда будите понимать что внутри них происходит
Цитата Сообщение от solare Посмотреть сообщение
А что за переменная val?
её нужно видимо в параметре функции передавать
JavaScript
1
2
3
function fn(id) {
    req.open('GET', 'vote.php?id='+id, true);
...
HTML5
1
<button onclick="fn(1)"  >
Способов куча, например можно кнопкам задать атрибут data-id и на все кнопки с классом .btn повесить обработчик, который будет брать id из атрибута.
Вот пример с jQuery.

Добавлено через 1 минуту
Цитата Сообщение от solare Посмотреть сообщение
И еще у меня запрос выполняет функция vote получается ее надо удалить или fn вставить внутрь функции vote?
fn, vote, blablabla... не важно как названа функция, но желательно давать понятное имя, что бы человек, который впервые увидел код, мог понять по имени функции что она делает, не нужно сильно сокращать но и давать очень длинные имена тоже не нужно.

Добавлено через 7 минут
Вообщем функция vote будет примерно такой
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function vote(id) {
    
    var req = getXmlHttp() 
 
    var statusElem = document.getElementById('vote_status_' + id)
 
    req.onreadystatechange = function() { 
 
        if (req.readyState == 4) {
 
            statusElem.innerHTML = req.statusText
 
            if(req.status == 200) {
                 alert("Ответ сервера: "+req.responseText);
             }
 
        }
    }
 
    req.open('GET', 'vote.php?id=' + id, true); 
 
    req.send(null);
 
    statusElem.innerHTML = 'Ожидаю ответа сервера...'
}
php
PHP
1
2
3
<?php
sleep(3);
echo 'Ваш голос за ', $_GET['id'],' принят!';
А html код такой
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
   <script language="javascript" type="text/javascript" src="1.js"></script>
</head>
<body>
 
    <input name= "голос" value="Голосовать!" onclick="vote(1)" type="button" />
    <div id="vote_status_1">Здесь будет ответ сервера 1</div>
 
    <input name= "голос" value="Голосовать!" onclick="vote(2)" type="button" />
    <div id="vote_status_2">Здесь будет ответ сервера 2</div>
 
</body>
</html>
1
0 / 0 / 0
Регистрация: 27.10.2013
Сообщений: 35
05.11.2013, 21:24  [ТС]
Блин. Дошло. Большое вам спасибо)
0
1 / 1 / 0
Регистрация: 27.07.2013
Сообщений: 13
08.01.2014, 19:28
Цитата Сообщение от solare Посмотреть сообщение
Здравствуйте! Нужна ваша помощь. Только начала изучать метод метод ajax. Разобранный пример в интернете поняла хотела бы его немного переделать. даны три файла index.html vote.php 1.js в html дана одна кнопка и она выводит через ajax надпись. Моя задача сделать несколько кнопок. Соответствено мне надо передать через get параметр 1 или 2 или 3 и уже в php условие. Как передать параметр через get. надеюсь на вас)
index.html

HTML5
1
2
3
4
5
6
7
8
9
<html>
<head>
   <script language="javascript" type="text/javascript" src="1.js"></script>
</head>
<body>
<input name= "голос" value="Голосовать!" onclick="vote()" type="button" />
<div id="vote_status">Здесь будет ответ сервера</div>
</body>
</html>
1.js
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
function getXmlHttp(){
 
  var xmlhttp;
 
  try {
 
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 
  } catch (e) {
 
    try {
 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 
    } catch (E) {
 
      xmlhttp = false;
 
    }
 
  }
 
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
 
    xmlhttp = new XMLHttpRequest();
 
  }
 
  return xmlhttp;
 
}
// javascript-код голосования из примера
 
function vote() {
 
    // (1) создать объект для запроса к серверу
 
    var req = getXmlHttp() 
 
        
 
        // (2)
 
    // span рядом с кнопкой
 
    // в нем будем отображать ход выполнения
 
    var statusElem = document.getElementById('vote_status')
 
     
 
    req.onreadystatechange = function() { 
 
        // onreadystatechange активируется при получении ответа сервера
 
 
 
        if (req.readyState == 4) {
 
            // если запрос закончил выполняться
 
 
 
            statusElem.innerHTML = req.statusText // показать статус (Not Found, ОК..)
 
 
 
            if(req.status == 200) {
 
                 // если статус 200 (ОК) - выдать ответ пользователю
 
                alert("Ответ сервера: "+req.responseText);
 
            }
 
            // тут можно добавить else с обработкой ошибок запроса
 
        }
 
 
 
    }
 
 
 
       // (3) задать адрес подключения
 
    req.open('GET', 'vote.php', true); 
 
 
 
    // объект запроса подготовлен: указан адрес и создана функция onreadystatechange
 
    // для обработки ответа сервера
 
      
 
        // (4)
 
    req.send(null);  // отослать запрос
 
   
 
        // (5)
 
    statusElem.innerHTML = 'Ожидаю ответа сервера...'
 
}
vote.php
PHP
1
2
3
<?php
sleep(3);
echo 'Ваш голос принят!';
начал изучать AJAX, разбирался с данным кодом... все понял... но код у меня не работает.....
метод sleep из рнр запускается.... но сообщение из echo не выводится... уже сто раз все пересмотрел и не понимаю в чем проблема....
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
08.01.2014, 19:28
Помогаю со студенческими работами здесь

Нужен простой пример передачи одной функции или метода в другую функцию или метод
Собственно сабж. Не знаю, как сделать. Как это выглядит синтаксически? Пробовал по разному но не получается Пробовал так. Покажите...

Сравнение метода Гаусса и метода простой итерации
сравнение эффективности различных методов решения систем линейных алгебраических уравнений.Метод Гаусса и метод простой итерации матрица...

Пример простой БД
Добрый вечер. Cкиньте пример простой БД, ато нигде немогу найты.

Простой пример
Доброе время суток! Вот написал на html-е пример меню. Можете помочь через JQ сделать эффект активной ссылки? Чтоб она как-то выделялась от...

простой пример!
помогите пожалуйста, скажите в чем моя ошибка. Я только начинаю учиться работать на Java. public class Proba1 { public void...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Новые блоги и статьи
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Access
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru