为什么这个简单的JavaScript + Ajax + php代码不起作用？
[英]Why does this simple JavaScript+Ajax+php code not working?
问题描述
我是ajax的新手，我正尝试将html页面数据发送到php，而无需重新加载当前页面。 当我单击提交按钮时，它只是闪烁“正在处理...”
html文件
<!DOCTYPE html>
<head>
<script type="text/javascript">
function ajax_post(){
var hr = new XMLHttpRequest();
var url = "simple.php";
var fn = document.getElementById("first_name").value;
var ln = document.getElementById("last_name").value;
var vars = "firstname="+fn+"&lastname="+ln;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
hr.send(vars);
document.getElementById("status").innerHTML = "processing...";
}
</script>
</head>
<body>
First Name: <input id="first_name" name="first_name" type="text"> <br><br>
Last Name: <input id="last_name" name="last_name" type="text"> <br><br>
<input name="myBtn" type="submit" value="Submit Data" onclick="ajax_post();"> <br><br>
<div id="status"></div>
</body>
</html>`
php文件
<?php
echo 'Thank you '. $_POST['firstname'] . ' ' . $_POST['lastname'] . ', says the PHP file';
?>
编辑1
我在onreadystatechange中添加了警报消息。 它分别显示三个警报消息2、3、4。
alert(hr.readyState);
1 个解决方案
解决方案1
0 2017-04-12 08:32:01
我可以看到很多东西：
-
</script>的结束，该脚本的开头没有任何开头标记。 - 变量
vars未创建查询字符串，因为它缺少?。
因此，完整的更改将是：
<head>
<script type="text/javascript">
function ajax_post(){
var hr = new XMLHttpRequest();
var url = "simple.php";
var fn = document.getElementById("first_name").value;
var ln = document.getElementById("last_name").value;
var vars = "?firstname="+fn+"&lastname="+ln;
//----------^---put this at start.
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
hr.send(vars);
document.getElementById("status").innerHTML = "processing...";
}
</script>
</head>
或者，您可以将其发送为：
hr.send({ firstname:fn, lastname:ln });
为什么这个简单的JavaScript代码无法正常工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.