纯JavaScript中的AJAX Post实现

Question

在纯Javascript中是否有任何AJAX Post的实现(可能使用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 */

});

我可以不使用jQuery 做同样的事情吗？如果可能,我如何将上述jQuery代码实现为纯/纯Javascript代码？

Answer 1

是的,当然有可能:)

<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 
?>

Explanation: Function通过类名获取表单元素,并将它们存储在数组中.然后我们创建FormData对象并遍历每个元素的elements数组,并将它们的名称和值附加到FormData对象.之后我们创建XMLHttpRequest()对象,在请求期间监视状态和状态更改,并使用post方法将数据发送到server.php当它结束并且readystate等于4且status等于200时,我们警告来自server.php的响应,我们保存在XMLHttpRequest对象的responseText属性中.