0

Добрый день! Пытаюсь освоить ajax без всяких jquery, т.е. чистый ajax работа с объектом XMLHttpRequest и т.п. Пытаюсь отослать данные вот таким образом

//Кроссбраузерное создание Ajax объекта
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;
    }

//Добавляем товар в корзину
function productAddToBasket(Action,ProductID,Quantity,AjaxBasket)
    {
        var CurrPagePath = window.location.pathname;    //Текущая страница
        var AjaxObject = getXmlHttp();  //Получаем объект XMLHttpRequest

        //Настройка обработчика
        AjaxObject.onreadystatechange = function() 
            {
                alert("Товар добавлен в корзину!");
            }

        //Открываем соединение
        AjaxObject.open('POST', CurrPagePath, true);

        //Отправляем данные
        var Data = "action="+Action+"&id="+ProductID+"&quantity="+Quantity+"&ajax_basket="+AjaxBasket+"";
        AjaxObject.send(Data);
    }

Вызов функции productAddToBasket осуществляю вот так (это в теле шаблона):

 <span onClick="productAddToBasket('ADD2BASKET',<?=$Item['ID']; ?>,1,'Y')" >
      Купить
</span>

Данные та уходят но вот так http://joxi.ru/SsrTU4wyTJCsLtlN7d8 т.е. как одна строка, а хотелось быть вот так http://joxi.ru/ccrTU_3JTJAtGic2x9c т.е. Параметр->Значение. Вот я и не пойму как мне сформировать переменную Data которую я посылаю тут AjaxObject.send(Data); чтобы данные ушли правильно? Да и ещё момент, функция productAddToBasket() после вызова через onClick не останавливается, а надо было бы чтобы она отрабатывала правильно, 1 клик - 1 вызов.

Заранее спасибо!

7
  • 1
    а вы не путаете POST c GET-ом? Commented 26 июл. 2014 в 17:35
  • 1
    А в чём причина неиспользования jQuery? Тут явно не саморазвитие, а конкретная задача. Не лучше ли её сделать инструментами которые легко поддерживать, а не велосипедостроением заниматься?
    – dlarchikov
    Commented 27 июл. 2014 в 10:52
  • @dimka3210, судя по коду - человеку еще многое нужно покурить перед тем как "иметь полное право" использовать что-то типа jQuery, хотя - да, согласен, если это "рабочая задача" - решать ее таким способом неоправданно глупо. По поводу непосредственно кода - на вскидку, как минимум, отсутствует хедер (xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");)
    – user3545
    Commented 28 июл. 2014 в 8:30
  • 1
    @AlexWindHope да какой смысл, вот вы на калькуляторе бк программировали ? в смысле придумывали программы и кодили их ? как вам утверждение, что пользоваться полнотекстовым экраном всем кто не прогал пару лет на калькуляторе ещё рано ? Если нормально подходить к вопросу то и jquery и др библиотеки как раз приучают к правильным решениям. Пара лет вот такого быдлокодинга на "чистом" js и мы получим очередное чудовище с совершенно невообразимыми паттернами в голове. А пара лет с фреймворком дает понимание не только как его юзать, но и как он работает.
    – zb'
    Commented 28 июл. 2014 в 9:26
  • @eicto - у меня нет желания с Вами спорить в этом вопросе. И, если что - я не считаю что такие вещи как ajax нужно обязательно щупать своими руками, тем не менее я убеждет в том, что это было-бы, по меньшей мере - полезно. Но, в общем случае - достаточно просто один раз внимательно прочитать и понять че к чему, не более того. А вот насчет "дает понимание" - тоже, скажем так, как минимум не всегда правда (я о "jQuery программистах"). Хотя да, отчасти и вы правы, но речь была немного не об этом
    – user3545
    Commented 28 июл. 2014 в 11:26

2 ответа 2

1

а вы делайте разбор параметров

$params = array();
parse_str($_POST, $params);
0

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

Вот Код: (не пинайте больно, написал буквально за не сколько минут)

это типовая функция

      /* Данная функция создаёт кроссбраузерный объект XMLHTTP */   
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;
}

А это сама функция которая отсылает POST на сервер

function sendingForm (formname) {
  var xmlhttp = getXmlHttp(); // Создаём объект XMLHTTP
          var p = 'ajax=1';
    for(var i=0;i<document.forms[formname].elements.length;i++){ 
     p += "&"+document.forms[formname].elements[i].name+"="+encodeURIComponent(document.forms[formname].elements[i].value) ;//присваиваем значение 
          }
 alert( p ) ; // проверяем что отправляем

  xmlhttp.open('POST', 'ajax/', true); // Открываем асинхронное соединение
  xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // Отправляем кодировку
  xmlhttp.send(p); // Отправляем POST-запрос
  xmlhttp.onreadystatechange = function() { // Ждём ответа от сервера
    if (xmlhttp.readyState == 4) { // Ответ пришёл
      if(xmlhttp.status == 200) { // Сервер вернул код 200 
        alert( 'Ответ получен, Значит данные отправлены успешно !' ) ; // проверяем что отправляем
       /*
        Место для кода обработчика событий
       */
       }
      }
    } ;
 }

Вот собственно эту форму мы и отправляем:

<form name="panelcontent" method="POST" id="panelcontent">
   <input type="text" id="id1" name="name1" />
   <input type="text" id="id1" name="name2" />
  <div class="fieldInput">
  <button type="button" class="blue-pill" id="panelContentButton" onClick="sendingForm ('panelcontent')">Сохранить</button>
 </div> 
</form>

Как-то так, файл для js желательно сохранять в кодировке UTF-8

4
  • о каком чистом коде идет речь ? что такое по вашему document.getElementByClassName() ? Точнее сколько тут символов is спецификации js ? А спецификация w3c на самом деле описывает интерфейсы к браузеру, не обязательно javascript.
    – zb'
    Commented 2 сент. 2014 в 16:44
  • Ну DOM-метод это не внешняя библиотека в конце концов, да и собственно я ответил по существу на заданный вопрос.
    – Vas
    Commented 2 сент. 2014 в 17:01
  • DOM это внешняя библиотека относительно js, если например jQuery реализовать нативно, вы сразу поменяете свое мнение ? (минус убрал, т.к. тут хотя-бы ответ теперь есть)
    – zb'
    Commented 3 сент. 2014 в 2:32
  • Ага спасибо! Буду пробовать.
    – maler1988
    Commented 3 сент. 2014 в 5:45

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.