JQuery отправка формы

Тема в разделе "JavaScript", создана пользователем startus, 8 авг 2013.

Модераторы: ZiX
  1. startus

    startus Создатель

    Регистр.:
    7 окт 2011
    Сообщения:
    39
    Симпатии:
    5
    Удобная ф-ция оптравки формы аля POST методом JQuery.

    1) Подключаем JQuery: (лучше закачайте эти библиотеки на свой хост, ибо сайт случайно нашел с ними, желательно перед тегом </head>)

    Код:
    <script src="http://vibrolux.ru/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://vibrolux.ru/media/js/jquery.tools.min.js"></script>
    <script type="text/javascript" src="http://vibrolux.ru/media/js/jquery.form.js"></script>
    2) Сама функа: (где bystartus - id <div> блока, куда выводить ответ обработчика формы)

    Код:
    <script type="text/javascript">
     
     
        function SendForm(result_id,form_id,url) {
          jQuery.ajax({
            url:    url, //Адрес подгружаемой страницы
            type:    "POST", //Тип запроса
            dataType: "html", //Тип данных
            data: jQuery("#"+form_id).serialize(),
            success: function(response) { //Если все нормально
            document.getElementById("bystartus").innerHTML = response;
            },
              error: function(response) { //Если ошибка
              document.getElementById(result_id).innerHTML = "Ошибка отправки";
              }
            });
        }
     
    </script>
    3) Сама форма:

    Код:
    <form id="xzform" method="post" action="#">
          Ваше имя:<br /><input name="value1" type="text" size="40" value="" required><br />
          Ваш город:<br /><input name="value2" type="text" size="40" value="" required><br />
          <input type="image" src="send.png" value="Оставить отзыв" onclick="SendForm('result_div_id', 'xzform', 'obrabotchik.php');" >
      </form> 
    <div id="bystartus">Тут ответ обработчика</div>
    4) Сам обработчик: (РНР)

    Код:
    <?php
     
    // htmlspecialchars - анти xss
    $namez = htmlspecialchars($_POST["value1"]);
    $gorod = htmlspecialchars($_POST["value2"]);
     
    // Проверка на заполненность полей или против ламеров
    if (empty($namez)){ die('Заполните все поля!'); };
    if (empty($gorod)){ die('Заполните все поля!'); };
     
    // Выводим полученное
    echo $namez.' '.$gorod;
     
    /* Coded by Makovyak */
    ?>
    Надеюсь, может кому пригодится =)
     
  2. allseo

    allseo Создатель

    Регистр.:
    26 июн 2013
    Сообщения:
    38
    Симпатии:
    10
    Я в небольшом проекте, дабы не тянуть jQuery, делал сериализацию так:
    Код:
    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 parseForm(form){
     var mas1=form.getElementsByTagName('input');
     var mas2=form.getElementsByTagName('select');
     var mas3=new Array();
     for (var i=0;i<mas1.length;i++){
      mas3.push(mas1[i]);
     }
     for (var i=0;i<mas2.length;i++){
      mas3.push(mas2[i]);
     }
     return mas3;
    }
    function submitForm(form,link,result){
     var vars=parseForm(form);
     var xmlhttp=openScript(link);
     var post='';
     for (var i in vars){
      post+=vars[i].name+'='+encodeURIComponent(vars[i].value)+'&';
     }
     post=post.slice(0,post.length-1);
     xmlhttp.send(post);
     xmlhttp.onreadystatechange=function() {renderResponse(xmlhttp,result);};
    }
    function openScript(name){
     var xmlhttp=getXmlHttp();
     xmlhttp.open('POST',name,true);
     xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
     return xmlhttp;
    }
    function renderResponse(xmlhttp,elem) {
     if (xmlhttp.readyState == 4) {
      if(xmlhttp.status == 200) {
       elem.innerHTML=xmlhttp.responseText;
      } else {
       elem.innerHTML=xmlhttp.statusText;
      }
     }
    }
    Сурово и легковесно :)
     
  3. esche

    esche

    Регистр.:
    9 авг 2009
    Сообщения:
    360
    Симпатии:
    243
    ИМХО, слишком сурово.. Сейчас много где JQuery используется..
    Понятно, что в данном конкретном случае всё работает.. пока

    А потребуется текстовое поле добавить в форму.. или просто захотят "input в две строчки" - в коде разбираться.. Это хорошо, если сам помнишь. После двух-трёх потерянных дней в разборах "в чём же дело" из-за таких "экономий" получается, что нифига не сэкономил.

    * не призываю JQuery использовать.. но, возможно, сделать что-то чуть более универсальное.. или посмотреть в сторону других библиотек... в т.ч. для работы с ajax-ом (xajax в своё время использовал)

    p.s. минималистичный ya.ru тоже jquery тянет...