将 $.AJAX 容纳在函数中并使用参数作为“数据”参数的一部分答案

【问题标题】：Housing $.AJAX inside a function and using a paramter as part of the "data" argument将 $.AJAX 容纳在函数中并使用参数作为“数据”参数的一部分
【发布时间】：2016-09-08 15:16:57
【问题描述】：

我正在尝试创建一个可重用的函数，它允许我调用 AJAX 请求并将传入的参数之一用作 AJAX 调用的数据部分中的参数。

// Returns AJAX data for updating other fields based on a dropdown changing
App.prototype.OnDropdownChange = function (s, e, newId, ajaxParameter, ajaxRequestURL) {
    // Create an AJAX request based on the parameters
    $.ajax({
        url: ajaxRequestURL,
        data: JSON.stringify({ ajaxParameter: newId }),
        type: 'POST',
        success: function (data) {
            // Return the data
            return data;
        },
        error: function (data) {
            // Error
            return data;
        }
    });
}

理想情况下，“ajaxParameter”将保存被传递的参数的名称。例如，“ajaxParamter”包含“theNewID”，这是我的 MVC 控制器期望的参数，但是当它被传递时，它显示为“ajaxParameter”，而不是里面的值。

我怎样才能让它工作？

编辑

http://imgur.com/a/GSaPd

在这里看到它是如何显示为 ajaxParameter 的？我想要的是成为我传递的任何东西。

【问题讨论】：

是的，这完全有可能，假设您控制了调用所述函数的内容。
我确实控制了调用它的内容，但记录的内容是“未定义的”。 var data = x.OnDropdownChange(s, e, contactID, "CustomerContactId", "/Project/Project/GetCustomerContactDetails/"); console.log(data);
嗯...哈哈，你不能从异步回调中返回。
问题不是返回，而是如果我将“theNewID”作为 ajaxParamater 传递（因为我的服务器端控制器期望“thenewID”作为参数）但它传递了“ajaxParameter " 到控制器，而不是 ajaxParameter 中包含的内容。
uhm...您将参数命名为“ajaxParameter”，当然可以使用json格式的值传递该键。

标签： javascript jquery ajax asp.net-mvc

【解决方案1】：

你可以做你需要的，你只需要使用括号符号来定义键来构建对象。

然而，一个更大的问题是您在success 和error 处理程序中使用return。由于 AJAX 请求是异步的，因此您无法从中返回任何内容。相反，您需要提供在这些事件下执行的回调函数。试试这个：

App.prototype.OnDropdownChange = function (s, e, newId, ajaxParameter, ajaxRequestURL, sCallback, eCallback) {
    var data = {};
    data[ajaxParameter] = newId;

    $.ajax({
        url: ajaxRequestURL,
        data: data, // note no need to stringify the object
        type: 'POST',
        success: function (data) {
            sCallback && sCallback(data);
        },
        error: function (x, s, e) {
            eCallback && eCallback(x, s, e);
        }
    });
}

然后你可以这样称呼它：

x.OnDropdownChange(s, e, contactID, "CustomerContactId", "/Project/Project/GetCustomerContactDetails/", function(data) {
    // success:
    console.log(data);
}, function(x, s, e) {
    // error:
    console.log(x, s, e);
});

从这段代码中可以看出，它仍然非常冗长，现在基本上只是$.ajax 的包装器，几乎没有什么好处。

【讨论】：

感谢您花时间阅读我的问题并做出回应。像魅力一样工作，感谢您的帮助。

【解决方案2】：

首先，当您在 $.ajax 请求的数据参数中传递一个 obj 时，您不需要对其进行字符串化，除非我认为您在数据库中存储的是 JSON 字符串。

其次，你不能返回ajax请求的success、error、beforeSend和complete回调函数提供的数据，因为它们本身就是一个函数，你只是将数据返回给回调函数本身。

要将数据从回调函数获取到你的原始函数，你需要使用一个临时变量来存储你需要返回的数据

var myAjaxDatavalue = (function(myMethod,myData,myUrl){
   var temp = null;
   $.ajax({
      method: myMethod,
      url: myUrl,
      data: myData,
      async: false,
      success: function(result){
         temp = result
      }.
      error: function (xhr, ajaxOptions, thrownError){
         console.log(xhr);
      }
   });
   return temp;
})();

但请注意，您可以看到 ajax 的用途之一，即异步将被禁用。如果您获得大量数据，这可能会导致问题。

【讨论】：