問(wèn)題描述

在純 Javascript 中是否有任何 AJAX Post 實(shí)現(xiàn)(可能使用 xmlhttprequest)?

is there any implementation of AJAX Post in Pure Javascript (maybe using xmlhttprequest)?

例如，如果我有這樣的表格:

For example if I have a form like this:

<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 實(shí)現(xiàn)

and this is my implementation of the AJAX in jQuery

$('#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 代碼實(shí)現(xiàn)為純/純 Javascript 代碼?

Can I do the same WITHOUT the use of jQuery? If it is possible, how can I implement the above jQuery code into pure/plain Javascript code?

推薦答案

是的，當(dāng)然這是可能的:)

Yes and of course that's possible :)

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

解釋:函數(shù)通過(guò)類名獲取表單元素并將它們存儲(chǔ)在數(shù)組中.然后我們創(chuàng)建 FormData 對(duì)象并循環(huán)遍歷每個(gè)元素的元素?cái)?shù)組，并將它們的名稱和值附加到 FormData 對(duì)象.之后，我們創(chuàng)建 XMLHttpRequest() 對(duì)象來(lái)監(jiān)控請(qǐng)求期間的狀態(tài)和狀態(tài)變化，并使用 post 方法將數(shù)據(jù)發(fā)送到 server.php當(dāng)它結(jié)束并且readystate等于4并且status等于200時(shí)，我們警告來(lái)自server.php的響應(yīng)，我們保存在XMLHttpRequest對(duì)象的responseText屬性中.

Explanation: Function takes form elements by their class names and stores them in array. Then we create FormData object and loop through elements array for each element and append their name and value to FormData object. After that we create XMLHttpRequest() object that monitors state and status change during request and also sends data with post method to server.php When it's over and readystate equals to 4 and status equals to 200, we alert response from server.php, that we save in responseText attribute of XMLHttpRequest object.

這篇關(guān)于純 Javascript 中的 AJAX 后期實(shí)現(xiàn)的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！