在純JavaScript結構中，這等效於什么？ 這會將值發送到服務器端

Question

該腳本旨在從輸入中獲取值，並通過ajax將其作為POST數據發送到x.php，以供x.php回顯。 這工作完美，但我想轉換

將此jQuery結構轉換為純JavaScript結構，換句話說，我如何通過AJAX將基本的JS對象內容作為POST數據發送給x.php進行回顯

jQuery結構（作品*）

index.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $('#send').click(function(){
//Var structure
var first_name= $('#first_name').val();
var last_name= $('#last_name').val();

//Data var
var data={
      first_name: first_name,
      last_name: last_name
}


//Success var
var success= function(response){
   $('.output-container').html(response);
}

//Request
    $.ajax({
      data: data,
      method: 'POST',
      url: 'x',
      success: success
    });
  });
});

</script>

<input id='first_name' type='text' value='John'>
<input id='last_name' type='text' value='Doe'>

<button id='send'>Send</button>

<div class='output-container'><div>

JavaScript結構（嘗試失敗*）

index.php

<script>
document.addEventListener('DOMContentLoaded', function(){

var execute_sendAjax = document.getElementById('send');
  execute_sendAjax.addEventListener("click", executeAjax);

var xhr= new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        document.getElementsByClassName('output-container')[0].innerHTML= xhr.responseText;
    }
};

function executeAjax(){

  //Var structrue
  var first_name=  document.getElementById('first_name').value;
  var last_name=  document.getElementById('last_name').value;

//Data var
var data={
  first_name: first_name,
  last_name: last_name
}

    xhr.open('POST','x');
    xhr.send();
}
});
</script>

<input id='first_name' type='text' value='John'>
<input id='last_name' type='text' value='Doe'>

<button id='send'>Send</button>

<div class='output-container'><div>

x.php

<?php

$first_name=$_POST['first_name'];
$last_name=$_POST['last_name'];

?>

<h1><?php echo $first_name; ?></h1>
</h1><?php echo $last_name; ?></h1>

在純JS結構中，我不知道從那里去哪里就是我被困在哪里。

最新發現已更新*

經過更多研究（ 鏈接 ）后，我發現application / x-www-form-urlencoded是編碼為POST數據的另一種方法，但是我不得不避免使用JS對象，因為它不適用於普通JS對象。 我仍在尋找一種可以用作JS對象的方法。

<script>
document.addEventListener('DOMContentLoaded', function(){

var execute_sendAjax = document.getElementById('send');
  execute_sendAjax.addEventListener("click", executeAjax);

var xhr= new XMLHttpRequest();
xhr.onreadystatechange = function(){

    if(xhr.readyState === 4){
        document.getElementsByClassName('output-container')[0].innerHTML= xhr.responseText;
    }
};

function executeAjax(){

  //Var structrue
  var first_name=  document.getElementById('first_name').value;
  var last_name=  document.getElementById('last_name').value;

//Data var
var data = "first_name="+first_name+"&last_name="+last_name;

/*var data={
  first_name: first_name,
  last_name: last_name
}*/

    xhr.open('POST','x');
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //<--I notice this makes it encoded to be used as POST data
    xhr.send(data);
}
});
</script>

<input id='first_name' type='text' value='John'>
<input id='last_name' type='text' value='Doe'>

<button id='send'>Send</button>

<div class='output-container'><div>

Answer 1

jQuery將Javascript對象編組為表單數據。 有很多方法可以做到這一點，但我認為最簡單的方法是使用FormData對象，如下所示：

function executeAjax(){
    var data = new FormData();
    // FormData.append(name, value) - appends a new value onto an 
    //  existing key inside a FormData object, or adds the key if 
    //  it does not already exist.
    data.append("first_name", document.getElementById('first_name').value;);
    data.append("last_name", document.getElementById('last_name').value;


    xhr.open('POST','x.php');
    xhr.send(data);
}

然后，您無需編輯任何PHP或在請求標頭中設置content-type。

如果您不喜歡FormData對象（無論出於何種原因）：

function executeAjax(data) {
    var data = [
        "first_name="+encodeURIComponent(document.getElementById('first_name').value),
        "last_name="+encodeURIComponent(document.getElementById('last_name').value)
    ].join('&').replace(/%20/g, '+');

    xhr.open('POST', 'x.php');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(data);
}

在這里了解更多。

抱歉，以前不在電腦前。