0
我創建了一個聯繫表單，通過它我將發佈此數據並返回成功消息。我能夠成功發佈數據，但無法在表單上顯示成功或失敗消息。
下面是我的代碼： Contact.php：無法在HTML頁面上使用JQuery Ajax打印成功消息
<?php
ini_set('display_errors','On');
error_reporting(E_ALL);
$name=$_POST['name'];
$phone=chop($_POST['element_4_1']);
$phone.=chop($_POST['element_4_2']);
$phone.=chop($_POST['element_4_3']);
$email=chop($_POST['email']);
$message1=chop($_POST['input4']);
if ($name && $phone && $email) {
$headers = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/plain; charset=iso-8859-1\r\n";
$headers .= "From: [email protected] \n";
$recipient= "[email protected]";
$subject="Online Enquiry ";
$message.="\nName : $name\n";
$message.="\nPhone : $phone\n";
$message.="\nEmail ID : $email\n";
$message.="\nMessage : $message1\n";
//send auto-reply
$subject_reply="Thank you for contacting Rugs of India";
$message_reply="Thank you for contacting us. We will get back to you shortly.";
mail($email, $subject_reply, $message_reply, $headers);
//Send Mail
//===========
if(mail($recipient, $subject, $message, $headers)) {
echo $message_reply;
} else {
echo "There was an error. Please try again.";
}
}
?>
Contactus.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/coder.css"/>
<style type="text/css">
.bg-color{
background-color:#F9F1E4;
border-radius:5px;
margin:5px;
}
.row_color{
border:2px solid #A40F17;
margin:0px;
}
.footer_class{
background-color:#A40F17;
height:40px;
}
.font_color{
color:#fff;
margin-top:5px;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
background-color: #A40F17;
color: #FFFFFF;
}
.h_color{
background-color:#FFFFFF;
}
.danger{
color:#A40F17;
}
.h_top{
margin-top:30px;
}
.h_height{
height:173px;
}
input.text:focus {
border-color: #66afe9 !important;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
input.text:required {
box-shadow: none; /* Firefox (tested v6) adds red shadow by default */
}
</style>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.3.2.min.js">
</script>
<script>
$(document).ready(function(){
console.log("ready!");
$("#button").click(function(){
console.log("ready2");
$.ajax({
url: './contact.php',
type: "POST",
data: {
"name": $("#name").val(),
"element_4_1": $("#element_4_1").val(),
"element_4_2": $("#element_4_2").val(),
"element_4_3": $("#element_4_3").val(),
"email": $("#email").val(),
"input4": $("#input4").val(),
},
success: function(data){
$("#stage").text(data);
}
});
});
});
</script>
</head>
<body>
<header>
<div class="row h_color h_height">
<div class="container">
</div>
<nav class="navbar navbar-inverse">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeader">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeader">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li class="active"><a href="contactus.html">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container" style="background-color:#fff;">
<div class="row">
<div class="col-lg-12">
<div id="stage">
</div>
<h3>Contact Us</h3>
<div class="col-lg-7 well">
<form class="contact-form">
<h4 style="padding-top:8px;">Your email address will not be published. Required fields are marked <font color="red">*</font></h4>
<label>Name<font color="red">*</font></label><br>
<input class="form-control" style="height:35px;width:230px;border-radius:4px;" required type="text" name="name" id="name"/><br>
<label>Phone<font color="red">*</font></label><br>
<span>
<input id="element_4_1" name="element_4_1" class="element text" size="3" maxlength="3" value="" type="text"> -
</span>
<span>
<input id="element_4_2" name="element_4_2" class="element text" size="4" maxlength="4" value="" type="text"> -
</span>
<span>
<input id="element_4_3" name="element_4_3" class="element text" size="10" maxlength="10" value="" type="text" required >
</span>
<br><br>
<label>Email<font color="red">*</font></label><br>
<input id="email" class="form-control" style="height:35px;width:230px;border-radius:4px;" required type="email" name="text"/><br>
<label for="input4">Message</label>
<textarea name="contact_message" class="form-control" rows="4" id="input4"></textarea>
<p> </p>
<button type="submit" style="margin-left:65px;"class="btn btn-large btn-info" id="button">Submit</button>
</form>
</div>
</div>
</div>
</div>
<footer>
<div class="row footer_class">
<div class="container">
</div>
</div>
</footer>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
當我提交表單，頁面獲取，而不顯示成功刷新message.How我可以糾正這一點。
我加入，但仍然無法正常工作 – user3004356
更改「$（」＃階段「）文本（數據）。」到「$（」＃stage「）。text（data）; alert（data）;」你有沒有收到預期消息的消息框？ – Sirago
我沒有看到任何警報框 – user3004356