Передача данных серверу с перезагрузкой - JavaScript, Ajax

dimorik · 14.10.2013, 19:55

У меня такой вопрос:
На странице имеется форма с полями, необходимо передать все её данные PHP-скрипту POST-ом. Проблема в том, что наряду с обычными полями для ввода текста нужно ещё передать небольшой (максимум 20 элементов) сформированный массив Javascript. Для передачи массива нашел решение на AJAX, массив передается нормально. Но мне необходимо при передаче перезагружать страницу, а так же переслать и другие данные кроме массива за один раз. Попой чую, что есть простое решение, но накопать так и не удалось. Желательна реализация без использования каких-либо сторонних библиотек. Вариант со скрытыми полями рассматривал, но что-то он мне показался уж очень кривым. Подскажите люди добрые!

Приведу свой код передачи массива, может кому пригодится:

Код HTML:

<!DOCTYPE HTML>
<html>
<head>
	<meta charset = "utf-8" />
	<title>Передача массива</title>
	<script type="text/javascript" src="query_query.js"></script>
	
<script type="text/javascript">
<!--
var mass = new Array();
mass[0]="Текст 1";
mass[1]="Текст 2";
mass[2]="Текст 3";
mass[3]="Текст 4";
mass[4]="Текст 5";
mass[5]="Текст 6";
mass[6]="Текст 7";
mass[7]="Текст 8";
mass[8]="Текст 9";
mass[9]="Текст 10";
mass[10]="Текст 11";
mass[11]="Текст 12";
mass[12]="Текст 13";
mass[13]="Текст 14";
mass[14]="Текст 15";
// и.т.д...
//-->
</script>
<script type="text/javascript">
	//тут мы создаём объект в зависимости от браузера
	function createRequestObject() {
	  if (typeof XMLHttpRequest === 'undefined') {
	    XMLHttpRequest = function() {
	      try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
	        catch(e) {}
	      try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
	        catch(e) {}
	      try { return new ActiveXObject("Msxml2.XMLHTTP"); }
	        catch(e) {}
	      try { return new ActiveXObject("Microsoft.XMLHTTP"); }
	        catch(e) {}
	      throw new Error("This browser does not support XMLHttpRequest.");
	    };
	  }
	  return new XMLHttpRequest();
	}
	 
	function vote()
	{var dat='mass='+JSON.stringify(mass);
	
	//эта функция сработает при клике на кнопку.
	    req =new XMLHttpRequest(); //new обязательно -иначе в ие и хроме не пашет
	    if (req) {      
	        req.open("POST", 'ind2.php', true); //скрипт к которому обращаемся
	    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // заголовок в посте это обязательный атрибут
	        req.onreadystatechange = processReqChange; // обработчик приёма ответа
			
	        req.send(dat); // значения
			
	    }
	}
	 
	function processReqChange()
	{
	var statusElem = document.getElementById('vote_status')
	  try {
	    if (req.readyState == 4) {
	        // для статуса "OK"
	        if (req.status == 200) {
	            statusElem.innerHTML = req.responseText;
	        } else {
	            alert("Не удалось получить данные:\n" +
	                req.statusText);
	        }
	    }
	  }
	  catch( e ) {
	  }
	}
	  </script>
</head>

<body>

<input value="Отправить массив!" onclick="vote()" type="button" />
<div id="vote_status">Здесь будет ответ сервера</div>

</body>
</html>

Серверный скрипт:

PHP код:


			
<?php



if (isset($_POST['mass'])) {

            $php_json = json_decode($_POST['mass'], TRUE);

        for($i=0; $i<count($php_json); $i++){echo $php_json[$i]."<br>";}

       

        }

?>

alextrof94 · 14.10.2013, 22:10

А зачем всю страницу перезагружать? Выводи ответ сервера в специальный див без перезагрузки.

dimorik · 15.10.2013, 07:51

Ну в принципе да, у меня будет выводиться таблица из БД, её можно обновить и без перезагрузки. Тогда как приспособить вышеуказанный код для передачи, вместе с массивом, остальных полей? Или, скажем, для передачи двух разных массивов?

Fenex · 15.10.2013, 18:14

Цитата:

Желательна реализация без использования каких-либо сторонних библиотек.

Писать велосипеды - это конечно прикольно, и даже полезно, но всё же чаще всего гораздо лучше использовать уже написанные кем-либо фичи. С ними удобнее, и они не все большие и тяжёлые, как может показаться.

Заходим на http://microjs.com/ , указываем в поиске "ajax" и выдаётся список кучи интересных вещей. Среди них вам вполне сгодится qwest. Там есть подробные примеры.

dimorik · 17.10.2013, 16:42

Цитата:

Сообщение от Fenex

Писать велосипеды - это конечно прикольно, и даже полезно, но всё же чаще всего гораздо лучше использовать уже написанные кем-либо фичи. С ними удобнее, и они не все большие и тяжёлые, как может показаться.

Согласен. Интересен был сам принцип.

Цитата:

Заходим на http://microjs.com/ , указываем в поиске "ajax" и выдаётся список кучи интересных вещей. Среди них вам вполне сгодится qwest. Там есть подробные примеры.

Официальная документация имеется, наверное, к любой продвинутой библиотеке. Просто форум - это, я считаю, нечто большее, чем просто средство обмена ссылками. Я ожидал найти ответ именно здесь.
Всем спасибо, решение оказалось не таким сложным как казалось в начале.

14.10.2013, 22:10	#2
alextrof94 Форумчанин Регистрация: 16.03.2013 Сообщений: 599	А зачем всю страницу перезагружать? Выводи ответ сервера в специальный див без перезагрузки. alextrof94$gmail.com

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Передача файла от Клиента к Серверу	aank10	C++ Builder	2	05.10.2012 18:02
Передача параметров серверу в idHTTP	C_R_E_S_C_H	Работа с сетью в Delphi	4	06.05.2012 16:58
Передача файла от клиента к серверу TFileStream	rombler69	Работа с сетью в Delphi	1	30.03.2010 17:45
IdHTTPServed delphi передача файла серверу	postal2	Работа с сетью в Delphi	4	29.01.2010 13:54
Передача команд серверу и клиенту	OrdJONY	Работа с сетью в Delphi	9	28.08.2007 10:51

15.10.2013, 07:51	#3
dimorik Пользователь Регистрация: 23.08.2008 Сообщений: 51	Ну в принципе да, у меня будет выводиться таблица из БД, её можно обновить и без перезагрузки. Тогда как приспособить вышеуказанный код для передачи, вместе с массивом, остальных полей? Или, скажем, для передачи двух разных массивов?