我试图通过使用ajax进行一些jQuery验证和php验证来使此表单尽可能简单。一切正常，直到我尝试包含Ajax。
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<script type="text/javascript">
// we will add our javascript code here
jQuery(document).ready(function($) {
$("#ajax-contact-form").submit(function() {
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "contactfinal.php",
data: str,
success: function(msg) {
if(msg == 'OK') {
result = '<div class="alert alert-success" role="alert">Your message was sent, we\'ll get back to you ASAP!</div>';
$("#fields").hide();
} else {
result = '<div class="alert alert-danger" role="alert"><p><strong>There were error(s) in your form:</strong></p>' + error + '</div>';
}
}
});
return false;
});
});
</script>
</head>
<body>
<div class="container">
<h1>Get in touch!</h1>
<div id="error"><? echo $error.$successMessage; ?></div>
<form id="ajax-contact-form" action="">
<fieldset class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email">
<small class="text-muted">We'll never share your email with anyone else.</small>
</fieldset>
<fieldset class="form-group">
<label for="subject">Subject</label>
<input type="text" class="form-control" id="subject" name="subject" >
</fieldset>
<fieldset class="form-group">
<label for="exampleTextarea">What would you like to ask us?</label>
<textarea class="form-control" id="content" name="content" rows="3"></textarea>
</fieldset>
<button type="submit" id="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
contactfinal.php
<?php
$error = ""; $successMessage = "";
if ($_POST) {
if (!$_POST["email"]) {
$error .= "An email address is required.<br>";
}
if (!$_POST["content"]) {
$error .= "The content field is required.<br>";
}
if (!$_POST["subject"]) {
$error .= "The subject is required.<br>";
}
if ($_POST['email'] && filter_var($_POST["email"], FILTER_VALIDATE_EMAIL) === false) {
$error .= "The email address is invalid.<br>";
}
if ($error != "") {
$error = '<div class="alert alert-danger" role="alert"><p>There were error(s) in your form:</p>' . $error . '</div>';
} else {
$emailTo = "[email protected]";
$subject = $_POST['subject'];
$content = $_POST['content'];
$headers = "From: ".$_POST['email'];
if (mail($emailTo, $subject, $content, $headers)) {
$successMessage = '<div class="alert alert-success" role="alert">Your message was sent, we\'ll get back to you ASAP!</div>';
} else {
$error = '<div class="alert alert-danger" role="alert"><p><strong>Your message couldn\'t be sent - please try again later</div>';
}
}
}
?>
问题在于，您甚至在加载jQuery库之前都试图执行jQuery脚本。尝试jQuery(document).ready()在加载bootstrap.min.js文件后立即移动整个jQuery代码段，然后一切正常。
不知道您是否在那里，但是PHP部分未返回任何响应。如果要能够附加来自AJAX响应的错误/成功消息，则应该使用echo $successMessage和echo $error。
您应该echo按原样进行响应，或者更高级地进行响应，可以将json_encode其放入数组-
<?php
$error = ""; $successMessage = "";
if ($_POST) {
if (!$_POST["email"]) {
$error .= "An email address is required.<br>";
}
if (!$_POST["content"]) {
$error .= "The content field is required.<br>";
}
if (!$_POST["subject"]) {
$error .= "The subject is required.<br>";
}
if ($_POST['email'] && filter_var($_POST["email"], FILTER_VALIDATE_EMAIL) === false) {
$error .= "The email address is invalid.<br>";
}
if ($error != "") {
$error = '<div class="alert alert-danger" role="alert"><p>There were error(s) in your form:</p>' . $error . '</div>';
echo $error;
} else {
$emailTo = "[email protected]";
$subject = $_POST['subject'];
$content = $_POST['content'];
$headers = "From: ".$_POST['email'];
if (mail($emailTo, $subject, $content, $headers)) {
$successMessage = '<div class="alert alert-success" role="alert">Your message was sent, we\'ll get back to you ASAP!</div>';
echo $successMessage;
} else {
$error = '<div class="alert alert-danger" role="alert"><p><strong>Your message couldn\'t be sent - please try again later</div>';
echo $error;
}
}
}
?>
接下来，由于服务器正在返回消息，因此您只需将响应追加到错误持有者中
<script type="text/javascript">
// we will add our javascript code here
jQuery(document).ready(function($) {
$("#ajax-contact-form").submit(function() {
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "contactfinal.php",
data: str,
success: function(response) {
$('#error').html(response);
}
});
return false;
});
});
</script>
这部分<div id="error"><? echo $error.$successMessage; ?></div>无效，因为您正在尝试将javascript字符串打印到PHP中。如果您遵循上面的AJAX代码段I，则只需将该部分替换为空的div<div id="error"></div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句