使用Ajax和php提交表单
问题描述：
我是一名专注于前端的新爱好者编码器。有人可以请帮助后端代码。使用Ajax和php提交表单
我想使用Ajax接收表单提交后提交和关闭按钮的模式中的成功消息吗？
此外，任何形式安全的帮助将不胜感激:)
谢谢！
这里是我的代码：
HTML：
<!--Modal Contact Form-->
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" action="process.php" method="post" name="contact_form">
<div class="modal-header">
<h3>Contact</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-10">
<input name="contact" type="text" class="form-control" id="contact-name" placeholder="Full Name">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input name="email" type="email" class="form-control" id="contact-email" placeholder="[email protected]">
</div>
</div>
<div class="form-group">
<label for="contact-message" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-10">
<textarea name="message" class="form-control" rows="8"></textarea>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss = "modal">Close</a>
<button style="background-color: grey;" class="btn btn-primary" type="submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--End Contact Modal-->
PHP：
<?php
$contact = $_POST['contact'];
$email = $_POST['email'];
$message = $_POST['message'];
$to = '[email protected]';
$subject = 'New Message';
mail ($to, $subject, $message, "From: " . $email);
echo "your message has been submitted .. Thanks you";
?>
答
把成功的方法来应对。
$array = array("success" => true, "message" => "your message has been submitted .. Thanks you"); echo json_decode($array);
从Ajax请求的响应，你可以查身份证的成功是真实的，然后关闭模式。
$.ajax({
url: "script.php",
type: "POST",
data: { id : menuId },
dataType: "json",
success: function(response) {
if(response.success) {
// DO YOUR STUFF
}
}
});
+0
谢谢你的代码@Azadey :) – Kat 2015-02-12 06:13:22
答
试试这个，
的index.html
<html>
<head>
<script type="text/javascript">
function getHttpRequest()
{
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
function executeAction()
{
var contact=document.forms["contact_form"]["contact-name"].value;
var email=document.forms["contact_form"]["contact-email"].value;
var message=document.forms["contact_form"]["message"].value;
var xmlhttp;
if (email=="")
{
document.getElementById('alert').innerHTML = "Please type the email id!";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('alert').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "sendMail.php?contact="+contact+"&email="+email+"&message="+message, true);
xmlhttp.send();
}
</script>
</head>
<body>
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" action="#" method="POST" name="contact_form">
<div class="modal-header">
<h3>Contact</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-10">
<input name="contact" type="text" class="form-control" id="contact-name" placeholder="Full Name">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input name="email" type="email" class="form-control" id="contact-email" placeholder="[email protected]">
</div>
</div>
<div class="form-group">
<label for="contact-message" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-10">
<textarea name="message" class="form-control" rows="8"></textarea>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss = "modal">Close</a>
<button style="background-color: grey;" class="btn btn-primary" type="button" onClick="executeAction()">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="alert"></div>
</body>
</html>
sendMail.php
<?php
$contact=$_GET["contact"];
$email = $_GET['email'];
$message = $_GET['message'];
$to = '[email protected]';
$subject = 'New Message';
mail ($to, $subject, $message, "From: " . $email);
echo "your message has been submitted .. Thanks you";
?>
+0
谢谢@ Shakila，它不适合我:( – Kat 2015-02-12 11:03:04
答
我不喜欢任何回应为止。这里是你应该做的（希望它可以工作，因为我没有真正测试代码）：
1）在表单标签中添加一个ID。让我们匹配名称，所以只需添加属性...
id="contact_form"
2）将jQuery和Javascript添加到HTML页面的底部。此代码应该位于正文结束标记的正上方。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$("#contact_form").submit(function(e) {
e.preventDefault(); // to stop the form from being submitted normally
var $this = $(this); // cache the form
$this.post($this.attr("action"),$this.serialize(),function(data) {
alert(data);
$("#contact").fadeOut();
});
});
</script>
而且应该这样做。非常基本。安全性应该在PHP代码中完成。
AJAX几乎是所有的JavaScript（使jQuery库变得更容易）。你到目前为止写了哪些Javascript？ – 2015-02-12 03:59:55
IMO在SO中有很多ajax的例子。尝试搜索它们 – 2015-02-12 04:02:47
@DanGoodspeed我其实并没有写很多javaScript :(我只在树屋学习了六个月左右，我知道我还有很多东西要学，但是我觉得它非常有趣！ http://kararaina.com – Kat 2015-02-12 06:08:56