Ajax联系表问题
[英]Issue with Ajax Contact Form
问题描述
I am trying to put together a simple contact form with ajax, where users are not redirected to the contact.php file once the submission is done.. 
我正在尝试将一个简单的联系表单与ajax放在一起，一旦提交完成，用户就不会重定向到contact.php文件。
There is no errors.. I am always redirected.. 没有错误..我总是被重定向..
Any idea please? 有什么想法吗？ Any suggestion is highly appreciated. 任何建议都将受到高度赞赏。 Thanks! 谢谢！
contact.html contact.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<form action="contact.php" method="post" class="ajax">
<div>
<input type="text" name="name" placeholder="Your Name">
</div>
<div>
<input type="email" name="email" placeholder="Your Email">
</div>
<div>
<textarea name="message" placeholder="Your Message"></textarea>
<div>
<input type="submit" value="Send">
</form>
</body>
</html>
contact.php contact.php
<?php
if(isset($_POST['name'], $_POST['email'], $_POST['message'], $_POST['name'])) {
print_r($_POST);
}
?>
main.js main.js
$('form.ajax').on('submit', function() {
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = {};
that.find('[name]').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
$.ajax({
url: url,
type: type,
data: data,
success:function(response) {
console.log(response);
}
});
return false;
});
3 个解决方案
解决方案1
0 2017-09-21 00:35:45
You need to prevent the default form behavior. 您需要防止默认的表单行为。
$('form.ajax').on('submit', function(evt) {
evt.preventDefault();
解决方案2
0
You need to ouput json format so header need to be setting and you need to return json value to ajax success so need json_encode($object_or_array_form_php); 您需要输出json格式，因此需要设置标头，并且需要将json值返回给ajax成功，因此需要json_encode（$ object_or_array_form_php）;
<?php
if(isset($_POST['name'], $_POST['email'], $_POST['message'], $_POST['name'])) {
header("Content-type:application/json");
$_POST['success'] = "You form is sending ...";
echo json_encode($_POST); //this is the "response" param form ajax
}
?>
解决方案3
0 2017-09-21 01:06:42
Hacked! 砍死！ Here's a little bit different way .. 这有点不同..
<script>
$(document).ready(function() {
$('form').submit(function (event) {
event.preventDefault();
var name = $("#mail-name").val();
var email = $("#mail-email").val();
var message = $("#mail-message").val();
var submit = $("#mail-submit").val();
$(".form-message").load("contact.php", {
name: name,
email: email,
message: message,
submit: submit
});
});
});
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.