Question

我正在尝试通过将jQuery Ajax对象所需的一些属性作为对象参数传递来构造一个通用的Ajax函数。我被困在一块拼图上，这是在“完成”中传递回调函数的正确方法。我的想法是用一个ajax函数替换我的.js文件中的大约10个ajax函数。

这是我的代码：

// The generic ajax function, which will be called by various functions
// and passing variable parameters, different controller urls, different
// GET or POST types, different POST data sets, and finally, different
// callback functions.
function generalAjax(params){
    $.ajax({
        url: params.url,
        type: params.type,
        data : params.formData,
        dataType : 'json'
    }).done(function( data ) {
        params.callback; // <-- Trying to get this line to work.
    }).fail(function(jqXHR, textStatus){
        var string = "Ajax request failed : " + textStatus + " - " + jqXHR.responseText;
        $("#diag").html(string);
    });
}   

// Create the prototype
function ajaxParams(url, type, data, callback) {
    this.url = url;
    this.type = type;
    this.formData = data;
    this.callback = callback;
}

// A button in my php file will call this function.
function nameSearch(){
    var url = "/ajax/name_search/";
    var type = "POST";
    var formData = { 'q' : document.getElementsByName("searchname")[0].value };
    var callback = nameSearchCallback; // Specific method for this event
    var params = new ajaxParams(url, type, formData, callback);
    generalAjax(params);
}

// One specific callback function for one specific event trigger.
function nameSearchCallback(e){
    var string = "";
    $.each(e,function(k,v){
        string += k + " = " + v + "\n";
        if(v instanceof Object == true){
            string += "<ul>\n";
            $.each(v,function(kk,vv){
                string += "<li>" + kk + " = " + vv + "</li>\n";
            });
            string += "</ul>\n";
        }
    });
    $("#form-panel").html(string);
}

15行，您可以看到我在哪里替换参数.callback用于硬编码脚本或直接调用特定函数。我想要的是该行调用不同的函数或方法，具体取决于调用genericAjax函数的实例化对象的需要。

取决于我是尝试params.callback还是params.callback()，最好不会发生任何事情，或者最坏的情况是页面刷新，在我的javascript控制台中，我在jquery库中得到TypeError : a is undefined文件。

我也尝试了var callback = nameSearchCallback;和var callback = nameSearchCallback();我也跳过了对nameSearchCallback（）函数的引用，只是将函数写入params.callback作为

params.callback = function(){
    var string = "";
    $.each(e,function(k,v){
        string += k + " = " + v + "\n";
        if(v instanceof Object == true){
            string += "<ul>\n";
            $.each(v,function(kk,vv){
                string += "<li>" + kk + " = " + vv + "</li>\n";
            });
            string += "</ul>\n";
        }
    });
    $("#diag").html(string);
}

Answer 1

我的问题有一个可行的解决方案，但这不是我问题的具体答案。由于没有人回答这个问题，我想我会发布一般解决方案。

我遇到了一个问题，答案是如何制作dynamic functions using arrays。我将这个答案应用于上述问题。

我声明了一个数组：

var dyn_functions = [];

每次我想定义一个回调函数时，我都会这样写：

// Where data is an object and data['string'] is a property returned in jsson format from a php controller.
dyn_functions['nameSearchCallback'] = function (data){
    var string = "<h3>Search results:</h3>\n";
    string += "<blockquote>" + data['string'] + "</blockquote>";
    $("#form-panel").html(string);
}

每个回调函数都有自己的名称。

您的事件触发器将调用自己的函数，如

var n = "Mark";
<button onClick='nameSearch(n);return false;'>Search</button>

在您的脚本文件中，事件函数nameSearch如下所示：

function nameSearch(n){
    var url = "/ajax/name_search/"; //This is the name of a php file or a function in an MVC controller
    var type = "POST"; //This can also be GET
    var formData = { 'q' : n }; //If your type is "GET", then this should be empty, like "", and you could pass `n` as a url query string or a uri segment.
    var callback = "nameSearchCallback"; //Remember the dynFunction callback above? This is the name of it.
    var params = new ajaxParams(url, type, formData, callback);//Make a params object to pass our params to the generic ajax function.
    generalAjax(params); //Calling the generic ajax function.
}

您需要对params属性构造函数进行原型设计：

// The prototype constructor for the general Ajax parameters.
function ajaxParams(url, type, data, callback) {
    this.url = url;
    this.type = type;
    this.formData = data;
    this.callback = callback;
}

...最后，我们有一个单独的ajax函数可以提供无限的 n 调用：

// The general Ajax function.
function generalAjax(params){
    $.ajax({
        url: params.url,
        type: params.type,
        data : params.formData,
        dataType : 'json'
    }).done(function( data ) {
        var callback = dyn_functions[params.callback](data);
    }).fail(function(jqXHR, textStatus){
        var string = "Ajax request failed : " + textStatus + " - " + jqXHR.responseText;
        $("#diag").html(string);
    });
}

所以，整个事情都会像这样：

// The prototype constructor for the general Ajax parameters.
function ajaxParams(url, type, data, callback) {
    this.url = url;
    this.type = type;
    this.formData = data;
    this.callback = callback;
}

// The general Ajax function.
function generalAjax(params){
    $.ajax({
        url: params.url,
        type: params.type,
        data : params.formData,
        dataType : 'json'
    }).done(function( data ) {
        var callback = dyn_functions[params.callback](data);
    }).fail(function(jqXHR, textStatus){
        var string = "Ajax request failed : " + textStatus + " - " + jqXHR.responseText;
        $("#diag").html(string);
    });
}



//The global dyn_functions object, to be used for all scripts.
var dyn_functions = [];

dyn_functions['nameSearchCallback'] = function (data){
    var string = "<h3>Search results:</h3>\n";
    string += "<blockquote>" + data['string'] + "</blockquote>";
    $("#form-panel").html(string);
}

function nameSearch(n){
    var url = "/ajax/name_search/";
    var type = "POST";
    var formData = { 'q' : n }; //If your type is "GET", then this should be empty, like "", and you could pass `n` as a url query string or a uri segment.
    var callback = "nameSearchCallback";
    var params = new ajaxParams(url, type, formData, callback);
    generalAjax(params);
}

如何在泛型jquery ajax调用中构造和调用方法或函数

1 个答案: