ジェネリックjquery ajaxコールでメソッドまたは関数を構築して呼び出す方法

Question

jQuery Ajaxオブジェクトで必要とされるいくつかのプロパティをオブジェクトパラメータとして渡して、汎用Ajax関数を構築しようとしています。私はパズルの一片にこだわっています、それは "done"内でコールバック関数を渡す適切な方法です。アイデアは私の.jsファイル内の約10個のajax関数をただ1つの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行下、あなたは私が特定の機能にハードコーディングされたスクリプトまたは直接呼び出しのためparameters.callbackを置換してきた場所を確認することができます。私が望むのは、genericAjax関数を呼び出すインスタンス化されたオブジェクトのニーズに応じて、その行がさまざまな関数やメソッドを呼び出すことです。

私はparams.callbackまたはparams.callback()を試みるかどうかに応じて、最高の状態で、何も最悪の起こらない、または、ページが更新され、私のJavaScriptコンソールに私はjqueryのライブラリファイルにTypeError : a is undefinedを取得します。

は、私も私もnameSearchCallback（）関数への参照をスキップし、ちょうど

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

としてparams.callbackに関数を記述しているvar callback = nameSearchCallback;とvar callback = nameSearchCallback();を試してみましたが、私は私の問題に取り組んで解決策を持っています、私の質問に対する具体的な答えではありません。誰も質問に答えていないので、私は一般的な解決策を投稿するつもりです。

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); 
} 

すべてのコールバック関数は、独自の名前を持ちます。あなたはParamsプロパティコンストラクタのプロトタイプを作成する必要が

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. 
} 

：

あなたのイベントトリガーは、スクリプトファイル、次のようになりますnameSearchイベント機能で

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

のようなもの、独自の関数を呼び出します：

// 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; 
} 

...最後に、私たちは1つのajax fun通話の N 無限を提供していますction：

// 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); 
}