效果演示
源码
test_Post_Json.html
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<script>
function sendData() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// json格式
var obj = { username: username, password: password };
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行的代码
xmlhttp = new XMLHttpRequest();
} else {
//IE6, IE5 浏览器执行的代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("POST", "test_Post_Json.php", true);
xmlhttp.setRequestHeader(
"Content-type",
"application/json"
);
// 设置传输格式为Json
xmlhttp.send(JSON.stringify(obj));
}
</script>
<body>
<p><b>在输入框中输入用户名和密码:</b></p>
<form>
用户名: <input type="text" name="username" id="username" />
<br />
密码:<input type="password" name="password" id="password" />
<br />
<button type="button" onclick="sendData()">提交</button>
</form>
<p>返回值: <span id="txtHint"></span></p>
</body>
</html>
test_Post_Json.php
<?php
// 后端接收JSON数据:
$inputData = file_get_contents("php://input");
// 将接收到的json数据转为方便调用的数组形式
$data = json_decode($inputData);
// 从数组中获取参数
$username = $data->username;
$password = $data->password;
$hint = file_put_contents("test.txt", $username . ":" . $password);
if ($hint > 0) {
$response = "写入成功!用户名:" . $username . ",密码:" . $password;
} else {
$response = "写入失败!";
}
//输出返回值
echo $response;