web-dev-qa-db-ja.com

AJAX Pure Javascriptでの実装後

AJAX Pure Javascriptでの投稿（おそらくxmlhttprequestを使用）の実装はありますか？

たとえば、次のようなフォームがある場合：

<form action="request.php" id="register_form">
  <input type="text" name="first_name" placeholder="First Name">
  <input type="text" name="last_name" placeholder="LastName">
  <input type="submit" value="submit_now">
</form>

これは、jQueryのAJAXの私の実装です

$('#register_form').submit(function(e) {

var postData = $(this).serializeArray();
var formURL = $(this).attr("action");

/* start ajax submission process */
$.ajax({
    url: formURL,
    type: "POST",
    data: postData,
    success: function(data, textStatus, jqXHR) {
        alert('Success!');
    },
    error: function(jqXHR, textStatus, errorThrown) {
        alert('Error occurred!');
    }

});

e.preventDefault(); //STOP default action

/* ends ajax submission process */

});

同じことを行うことができます[〜＃〜] without [〜＃〜] jQueryの使用可能であれば、how上記のjQueryコードをpure/plain JavaScriptコードに実装できますか？

javascriptjqueryajaxxmlhttprequest
15
Fariz Luqman

はい、もちろん可能です:)

<form action="request.php" id="register_form">
  <input class='formVal' type="text" name="first_name" placeholder="First Name">
  <input class='formVal' type="text" name="last_name" placeholder="LastName">
  <input type="submit" value="submit_now" onclick="myFunction(); return false;">
</form>

[〜＃〜] js [〜＃〜]

function myFunction()
{
    var elements = document.getElementsByClassName("formVal");
    var formData = new FormData(); 
    for(var i=0; i<elements.length; i++)
    {
        formData.append(elements[i].name, elements[i].value);
    }
    var xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function()
        {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
            {
                alert(xmlHttp.responseText);
            }
        }
        xmlHttp.open("post", "server.php"); 
        xmlHttp.send(formData); 
}

server.php

<?php
   $firstName = $_POST["first_name"];
   $lastName = $_POST["last_name"];
   echo $firstName." ".$lastName;
   //enter name and lastname into your form and onclick they will be alerted 
?>

説明：関数は、クラス名ごとにフォーム要素を受け取り、配列に格納します。次に、FormDataオブジェクトを作成し、各要素の要素配列をループして、その名前と値をFormDataオブジェクトに追加します。その後、リクエスト中の状態とステータスの変化を監視し、server.phpにpostメソッドでデータを送信するXMLHttpRequest（）オブジェクトを作成します。 server.phpからの応答。XMLHttpRequestオブジェクトのresponseText属性に保存します。

30
DDeme

確かに、 AjaxのみReqwest libを使用できます。

何かのようなもの：

reqwest({
    url: 'path/to/json'
  , type: 'json'
  , method: 'post'
  , error: function (err) { }
  , success: function (resp) {
      qwery('#content').html(resp.content)
    }
})

また、READMEに従って使用できます：

$(form).serialize()
1
Jonatas Walker