纯Javascript中的AJAX后期实现[重复]

小编典典

纯Javascript中的AJAX后期实现[重复]

ajax

在纯Javascript中有AAAX 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代码实现为纯Java代码？

阅读 199

2020-07-26

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

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对象，并遍历每个元素的elements数组，并将其名称和值附加到FormData对象。之后，我们创建XMLHttpRequest（）对象，该对象监视请求期间的状态和状态变化，并使用
post
方法将数据发送到server.php。当结束时，readystate等于4并且status等于200，我们将发出来自server.php的响应警报，我们保存在XMLHttpRequest对象的responseText属性中。

2020-07-26