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

Новые блоги и статьи Все статьи Все блоги /
Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .

@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