XMLHttpRequest для отправки HTML-формы

Текущая настройка

У меня есть форма HTML, как это.

<form id="demo-form" action="POST" method="post-handler.php">
   <input type="text" name="name" value="previousValue"/>
   <button type="submit" name="action" value="dosomething">Update</button>
</form>

У меня может быть много таких форм на странице.

Мой вопрос

Как я могу отправить эту форму асинхронно и не перенаправить или обновить страницу? Я знаю, как использовать XMLHttpRequest. У меня есть проблема получения данных из HTML в javascript, чтобы затем поместить в строку запроса поста. Вот метод, который я в настоящее время использую для моих zXMLHttpRequest.

function getHttpRequest() {
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    return xmlhttp;
}

function demoRequest() {
       var request = getHttpRequest();
       request.onreadystatechange=function() {
             if (request.readyState == 4 && request.status == 200) {
                   console.log("Response Received");
             }
       }
       request.open("POST","post-handler.php",true);
       request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
       request.send("action=dosomething");
}

Например, если при нажатии кнопки отправки формы был вызван метод javascript demoRequest(), как мне получить доступ к значениям формы из этого метода, чтобы затем добавить его в XMLHttpRequest?

РЕДАКТИРОВАТЬ

Пытаясь реализовать решение из ответа ниже, я изменил свою форму следующим образом.

<form id="demo-form">
       <input type="text" name="name" value="previousValue"/>
       <button type="submit" name="action" value="dosomething" onClick="demoRequest()">Update</button>
</form>

Тем не менее, при нажатии на кнопку, он все еще пытается перенаправить меня (туда, где я не уверен), и мой метод не вызывается?

Слушатель событий кнопки

document.getElementById('updateBtn').addEventListener('click', function (evt) {
                                evt.preventDefault();

                                // Do something
                                updateProperties();

                                return false;
                            });

Ответ 1

Формат строки POST выглядит следующим образом:

name=value&name2=value2&name3=value3

Таким образом, вы должны захватить все имена, их ценности и поместить их в этот формат. Вы можете либо перебрать все входные элементы, либо получить конкретные, вызвав document.getElementById().

Внимание: вы должны использовать encodeURIComponent() для всех имен и особенно для значений, чтобы возможный &, содержащийся в строках, не нарушал формат.

Пример:

var input = document.getElementById("my-input-id");
var inputData = encodeURIComponent(input.value);

request.send("action=dosomething&" + input.name + "=" + inputData);

Еще один более простой вариант - использовать объекты FormData. Такой объект может содержать пары имен и значений.

К счастью, мы можем построить объект FormData из существующей формы, и мы можем отправить его непосредственно методу XMLHttpRequest send():

var formData = new FormData( document.getElementById("my-form-id") );
xhr.send(formData);

Ответ 2

ComFreek ответ правильный, но полный пример отсутствует.

Поэтому я написал чрезвычайно упрощенный рабочий фрагмент:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>

<script>
"use strict";
function submitForm(oFormElement)
{
  var xhr = new XMLHttpRequest();
  xhr.onload = function(){ alert(xhr.responseText); }
  xhr.open(oFormElement.method, oFormElement.getAttribute("action"));
  xhr.send(new FormData(oFormElement));
  return false;
}
</script>
</head>

<body>
<form method="POST"
      action="post-handler.php"
      onsubmit="return submitForm(this);" >
   <input type="text"   value="previousValue" name="name"/>
   <input type="submit" value="Update"/>
</form>
</body>
</html>

Этот фрагмент является базовым и не может использовать GET. Меня вдохновила превосходная документация Mozilla. Более подробно прочитайте эту документацию MDN, чтобы сделать больше. Смотрите также этот ответ, используя formAction.

Ответ 3

Кстати, я использовал следующий код для отправки формы в ajax-запросе.

 $('form[id=demo-form]').submit(function (event) {

    if (request) {
        request.abort();
    }
    // setup some local variables
    var $form = $(this);

    // let select and cache all the fields
    var $inputs = $form.find("input, select, button, textarea");


    // serialize the data in the form
    var serializedData = $form.serialize();


    // fire off the request to specific url

    var request = $.ajax({
        url : "URL TO POST FORM",
        type: "post",
        data: serializedData
    });
    // callback handler that will be called on success
    request.done(function (response, textStatus, jqXHR){


    });

    // callback handler that will be called on failure
    request.fail(function (jqXHR, textStatus, errorThrown){

    });

    // callback handler that will be called regardless
    // if the request failed or succeeded
    request.always(function () {
        // reenable the inputs

    });

    // prevent default posting of form
    event.preventDefault();
});

Ответ 4

С чистым Javascript вы просто хотите что-то вроде:

var val = document.getElementById("inputFieldID").value;

Вы хотите создать объект данных, который имеет пары ключ-значение, вроде как

name=John&lastName=Smith&age=3

Затем отправьте его с помощью request.send( "name = John & lastName = Smith & age = 3" );

Ответ 5

У меня тоже была эта проблема.

У меня есть элемент ввода с кнопкой. Метод onclick кнопки использует XMLHTTPRequest для отправки запроса на сервер, все закодированные в JavaScript.

Когда я завернул ввод и кнопку в форме, было использовано свойство action. Кнопка не была type=submit, которая формирует мое чтение стандарта HTML (https://html.spec.whatwg.org/#attributes-for-form-submission) должно быть.

Но я решил это, переопределив метод form.onsubmit следующим образом:

form.onsubmit = function(E){return false;}

Я использовал версию разработчика FireFox и chromium 38.0.2125.111 Ubuntu 14.04 (290379) (64-разрядная версия).

Ответ 6

function postt(){
    var http = new XMLHttpRequest();
    var y = document.getElementById("user").value;
    var z = document.getElementById("pass").value;
    var postdata= "username=y&password=z"; //Probably need the escape method for values here, like you did

    http.open("POST", "chat.php", true);

    //Send the proper header information along with the request
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", postdata.length);

    http.onreadystatechange = function() {//Call a function when the state changes.
        if(http.readyState == 4 && http.status == 200) {
            alert(http.responseText);
        }
    }
    http.send(postdata);
}

как я могу опубликовать значения y и z здесь из формы