使用Ajax和php提交表单
我是一个新的热衷于前端编码的人。有人能帮我查一下后端代码吗 我想使用Ajax在模式中接收一条成功消息，其中提交和关闭按钮位于表单提交之后 此外，如果您对表单安全有任何帮助，我们将不胜感激：） 谢谢 这是我的密码： HTML:使用Ajax和php提交表单,php,ajax,contact,Php,Ajax,Contact,我是一个新的热衷于前端编码的人。有人能帮我查一下后端代码吗 我想使用Ajax在模式中接收一条成功消息，其中提交和关闭按钮位于表单提交之后 此外，如果您对表单安全有任何帮助，我们将不胜感激：） 谢谢 这是我的密码： HTML: 联系 姓名： 电邮： 信息： 关 提交 PHP: 将成功方法放入响应 $array=array（“success”=>true，“message”=>“您的邮件已提交..谢谢”）； echo json_解码（$array） 从ajax请求响应中，您可以检查id succ
联系
姓名：
电邮：
信息：
关
提交
将成功方法放入响应
$array=array（“success”=>true，“message”=>“您的邮件已提交..谢谢”）；
echo json_解码（$array）
从ajax请求响应中，您可以检查id success是否为true，然后关闭modal
$.ajax({
url: "script.php",
type: "POST",
data: { id : menuId },
dataType: "json",
success: function(response) {
if( response.success) {
// DO YOUR STUFF
}
}
});
试试这个
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>
函数getHttpRequest（）
{
if（window.XMLHttpRequest）
{
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
返回xmlhttp；
}
函数executeAction（）
{
var contact=document.forms[“contact_form”][“contact name”]。值；
var email=document.forms[“contact_form”][“contact email”]。值；
var message=document.forms[“contact_form”][“message”]。值；
var-xmlhttp；
如果（电子邮件==“”）
{
document.getElementById（'alert'）.innerHTML=“请键入电子邮件id！”；
回来
}
if（window.XMLHttpRequest）
{
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）
{
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（）；
}
联系
姓名：
电邮：
信息：
关
提交
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";
?>
到目前为止，我不喜欢这两种回答。下面是您应该做的事情（希望它能工作，因为我并没有实际测试代码）：
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>
$（“#联系表格”）。提交（功能（e）{
e、 preventDefault（）；//阻止表单正常提交
var$this=$（this）；//缓存表单
$this.post（$this.attr（“操作”），$this.serialize（），函数（数据）{
警报（数据）；
$（“#联系人”）.fadeOut（）；
});
});
这应该可以做到。非常基本。安全性应该在PHP代码中完成。AJAX几乎都是JavaScript（通过jQuery库变得更容易）。到目前为止，您编写了哪些Javascript？在我看来，有很多ajax示例。搜索them@DanGoodspeed实际上我还没有写很多javaScript：（我在Treehouse上只学了六个月左右。我知道我还有很多东西要学，但我觉得它真的很有趣！这是一个我从一开始就一直在使用灰度主题的网站。谢谢@DrixsonOseña的评论，我一定看起来像个完全的新手：（你能把示例页面放到网上某个地方让我们看到吗？是的，去karaina.com:）这是我试图修复的页面：）我看到你将联系人表单的id设置为“ajax联系人”…这很好，除了我告诉你将其命名为“contact_form”并提供代码之外。如果你想将$（“#contact_form”）更改为$（“#ajax contact”）要使用您选择的id，您可以尝试。
id="contact_form"
<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>