我正在尝试在表单提交后使用ajax
运行php
脚本。这是表格
<form id="form" class="form">
<input id="email" type="email" required name="email" placeholder="Email" onchange="myUpdateFunction()" value="">
<textarea id="message" type="text" value="" name="message" onchange="myUpdateFunction()" required placeholder="Comments" style="border:none;border-bottom:1px solid #424242; width:530px;"></textarea>
<input id="submit" type="submit" class="submit" name="send_request" value="Submit" >
</form>
这是我的脚本
$('.submit').on('click', function() {
$.ajax({
url: "send.php",
method:'post',
data: {'email': $('#email').val(), 'message': $('#message').val()}
}).done(function() {
alert('Message Sent.');
});
});
这是我的send.php文件
<?php
if(isset($_POST['send_request'])){
//send email
}
?>
但它不起作用,页面被重新加载,电子邮件没有发送,也没有显示"警报消息"
php中没有问题,因为如果我删除javascript并在表单中添加action="send.php"method="POST"作为属性,那么问题就出在javascript 上了
http://jsfiddle.net/o5xvpkmv/2/
对于这类事情,你不应该使用onchange或click事件,而应该使用submit事件(防止submit按钮的默认行为)。
<form id="form" class="form">
<input id="email" type="email" name="email" placeholder="Email" required>
<textarea id="message" type="text" value="" name="message" placeholder="Comments" required></textarea>
<input id="submit" type="submit" class="submit" name="send_request" value="Submit">
</form>
$("#form").on('submit', function(e) {
e.preventDefault();
$.ajax({
url: "send.php",
method:'post',
data: $( this ).serialize()
}).done(function() {
alert('Message Sent.');
});
});
或者(两种方式都好)
$(document).ready(function () {
$('#submit').click(function () {
$.ajax({
url: "send.php",
method: 'post',
data: $(this).serialize()
}).done(function () {
alert('Message Sent.');
});
return false;
});
});
此外,关于后端,您应该进行这种检查:
if (
isset($_POST["email"]) &&
!empty($_POST["email"]) &&
isset($_POST["message"]) &&
!empty($_POST["message"])) {
//send email
}