如何在多页面中调用同一AJAX函数并使用不同请求URL

首先得说清楚问题出在哪：你封装的ajaxLoader函数里的this指向不对！当你直接调用这个函数时，函数内部的this默认指向的是全局的window对象，而不是你点击的那个提交按钮，所以$(this).closest("form")根本找不到对应的表单，自然就会出现undefined的提示。

下面给你三种可行的解决办法，你可以根据自己的习惯选：

方法一：把按钮元素作为参数传递给通用函数 #

修改公共脚本里的通用函数，让它接收按钮元素作为参数，然后通过这个参数去获取表单：

// 公共脚本中的通用AJAX函数
function ajaxLoader(url, btnElement) {
  const form = $(btnElement).closest("form");
  $.ajax({
    type: "POST",
    url: url,
    data: form.serialize(),
    success: function(vardata) {
      const json = JSON.parse(vardata);
      if (json.status === 101) {
        alert(json.msg);
        window.location.replace("/");
      } else {
        alert(json.msg);
        console.log(json.msg);
      }
    }
  });
}

然后在页面调用时，把当前点击的按钮（也就是this）传进去：

$(document).ready(function (){
  $('.submit').on("click", function(e){
    e.preventDefault();
    // 把当前点击的按钮元素传给通用函数
    ajaxLoader("ActionPage.php", this);
  });
});

方法二：用call绑定函数的this指向 #

如果你不想修改通用函数里的$(this)写法，可以在调用时用call方法，把按钮的this绑定给ajaxLoader函数，让函数内部的this指向点击的按钮：

// 公共脚本中的通用AJAX函数（保持你原来的写法即可）
function ajaxLoader(url) {
  const form = $(this).closest("form");
  $.ajax({
    type: "POST",
    url: url,
    data: form.serialize(),
    success: function(vardata) {
      const json = JSON.parse(vardata);
      if (json.status === 101) {
        alert(json.msg);
        window.location.replace("/");
      } else {
        alert(json.msg);
        console.log(json.msg);
      }
    }
  });
}

页面调用时用call绑定上下文：

$(document).ready(function (){
  $('.submit').on("click", function(e){
    e.preventDefault();
    // 用call把当前按钮的this绑定给ajaxLoader
    ajaxLoader.call(this, "ActionPage.php");
  });
});

方法三：先在页面获取表单再传给通用函数 #

你之前尝试把$(this).closest("form")移到页面调用里但报错，大概率是变量声明的问题，正确的写法应该是这样：

// 公共脚本中的通用AJAX函数
function ajaxLoader(url, form) {
  $.ajax({
    type: "POST",
    url: url,
    data: form.serialize(),
    success: function(vardata) {
      const 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();
    // 先获取当前按钮对应的表单
    const form = $(this).closest("form");
    // 把表单传给通用函数
    ajaxLoader("ActionPage.php", form);
  });
});

这三种方法都能解决你遇到的undefined问题，选哪种都可以，看你更习惯哪种写法~

内容的提问来源于stack exchange，提问作者DLK