在纯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);
}

在这里了解更多。

抱歉，以前不在电脑前。