要在 read 頁面中加入一個功能
就提提交查詢時
使用 ajax 不刷新頁面提取内容
而為了避免采集
需要用到 GOOGLE 的 reCAPTCHA
這是 HTML 部分的代碼
<form action="" method="post">
<div id="alert_message"></div>
<div class="form-group">
<label for="pwd">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter your name" name="name" required>
</div>
<input type="hidden" name="recaptcha_response" value="" id="recaptchaResponse">
<input type="submit" name="submit" value="Submit" class="btn btn-success btn-lg" style="padding: 6px 46px; margin: 16px 0 0 0;">
<div style="font-size: 12px; padding-top: 12px; color: #808080;">Note: This form is protected by Google reCAPTCHA.</div>
</form>
這是 JS 部分代碼
$('form').submit(function(event) {
event.preventDefault();
grecaptcha.ready(function () {
grecaptcha.execute('<-google recaptcha key->', { action: 'submit' }).then(function (token) {
var recaptchaResponse = document.getElementById('recaptchaResponse');
recaptchaResponse.value = token;
$.ajax({
url: 'submit_enquiry.php',
type: 'post',
data: $('form').serialize(),
dataType: 'json',
success: function(response){
var error = response.error;
var success = response.success;
if(error != "") {
$('#alert_message').html(error);
}
else {
$('#alert_message').html(success);
}
},
error: function(jqXhr, json, errorThrown){
var error = jqXhr.responseText;
$('#alert_message').html(error);
}
});
});
});
});
現在遇到問題是:
當點擊 submit 時, 網頁重新載入
我認爲問題出在 JS 代碼部分
因爲自己完全就是個 JS 小白
無法把上面 JS 代碼, 更改為適配 WellCMS 的
請各位大神看看幫忙修改一下
wellcms 使用的代码,建议给 form 创建一个 ID 绑定ID要好些。
<script>
$('body').on('submit', 'form', function() {
let jthis = $(this);
let jsubmit = jthis.find('#submit');
jsubmit.button('loading');
let postdata = jthis.serializeObject();
$.xpost('submit_enquiry.php', postdata, function(response) {
let error = response.error;
let success = response.success;
if(error) {
$('#alert_message').html(error);
}
if(success) {
$('#alert_message').html(success);
}
});
return false;
});
</script>