通过 XMLHttpRequest 从 JavaScript 向 PHP 发送数据
Posted
技术标签:
【中文标题】通过 XMLHttpRequest 从 JavaScript 向 PHP 发送数据【英文标题】：Sending data from JavaScript to PHP via XMLHttpRequest 【发布时间】：2017-08-23 05:49:30 【问题描述】：美好的一天。
我正在尝试将一段简单的数据从一个 php 文件 (manage.php) 发送到另一个 (view.php)。
我无法通过表单发送数据，我想通过 JS 脚本发送数据。这是我的尝试：
var read = function(id)
xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "view.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("id=" + id);
在 view.php 中，使用 $_POST["id"] 会导致错误，指出索引“id”未定义。
发送数据的正确方法是什么？谢谢。
【问题讨论】：
api.jquery.com/jquery.post 例如只使用 jquery，不要将 Xhhtp 和 ajax 混用，因为你想让生活变得困难。 @Breakermind 如果您需要做的只是发出 AJAX 请求，那么 jQuery 的开销会很大。 我不喜欢 ajax :) 但我知道它可以上传图片 我只在需要上传文件时使用 ajax 发送 【参考方案1】：您的输入不完整。所以我做了下面的完整示例，您可以遵循。我创建了一个名为 readid(id) 的函数，按照您的要求做同样的事情。然后我在需要时从 html 调用该函数。
<!doctype html>
<html lang="fr">
<head>
<meta charset="iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" charset="iso-8859-1">
function readid(id)
"use strict";
console.log("id=", id)
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "/cgi-bin/view.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function()
if (this.readyState === 4 || this.status === 200)
console.log(this.responseText); // echo from php
;
xmlhttp.send("id=" + id);
</script>
</head>
<body>
<p>This is a test</p>
<input type="button" name="Submit" value="Submit" id="formsubmit" onClick="readid(id)">
</body>
</html>
view.php
<?php
$logFile = "view.log";
$id = $_POST['id'];
file_put_contents($logFile, $id);
echo $id;
?>
【讨论】：
它工作了 var ajax = new XMLHttpRequest(); ajax.onload=成功； ajax.onerror = 失败； ajax.open("POST", "handle.php", true); ajax.setRequestHeader("内容类型", "application/x-www-form-urlencoded");让数据='name='+'zeeshan'; ajax.send(数据); function success() if(this.status===200) document.getElementById('demo').innerText = this.responseText; 功能失败（异常） document.getElementById('demo').innerText = exception; 【参考方案2】： <!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<form id="formoid" title="" method="post">
<div>
<label class="title">First Name</label>
<input type="text" id="name" name="name" >
</div>
<div>
<label class="title">Name</label>
<input type="text" id="name2" name="name2" >
</div>
<div>
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</form>
<script type='text/javascript'>
/* attach a submit handler to the form */
$("#formoid").submit(function(event)
/* stop form from submitting normally */
event.preventDefault();
$.ajax(
type: 'POST',
data: id,
url: 'PATH_TO_VIEW.PHP',
success: function(data)
//do something
,
error: function(data)
console.log('Something went wrong.');
);
);
</script>
</body>
</html>
现在可以收集大量 ajax 中的数据，例如serialized 和 new FormData(form) 快速命名两个。
【讨论】：
这使用了与XMLHttpRequest有关的问题无关的jQuery。以上是关于通过 XMLHttpRequest 从 JavaScript 向 PHP 发送数据的主要内容，如果未能解决你的问题，请参考以下文章
通过 XMLHttpRequest 从 JavaScript 向 PHP 发送数据
CORS 策略已阻止从源“null”访问 XMLHttpRequest：对预检请求的响应未通过访问控制 [重复]
CORS策略已阻止从源''访问'apiurl'处的XMLHttpRequest [重复]