Fatal编程技术网
  • javascript/
  • 在纯JavaScript结构中，这与什么是等价的？这会将值发送到服务器端

在纯JavaScript结构中，这与什么是等价的？这会将值发送到服务器端

javascript jquery ajax

在纯JavaScript结构中，这与什么是等价的？这会将值发送到服务器端,javascript,jquery,ajax,Javascript,Jquery,Ajax,此脚本旨在从输入中获取值，并通过ajax将其作为POST数据发送到x.php，以供x.php回送。这是完美的作品，但我想转换 这个jQuery结构是一个纯JavaScript结构，因此换句话说，我如何通过AJAX将基本JS对象内容作为POST数据发送给x.php jQuery结构（works*） index.php <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></s

此脚本旨在从输入中获取值，并通过ajax将其作为POST数据发送到x.php，以供x.php回送。这是完美的作品，但我想转换

这个jQuery结构是一个纯JavaScript结构，因此换句话说，我如何通过AJAX将基本JS对象内容作为POST数据发送给x.php

jQuery结构（works*）

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>

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

<?php

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

?>

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


$（文档）.ready（函数（）{
$（“#发送”）。单击（函数（）{
//Var结构
var first_name=$（'#first_name'）.val（）；
var last_name=$（'#last_name'）.val（）；
//数据变量
var数据={
名字：名字，
姓氏：姓氏
}
//成功变量
var成功=功能（响应）{
$（'.output container'）.html（响应）；
}
//请求
$.ajax({
数据：数据，
方法：“POST”，
url:'x'，
成功：成功
});
});
});
发送
JavaScript结构（尝试失败*）

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>

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

<?php

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

?>

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


document.addEventListener（'DOMContentLoaded'，function（）{
var execute_sendAjax=document.getElementById（'send'）；
执行_sendAjax.addEventListener（“单击”，executeAjax）；
var xhr=new XMLHttpRequest（）；
xhr.onreadystatechange=函数（）{
if（xhr.readyState==4）{
document.getElementsByClassName（'output-container'）[0].innerHTML=xhr.responseText；
}
};
函数executeAjax（）{
//结构变量
var first\u name=document.getElementById（'first\u name'）。值；
var last_name=document.getElementById（'last_name'）。值；
//数据变量
var数据={
名字：名字，
姓氏：姓氏
}
xhr.open（'POST'，'x'）；
xhr.send（）；
}
});
发送
x.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>

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

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


document.addEventListener（'DOMContentLoaded'，function（）{
var execute_sendAjax=document.getElementById（'send'）；
执行_sendAjax.addEventListener（“单击”，executeAjax）；
var xhr=new XMLHttpRequest（）；
xhr.onreadystatechange=函数（）{
if（xhr.readyState==4）{
document.getElementsByClassName（'output-container'）[0].innerHTML=xhr.responseText；
}
};
函数executeAjax（）{
//结构变量
var first\u name=document.getElementById（'first\u name'）。值；
var last_name=document.getElementById（'last_name'）。值；
//数据变量
var data=“first_name=“+first_name+”&last_name=“+last_name；
/*var数据={
名字：名字，
姓氏：姓氏
}*/
xhr.open（'POST'，'x'）；

xhr.setRequestHeader（“Content type”，“application/x-www-form-urlencoded”）；//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或在请求头中设置内容类型

如果您不喜欢
FormData
对象（无论出于何种原因）：

了解更多


抱歉，以前不在计算机上。
您没有将数据传递到服务器。它应该是xhr.send（数据）；我将该数据变量添加到xhr.send（数据）；如您所指示，但x.php根本无法获取值，因此它会导致x.php输出这些错误…未定义的索引：first_name…未定义的索引：last_name…还需要是xhr.open（'POST'，'x.php'）；相同的结果：。。（您是否尝试过查看浏览器的开发工具以查看请求和响应是什么样子的？谢谢@Popmedic这将是我在以后的另一篇文章中要问的下一个问题，因为我知道如何使用formData（）在jQuery中实现这一点，您刚刚向我展示了如何使用formData（）在JS中，我感谢你对未来帖子的回答。我刚刚更新了我的新发现，换句话说，我发现你也可以使用“内容类型”、“应用程序/x-www-form-urlencoded”编码到一个帖子结构中。但我仍在寻找一种方法，如何使用一个普通的JS对象来实现这一点。遗憾的是，没有解决方法来实现这一点：（但我感觉我越来越接近了，我不太明白，“普通JS对象”是什么意思？您必须以某种方式将其封送…无论是作为JSON编码中的字符串还是作为FormData编码，但它必须被封送…就像我说的，JQuery正在将它作为FormData为您封送。因此，它正在将其转换为表单数据，但HTTP POST请求需要将其封送到它可以发送的内容，它无法发送原始Javascript最接近的应该是JSON，但是您必须在PHP端读取它，它不在$u POST变量中。您确实意识到Ajax请求是通过HTTP发送数据的，而HTTP不是Javascript，因此您必须封送（编码）它适合超文本传输协议。一种方法是将其编码为HTTP定义的称为表单数据的编码，就像JQuery所做的那样。在PHP端，它将为您将封面下的表单数据解组（解码）到$\u POST VAR中。