使用ajax和php发布到同一页面不起作用
我有一个表格,是用来张贴到同一页,但它没有做任何事情。我使用的ajax脚本和php与我在另一个页面中使用的相同,唯一的区别是这个页面有一个表单,但除此之外,一切都正常。但在此表单页面中,它不起作用。输出应显示在页面末尾;但是,我在控制台中没有收到任何错误。 html页面使用ajax和php发布到同一页面不起作用,php,ajax,forms,Php,Ajax,Forms,我有一个表格,是用来张贴到同一页,但它没有做任何事情。我使用的ajax脚本和php与我在另一个页面中使用的相同,唯一的区别是这个页面有一个表单,但除此之外,一切都正常。但在此表单页面中,它不起作用。输出应显示在页面末尾;但是,我在控制台中没有收到任何错误。 html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Contact Us</title>
<!-- Bootstrap -->
<link href="bootstrap.min.css" rel="stylesheet">
<!-- stylesheet for this form -->
<link href="contact-stylesheet.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
function validateForm()
{
var params = "name=jorge&email=jorge@gmail.com";
//send data to php form--------------------->
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST", "contact.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("outputtext").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.send(params);
}
</script>
</head>
<body>
<div class="row">
<div class="hero-unit" style="padding:20px 100px">
<h1>Contact Us</h1>
<p>aldkfjasdkfjaskdfasdfkasdkfjadsfjsdkfjaskfjasdkfjasjfaskdfjsdkfjsksdsdkjsd</p>
</div>
<div class="col-sm-6">
<div class="my-form">
<form class="form-horizontal" name="myForm" >
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Name:</label>
<div class="col-sm-8">
<input type="name" name="name" class="form-control" id="inputEmail3" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Email:</label>
<div class="col-sm-8">
<input type="email" name="email" class="form-control" id="inputPassword3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Subject:</label>
<div class="col-sm-8">
<input type="text" name="subject" class="form-control" placeholder="Subject">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Text:</label>
<div class="col-sm-8">
<textarea name="text" class="form-control" rows="7" placeholder="Text"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" onclick="validateForm()">Send</button>
</div>
</div>
</div>
</form>
</div>
<div class="col-sm-6">
<div style="width:500px;heigth:350px;border:solid 1px brown">
<h1>GOOGLE MAP HERE!</h1>
</div>
<!-- <img sytle="padding:0px 20px" src="https://maps.googleapis.com/maps/api/staticmap?center=Miami+Downtown,Miami,FL&zoom=13&size=500x350&maptype=roadmap&markers=color:red%7CMiami+Downtown,Miami,FL"> -->
</div>
</div>
<div id="outputtext">
<p>output text here!</p>
</div>
<!-- display form result message here! -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
联系我们
函数validateForm()
{
var params=“name=jorge&email=jorge@gmail.com";
//将数据发送到php表单----------------->
var-xmlhttp;
if(window.XMLHttpRequest){
//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest();
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject(“Microsoft.xmlhttp”);
}
open(“POST”,“contact.php”,true);
setRequestHeader(“内容类型”,“应用程序/x-www-form-urlencoded”);
xmlhttp.onreadystatechange=函数()
{
if(xmlhttp.readyState==4&&xmlhttp.status==200)
{
document.getElementById(“outputtext”).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.send(params);
}
联系我们
ALDKFJASDKFJASKDFKASDKFJADSFJSDKFJASKFJASDKFJASJFASKDFJSDKFJSKSDSDKJSD
姓名:
电邮:
主题:
正文:
发送
谷歌地图在这里!
在这里输出文本
php脚本
<?php
echo "name: " . $_POST['name'] . " email: " . $_POST['email'];
?>
您正在通过
GET
提交:
<form class="form-horizontal" name="myForm" >
没有
method=“POST”
,因此浏览器默认为GET请求,使$\u POST完全为空。您的ajax代码也不会中断标准的提交行为,因此在页面关闭之前,它永远不会有机会发送自己的POST请求。当JS发出请求时,这有关系吗?没有。http就是http。只要js复制了表单的功能,浏览器就无法判断它是ajax头(ajax使用了一个X头,但由于它是http,所以很容易伪造/省略)。我的表单中有一个method=“post”,我在b/c中删除了它,这没有任何区别。我还是拿不回来东西