你好！我正在嘗試將 ajax 發布功能降為一個，并在每個頁面上使用不同的 url 在整個站點上使用它。
這是我的原始功能及其作業原理：
<button type="button"class="submit">send</button>
$(document).ready(function (){
$('.submit').on("click", function(e){
e.preventDefault();
var form = $(this).closest('form');
$.ajax({
type:'POST',
url:'ActionPage.php',
data:form.serialize(),
success:function(vardata){
var json = JSON.parse(vardata);
if(json.status == 101){
alert(json.msg);
window.location.replace("/");
} else {
alert(json.msg);
console.log(json.msg);
}
}
});
});
});
Exp：我在某些頁面中有多個表單，所以我需要使用$(this).closest('form');來發布每個表單。
這就是我想做的，原始功能將在腳本中并包含在頁面中：
function ajaxLoader(url) {
var form = $(this).closest("form");
$.ajax({
type:"POST",
"url" : url,
data:form.serialize(),
success:function(vardata){
var json = JSON.parse(vardata);
if(json.status == 101){
alert(json.msg);
window.location.replace("/");
} else {
alert(json.msg);
console.log(json.msg);
}
}
});
}
在頁面上我想這樣稱呼它：
$(document).ready(function (){
$('.submit').on("click", function(e){
e.preventDefault();
ajaxLoader("ActionPage.php", true);
});
});
當我單擊發送按鈕時，我在所有情況下都會收到未定義的訊息，當我移動$(this).closest("form");到第二個函式時，我會收到未定義的表單錯誤。
我在網站上搜索過類似的問題，但沒有一個有用的答案。例子：這個
uj5u.com熱心網友回復：
$(this).closest("form");在您的函式“ajaxLoader”內時，不會決議為單擊按鈕的最接近的表單元素。在該函式中執行“console.log(this)”。
您可以將表單直接注入到您的函式中：
$(document).ready(function (){
$('.submit').on("click", function(e){
e.preventDefault();
let form = $(this).closest("form");
ajaxLoader("ActionPage.php", form);
});
});
function ajaxLoader(url, form) {
...
}
或者您可以使用表單的 action 屬性并直接掛鉤到表單的提交事件：
$('form').on('submit', function( e ) {
e.preventDefault();
const $form = $(this);
const url = $form.attr('action');
const data = $form.serialize();
const method = $form.attr('method');
$.ajax({
url: url,
data: data,
success: function(response) {
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="actionpage.php" method="POST">
<button type="submit">
submit
</button>
</form>uj5u.com熱心網友回復：
如何this確定范圍取決于如何呼叫它的背景關系。您可以使用 call/apply/bind 更改它的內容。下面的基本示例。
function ajaxLoader(url) {
console.log(this, url)
var form = $(this).closest("form");
console.log(form[0]);
}
$(document).ready(function (){
$('.submit').on("click", function(e){
e.preventDefault();
ajaxLoader.call(this, "ActionPage.php");
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="foo">
<button class="submit">Click</button>
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/488915.html
標籤：javascript jQuery 阿贾克斯