![](/img/trans.png)
[英]how to use ajax/jquery to call php from javascript on a wordpress html page
[英]jquery - Page changes to .php from my .html on Ajax call
當我使用 PHP 函數發送電子郵件時,一切正常。 但是,我不希望頁面刷新,因此我按以下方式使用 ajax:
reservation.html
<form class="form-horizontal"
method="post"
action="mailer.php"
id="submitForm">
<div class="form-group">
<label for="name" class="cols-sm-2 control-label">Your Name</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="name" id="userName" placeholder="Enter your Name"/>
</div>
</div>
</div>
<div class="form-group">
<label for="email" class="cols-sm-2 control-label">Your Email</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="email" id="userEmail" placeholder="Enter your Email"/>
</div>
</div>
</div>
<hr style="border-color:black;">
<div class="form-group ">
<button id="sendEmailButton"
type="submit"
class="btn btn-primary btn-lg btn-block login-button"
style="background-color:#483D8B;border-color:none;">Register</button>
</div>
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#submitForm').submit(function(e){
e.preventDefault(); // Prevent Default Submission
$.ajax({
url: 'mailer.php',
type: 'POST',
data: $(this).serialize(), // it will serialize the form data
dataType: 'html'
})
.done(function(data){
$('#submitForm').fadeOut('slow', function(){
$('#submitForm').fadeIn('slow').html(data);
});
})
.fail(function(){
alert('Ajax Submit Failed ...');
});
e.preventDefault();
});
});
});
</script>
mailer.php
<?php
$theName = $_POST["name"];
$theEmail = $_POST["email"];
$to = $theEmail;
$subject = "Hi, ". $theName."!";
$txt = "All the details ... ";
$headers = "From: yay@blakes.graduation.com" . "\r\n";
//mail($to,$subject,$txt,$headers);
?>
所以當我點擊提交按鈕時,頁面從www.bmconrad.webutu.com/html/reservation.html
變為www.bmconrad.webutu.com/html/mailer.php
。 我已經讓網站在這種狀態下運行,以便任何可以查看並幫助我了解我缺少什么或這樣做的最佳方法的人。 感謝您的任何/所有輸入。
這是因為您的 javascript 代碼中有錯誤。 當您的 js 代碼中出現錯誤時, preventDefault() 失敗,並且表單以標准方式運行並重定向到操作方法。
只需刪除最后一個額外的});
應該管用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.