我有这个表单，并且我使用ajax将数据发送到一个简单的PHP脚本（只是用简单的PHP脚本进行故障排除）但是它没有将数据发布回原始的html表单......这里有两个脚本 contact.html
<!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 message = "";
var letters = /^[A-Za-z]+$/;
//do validation
var jname = document.forms["myForm"]["name"].value;
var jemail = document.forms["myForm"]["email"].value;
var jsubject = document.forms["myForm"]["subject"].value;
var jtext = document.forms["myForm"]["text"].value;
var joutputMsg = "";
//checking for empty fields
if (jname == null || jname == "") {
message += "name field empty!\n";
}
if (jname != "" && !jname.match(letters)) {
message += "Invalid name: only letters allowed!\n";
}
if (jemail == null || jemail == "") {
message += "email field is empty!\n";
}
if (jsubject == null || jsubject == "") {
message += "Subject field is empty!\n";
}
if (jtext == null || jtext == "") {
message += "Text field is empty!\n";
}
if (message != "" ) {
alert(message);
return false;
}
//send data to php form--------------------->
// create the XMLHttpRequest object, according browser
// create the variable that will contain the instance of the XMLHttpRequest object (initially with null value)
var xmlHttp = null;
if(window.XMLHttpRequest) { // for Forefox, IE7+, Opera, Safari, ...
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) { // for Internet Explorer 5 or 6
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// sends data to a php file, via POST, and displays the received answer
// create pairs index=value with data that must be sent to server
var parameters="name="+jname+"&email="+jemail;
request.open("POST", "contact.php", true); // set the request
// adds a header to tell the PHP script to recognize the data as is sent via POST
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(the_data); // calls the send() method with datas as parameter
// Check request status
// If the response is received completely, will be transferred to the HTML tag with tagID
request.onreadystatechange = function() {
if (request.readyState == 4) {
document.getElementById("output-data").innerHTML = request.responseText;
}
}
return false;
}
</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" action="contact.php" onsubmit="return validateForm(event)" method="post">
<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">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 class="col-sm-6" id="msg-result" style="padding:10px 140px">
<p id="output-data">
</p>
<!-- display form result message here! -->
</div>
<!-- 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>
contact.php
<?php
if (isset($_POST['name'])) {
$name = $_POST['name'];
}
if (isset($_POST['email'])) {
$email = $_POST['email'];
}
echo "Name: " . $name . "<br> Email: " . $email;
?>
答案 0 :(得分：0)
有很多错误，但我已经开始工作了，您可能希望查看输入字段的命名约定。例如，在 name 上，您的ID为id="inputEmail13"。在您开发时使用浏览器控制台查看错误消息。
function validateForm(event)
{
event.preventDefault();
var message = "";
var letters = /^[A-Za-z]+$/;
//do validation
var name = document.forms["myForm"]["name"].value;
var email = document.forms["myForm"]["email"].value;
var subject = document.forms["myForm"]["subject"].value;
var text = document.forms["myForm"]["text"].value;
var outputMsg = "";
//checking for empty fields
if (name == null || name == "") {
message += "name field empty!\n";
}
if (name != "" && !name.match(letters)) {
message += "Invalid name: only letters allowed!\n";
}
if (email == null || email == "") {
message += "email field is empty!\n";
}
if (subject == null || subject == "") {
message += "Subject field is empty!\n";
}
if (text == null || text == "") {
message += "Text field is empty!\n";
}
if (message != "" ) {
alert(message);
return false;
}
//send data to php form--------------------->
// create the XMLHttpRequest object, according browser
// create the variable that will contain the instance of the XMLHttpRequest object (initially with null value)
var xmlHttp = null;
if(window.XMLHttpRequest) { // for Forefox, IE7+, Opera, Safari, ...
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) { // for Internet Explorer 5 or 6
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// sends data to a php file, via POST, and displays the received answer
// create pairs index=value with data that must be sent to server
var parameters="name="+name+"&email="+email;
xmlHttp.open("POST", "contact.php", true); // set the request
// adds a header to tell the PHP script to recognize the data as is sent via POST
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send(parameters); // calls the send() method with datas as parameter
// Check request status
// If the response is received completely, will be transferred to the HTML tag with tagID
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
document.getElementById("output-data").innerHTML = xmlHttp.responseText;
}
}
return false;
}
在html中，您要删除输出div上的visibility:hidden;
<div class="col-sm-6" id="msg-result" style="padding:10px 140px;">
<p id="output-data">
</p>
<!-- display form result message here! -->
</div>
编辑：
请求未定义的原因是因为您从未创建一个名为request的变量，但您正在调用一个。
request.open("POST", "contact.php", true);
此行会抛出第一个错误，说明它未定义，可以通过将request更改为xmlHttp或将xmlHttp = new XMLHttpRequest();修改为request = new ....来轻松修复同样应该对其他xmlHttp赋值。