|
 3 Кб |
|
| Пробую разобраться в Ajax на простых примерах. На странице выдаче результатов почему-то дублируются записи в таком порядке
1
2
1
2
В базу данные поступают в нормальном виде, если убрать Ajax, все работает нормально. Файлы прикрепляю.
Спасибо | |
|
|
|
|
|
|
|
для: bibika
(11.10.2011 в 11:53)
| | А зачем Вы дважды вызываете файл submit.php - сначала посредством Ajax по событию onsubmit, затем в результате самого сабмита? | |
|
|
|
|
|
|
|
для: АЯС
(11.10.2011 в 12:03)
| | Может подскажите как написать правильно. Кроме того я заметил вот что, если вставить в базу 1 запись и обновлять страницу вывода ничего не дублируется, если 2 записи, дублируется 1 запись и так далее..
Помогите разобраться. | |
|
|
|
|
|
|
|
для: bibika
(11.10.2011 в 12:19)
| | Народ дайте пожалуйста простой пример с комментариями, что можно было разобраться. | |
|
|
|
|
|
|
|
для: bibika
(11.10.2011 в 13:31)
| | Из приложенных вами кодов совершенно непонятно - что именно вам надо.
Объясните кратко задачу. В том числе поясните:
- что должно появиться на странице по нажатию кнопки сабмит
- что должно появиться по нажатию ссылки "вывод" | |
|
|
|
|
|
|
|
для: АЯС
(11.10.2011 в 18:57)
| | Объясняю:
в файл с формой index.html вводятся данные
файл submit.php обрабатывает данные и забрасывает данные в базу
файл vyvod.php просто выводит данные с базы без перезагрузки
в файл edit.php я думал засунуть редактирование данных без перезагрузки, но застрял на дубляже при выводе записей.
Если коротко, то:
>- что должно появиться на странице по нажатию кнопки сабмит
данные заносятся в базу и отображаются на странице vyvod.php
>- что должно появиться по нажатию ссылки "вывод"
на это можно внимания не обращать, это я сделал что б каждый раз не набирать в строке адрес vyvod.php
просто сложно найти простой пример без сторонних библиотек и наворотов, чтоб разобраться самому.
Спасибо за ответы | |
|
|
|
|
|
|
|
для: bibika
(11.10.2011 в 19:26)
| | АЯС где Вы пропали. Очень жду Вашего ответа. | |
|
|
|
|
|
|
|
для: bibika
(11.10.2011 в 19:26)
| | Судя по вашему описанию, AJAX вам нужен только и исключительно для ссылки "вывод", которая вам как бы и не нужна и на которую вы просили "не обращать внимания":-)
PS. Очень трудно помочь тому, кто сам не понимает - а что именно ему нужно.
Или - если и понимает - не может объяснить ему требуемое. | |
|
|
|
|
|
|
|
для: АЯС
(12.10.2011 в 11:02)
| | Да я косноязычен, кроме того русский не мой родной язык, та что извините. Вот что я хочу коротко:
главное
1. добавить без перезагрузки данные в базу
2. вывести их без перезагрузки на другой странице
не очень важное
3. если Вы покажете как сделать формочку в которой можно править внесенные в базу данные без перезагрузки вообще будет супер.
Извините, что отбираю Ваше время
Спасибо за ответ
>PS. Очень трудно помочь тому, кто сам не понимает - а что именно ему нужно.
>Или - если и понимает - не может объяснить ему требуемое.
Скорее второе, я понимаю, а не могу пояснить. | |
|
|
|
|
|
|
|
для: bibika
(12.10.2011 в 11:44)
| | просто сложно найти простой пример без сторонних библиотек и наворотов, чтоб разобраться самому
Я могу написать код на jquery (стороння библиотека) сойдет? | |
|
|
|
|
|
|
|
для: Чайчай_выручай
(12.10.2011 в 12:25)
| | Да если не сложно, напишите пример. | |
|
|
|
|
|
|
|
для: bibika
(12.10.2011 в 12:39)
| | Это вырезки из регистрации, которые я использовал.
Dannie.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Составление программы</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src=”query.js" type = "text/javascript"></script>
<script src="otpravka.js" type = "text/javascript"></script>
</head>
<body>
// Форму можно не открывать и не закрывать, потому что мы сами ее отправим
<input type="text" name="name" id="name" >
//пароли и т.д. не буду писать все по аналогии с именем
<input type="submit" name="otp" id="otp" value="Зарегистрировать">
</body>
</html>
|
otpravka.js
$(document).ready(function(){
//Если кликнули по сабмиту у которого id="otp"
$('#otp').click(function(){
// возвращаем в переменную х значение поля name
var x = $('#name').val();
// Указываем файл, который будет обрабатывать запрос
$.post("ajax.php",
//Что отправляем, можно и массив отправить
{'m[]': x},
//Функция которая возвращает обработанные данные
function(prihod){
if(prihod==1){alert('получилось')}else{alert('тупим');}
});
});
});
|
Ajax.php
<?php
header('Content-type: text/html; charset=windows-1251');
// Здесь подключемся к базе данных
require_once '../bazadannih.php';
if (isset($_POST['m']))
// Меняем кодировку на нужную нам
{$name = iconv ('UTF-8', 'cp1251', $_POST['m'][0]);
// Вставляем данные в таблицу, предположив, что мы отправили еще пароль и мэйл
$query = "INSERT INTO table(name, pass, email)
VALUES ('".mysql_real_escape_string( $name )."',
'".mysql_real_escape_string( md5($pass))."',
'".mysql_real_escape_string($email)."');";
$res = mysql_query( $query );
$vihod=1;
}else{$vihod=2;}
//Возвращаем данные
echo json_encode($vihod); //Закрывать php или что либо писать после этого нельзя
|
| |
|
|
|
|
|
|
|
для: Чайчай_выручай
(12.10.2011 в 13:29)
| | Спасибо уважаемый. Сейчас протестируем. И буду ждать решения от АЯСа, что б посмотреть на разные варианты.
Я тут посмотрел, у Вы только привели пример внесения записей в базу, а вывод с базы не покажете?
Спасибо | |
|
|
|
|
|
|
|
для: bibika
(12.10.2011 в 13:35)
| |
$query = "SELECT * FROM table WHERE
name ='".mysql_real_escape_string( $name )."'
LIMIT 1";
$res = mysql_query( $query );
|
| |
|
|
|
|
|
|
|
для: Чайчай_выручай
(12.10.2011 в 14:12)
| | Спасибо, вывести записи я знаю как. Я спрашивал о том, как вывести их на страницу с помощью Ajax, с минимальной задержкой. | |
|
|
|
|
|
|
|
для: bibika
(12.10.2011 в 14:20)
| | otpravka.js
$(document).ready(function(){
//Если кликнули по сабмиту у которого id="otp"
$('#otp').click(function(){
// возвращаем в переменную х значение поля name
var x = $('#name').val();
// Указываем файл, который будет обрабатывать запрос
$.post("ajax.php",
//Что отправляем, можно и массив отправить
{'m[]': x},
//Функция которая возвращает обработанные данные
function(prihod){
if(prihod){
//Выбираем элемент в котором будем выводить данные.
В переменную vihod которая отправляется из файла ajax.php можно вставить хоть массив.
Здесь он будет как строка, мы его обрежем, потому что по бокам будут
квадратные скобки и сделаем массивом
var x = prihod.substring(1, prihod.length-1);
var massiv = x.split(",");
//Создаете <div id=idelement class=scrit_pokazat></div> в том месте, где хотите делать вывод данных. Даете ему класс в css
//.scrit_pokazat{display:none;}
$('# idelement').append('massiv').removeClass('scrit_pokazat');
alert(massiv)}else{alert('тупим');}
});
});
});
|
| |
|
|
|
|
|
|
|
для: bibika
(12.10.2011 в 11:44)
| | Мда...
Пойдём другим путём.
В окне браузера загружена текущая страница с двумя (тремя...десятью) полями для заполнения (и/или списки, где юзер может что-то выбрать) и с ОДНОЙ кнопкой.
Как я понял, по нажатию на эту кнопку на сервер передаются данные из полей, заполненных (выбранных) юзером, и что-то там (на сервере) с этими данными происходит (меняется база данных).
Вы попробуйте по-русски (можете даже на мове, если трудности с русским) объяснить - ЧТО должно произойти ВИЗУАЛЬНО в окне браузера после нажатия на эту кнопку?
Варианты (или/или):
1. текущая страница в окне должна замениться на какую-то другую (например, на файл, адрес которого указан в атрибуте ACTION тега <FORM> текущей страницы)
2. текущая страница должна остаться в окне браузера, но на ней должны произойти какие-то видимые юзеру изменения (какие именно?)
3. должно произойти что-то совсем другое, о чём я не смог догадаться | |
|
|
|
|
|
|
|
для: АЯС
(12.10.2011 в 21:21)
| | Отвечаю кратко:
2. текущая страница должна остаться в окне браузера, но на ней должны произойти какие-то видимые юзеру изменения (какие именно?)
просто отобразить запись данные добавлены. Что-то типа как в Gmail. | |
|
|
|
|
|
|
|
для: bibika
(13.10.2011 в 20:09)
| | 1. На текущей странице (файл index.html) создаёте форму (теги <form>...</form>)
2. У открывающего тега <form> НЕ НАДО прописывать никаких атрибутов. Совсем никаких: ни action, ни method, ни name, ни target... Абсолютно "голый" тег <form>.
3. Между тегами <form> и </form> помещаете нужные вам для заполнения юзером текстовые поля (теги <input type="text"> и <textarea>) и элементы, в которых юзер должен сделать выбор (теги <input type="checkbox">, <input type="radio">, <select>). И то, и другое - в любом нужном вам количестве и в любом порядке.
4. Каждому из прописанных текстовых полей (и каждому из прописанных элементов выбора) устанавливаете уникальные name. Обязательно - валидные значения (содержащие только латинские буквы любого регистра, арабские цифры и символ подчёркивания, при этом начинающиеся с буквы)
5. Кроме того, в любом месте (можно даже самой первой) между тегами <form> и </form> помещаете кнопку. Но (ВАЖНО!!!) не кнопку сабмита формы, а просто кнопку <input type="button" value="Отправить">. Этой кнопке не надо присваивать никакого имени (не прописывайте ей атрибут name вообще - это ВАЖНО!!!).
6. "Повесьте" на эту кнопку на событие onclick вызов функции GetServer (), которая будет осуществлять связь с сервером. Вот так <input type="button" value="Отправить" onclick=="GetServer (this.form)">
7. Где-нибудь на странице (в том числе можно и между тегами <form> и </form>) создайте некое "место" для вывода сообщения сервера об успешном изменении БД (или о неудаче). Обязательно дайте этому "месту" уникальный валидный id. Кроме того, желательно дать этому "месту" изначально какие-то размеры, чтобы потом текущая страница не "прыгала", когда в этом месте появится текст. Например, так: <div id="inform" style="width: 120px; height: 40px"></div>. Разумеется, можете стилями заранее предусмотреть нужные вам параметры шрифта для этого сообщения (размер, цвет, жирность и т. д.)
Пример HTML-кода файла index.html:
<form>
<input name="inpt1"> <!-- name="name" пишут только кретины, см. примечание -->
<input name="inpt2">
<textarea name="txtr1"></textarea>
<textarea name="txtr2"></textarea>
<select name="slct1"></select>
<select name="slct2"></select>
...
<input type="button" value="Отправить" onclick=="GetServer (this.form)">
</form>
...
<div id="inform" style="width: 120px; height: 40px"></div>
...
<script>
function GetServer (x)
{
//перебираем все элементы формы
for (var rez = [], j = k = 0, elm = x.elements, ln = elm.length; j < ln; j++)
//создаём массив пар "имя=значение" для поименованных элементов формы
if (elm [j].name) rez [k+] = elm [j].name + '=' + encodeURIComponent (elm [j].value);
//кнопка "Отправить", как не имеющая атрибута NAME, в этот массив не входит
//создаём объект HttpRequest
if (navigator.appName == 'Microsoft Internet Explorer') htReq = new ActiveXObject ('Microsoft.XMLHTTP');
else htReq = new XMLHttpRequest ();
//Отсылаем данные серверу, преобразовав массив в строку, разделённую амперсандами
htReq.open ('get', 'submit.php?' + rez.join ('&'));
//Назначаем функцию AnswerServer "ответственной" за отображение ответа сервера на текущей странице
htReq.onreadystatechange = AnswerServer;
htReq.send (null);
}
//Отображаем ответ сервера в заранее подготовленное место
function AnswerServer ()
{if (htReq.readyState == 4) document.getElementById ('inform').innerHTML = htReq.responseText}
</script>
| Примечание - см. http://www.softtime.ru/forum/read.php?id_forum=4&id_theme=82674, ВЫВОД в шестом сверху сообщении.
8. Файл submit.php НЕ ДОЛЖЕН иметь никаких инструкций для or die.
Файл этот должен заканчиваться заголовком и выводом результата:
header ("Content-type: text/plain; charset=utf-8");
print $result;
| Переменная $result к моменту вывода должна иметь одно из всего двух возможных значений:
"База даних успішно оновлено" либо "Відбулася критична помилка" | |
|
|
|
|
|
|
|
для: АЯС
(13.10.2011 в 23:00)
| | Спасибо за такой подробный ответ | |
|
|
|