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

@solare · Регистрация: 27.10.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте! Нужна ваша помощь. Только начала изучать метод метод 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 'Ваш голос принят!';

@koza4ok · 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...Он очень будет понятен.Потом обезательно вернитесь к нативному скрипту

@solare · 04.11.2013, 01:14 **[ТС]**

koza4ok, А разве не надо в html файле указывать этот самый get рядом с кнопкой? т.е. ведь при нажатии на нее параметр передается. Если надо то как это указать?

@koza4ok · 04.11.2013, 01:20

При нажатии на кнопку выполняете функцию которая делает запрос

HTML5
1
<button onclick="fn()"  >

function fn(){

req.open('GET', 'vote.php?param='+val, true);
//...
}

@solare · 04.11.2013, 15:51 **[ТС]**

простите что то не очень догоняю. А что за переменная val? И какое она принимает значение и как его получаете? И еще у меня запрос выполняет функция vote получается ее надо удалить или fn вставить внутрь функции vote?

DrobyshevAlex · 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>

@solare · 05.11.2013, 21:24 **[ТС]**

Блин. Дошло

. Большое вам спасибо)

@Kenshin-san · 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 не выводится... уже сто раз все пересмотрел и не понимаю в чем проблема....

Новые блоги и статьи Все статьи Все блоги /
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 . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@solare 0 / 0 / 0 Регистрация: 27.10.2013 Сообщений: 35
	04.11.2013, 01:14 [ТС]
	koza4ok, А разве не надо в html файле указывать этот самый get рядом с кнопкой? т.е. ведь при нажатии на нее параметр передается. Если надо то как это указать? 0

@solare 0 / 0 / 0 Регистрация: 27.10.2013 Сообщений: 35
	04.11.2013, 15:51 [ТС]
	простите что то не очень догоняю. А что за переменная val? И какое она принимает значение и как его получаете? И еще у меня запрос выполняет функция vote получается ее надо удалить или fn вставить внутрь функции vote? 0

@solare 0 / 0 / 0 Регистрация: 27.10.2013 Сообщений: 35
	05.11.2013, 21:24 [ТС]
	Блин. Дошло. Большое вам спасибо) 0