使用Ajax和php提交表单
[英]Submit form using Ajax and php
问题描述
I'm a new enthusiast coder specializing in front end. 
我是专门从事前端的新发烧友编码器。 Can someone please help with the back end code. 有人可以帮忙提供后端代码吗？
I want to use Ajax to receive a success message in the modal where the submit and close buttons are after the form has been submitted? 我想使用Ajax接收模式提交后的成功消息，其中提交和关闭按钮位于表单提交之后？
Also, any help with form security would be greatly appreciated :) 此外，任何形式安全的帮助将不胜感激:)
Thanks! 谢谢！
Here is my code: 这是我的代码：
HTML: 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="you@example.com">
</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：
<?php
$contact = $_POST['contact'];
$email = $_POST['email'];
$message = $_POST['message'];
$to = 'myemail@gmail.com';
$subject = 'New Message';
mail ($to, $subject, $message, "From: " . $email);
echo "your message has been submitted .. Thanks you";
?>
3 个解决方案
解决方案1
0 2015-02-12 04:21:47
Put a success method to response. 提出成功的方法来应对。
$array = array( "success" => true, "message" => "your message has been submitted .. Thanks you" ); echo json_decode($array);
From the ajax request response you can check id success is true and then close your modal. 从ajax请求响应中，您可以检查id成功是否为真，然后关闭模式。
$.ajax({
url: "script.php",
type: "POST",
data: { id : menuId },
dataType: "json",
success: function(response) {
if( response.success) {
// DO YOUR STUFF
}
}
});
解决方案2
0 2015-02-12 07:34:04
Try this, 尝试这个，
index.html 的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="you@example.com">
</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 sendMail.php
<?php
$contact=$_GET["contact"];
$email = $_GET['email'];
$message = $_GET['message'];
$to = 'myemail@gmail.com';
$subject = 'New Message';
mail ($to, $subject, $message, "From: " . $email);
echo "your message has been submitted .. Thanks you";
?>
解决方案3
0 2015-02-12 08:56:24
I don't like either response so far. 到目前为止，我不喜欢这两种回应。 Here's what you should do (hopefully it works because I'm not actually testing the code): 这是你应该做的（希望它有效，因为我实际上并没有测试代码）：
1) Add an ID to the form tag. 1）向表单标记添加ID。 Let's match the name, so just add the attribute in... 让我们匹配名称，所以只需添加属性...
id="contact_form"
2) Add jQuery and Javascript to the bottom of your HTML page. 2）将jQuery和Javascript添加到HTML页面的底部。 This code should go right above the body closing tag. 此代码应位于正文结束标记的正上方。
<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>
And that should do it. 这应该做到这一点。 Very basic. 非常基本的。 Security should be done in the PHP code. 安全性应该在PHP代码中完成。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.