web-dev-qa-db-ja.com

HTMLフォームを送信するXMLHttpRequest

現在の設定

そのような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の使用方法を知っています。私が抱えている問題は、JavaScriptでHTMLからデータを取得して、ポストリクエスト文字列に入れることです。以下は、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に追加するにはどうすればよいですか？

[〜＃〜] edit [〜＃〜]

以下の回答からソリューションを実装しようとすると、フォームをそのように変更しました。

_<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;
                            });
_
javascriptajaxxmlhttprequestformshttp-post
17
StuStirling

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);
_
25
ComFreek

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"), true);
  xhr.send (new FormData (oFormElement));
  return false;
}
</script>
</head>

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

このスニペットは基本的なものであり、GETを使用できません。素晴らしい Mozillaドキュメント に触発されました。より多くのことを行うには、このMDNドキュメントをより深く読んでください。こちらもご覧ください formActionを使用して回答 。

13
olibre

ところで、私は次のコードを使用してajaxリクエストでフォームを送信しました。

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

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

    // let's 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();
});
2
Awais Qarni

純粋なJavascriptでは、次のようなものが必要です。

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

次のようなキーと値のペアを持つdataオブジェクトを作成したい

name=John&lastName=Smith&age=3

次に、request.send（ "name = John＆lastName = Smith＆age = 3"）;で送信します

0
Zlatko

私もこの問題を抱えていると思います。

ボタン付きの入力要素があります。ボタンのonclickメソッドは、XMLHTTPRequestを使用してPOST=サーバーへの要求、すべてJavaScriptでコーディングされています）。

入力とボタンをフォームにラップするとき、フォームのアクションプロパティが使用されました。ボタンはnottype=submitでした。これは私のHTML標準の読み方を形成します（ https://html.spec.whatwg.org /＃attributes-for-form-submission ）あるはずです。

しかし、form.onsubmitメソッドを次のようにオーバーライドすることで解決しました。

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

FireFox Developer EditionとChromium 38.0.2125.111 Ubuntu 14.04（290379）（64ビット）を使用していました。

0
Worik