Wie zu konstruieren und aufzurufen Methode oder Funktion in generischen Jquery Ajax Call

Question

Ich versuche, eine generische Ajax-Funktion zu konstruieren, indem Sie die wenigen Eigenschaften von einem jQuery Ajax-Objekt als Objekt Parameter übergeben. Ich stecke an einem Stück des Puzzles fest, das ist der richtige Weg, um die Callback-Funktion in "fertig" zu übergeben. Die Idee ist, etwa 10 Ajax-Funktionen in meiner .js-Datei durch nur eine Ajax-Funktion zu ersetzen.

Hier ist mein Code:

// 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 Zeilen nach unten, können Sie sehen, wo ich parameters.callback für eine hart codierte Skript oder direkter Aufruf einer bestimmten Funktion ersetzt haben. Ich möchte, dass diese Zeile je nach den Anforderungen des instanziierten Objekts, das die genericAjax-Funktion aufruft, verschiedene Funktionen oder Methoden aufruft.

Je nachdem, ob ich versuchte params.callback oder params.callback(), bestenfalls, nichts passiert, oder im schlimmsten Fall, erhalte die Seite aktualisiert und in meiner Javascript-Konsole ich ein TypeError : a is undefined in der jQuery-Bibliothek-Datei.

Ich habe auch var callback = nameSearchCallback; und var callback = nameSearchCallback(); habe ich versucht, auch habe den Verweis auf die nameSearchCallback Überspringen() Funktion, und das Schreiben nur die Funktion in params.callback als

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

ich eine funktionierende Lösung für mein Problem, aber es ist keine spezifische Antwort auf meine Frage. Da niemand die Frage beantwortet, schätze ich die allgemeine Lösung.

Ich stieß auf eine Frage mit einer Antwort auf, wie man dynamic functions using arrays macht. Ich habe diese Antwort auf die obige Frage angewandt.

Ich erkläre ein Array:

var dyn_functions = []; 

Jedes Mal, wenn ich eine Rückruffunktion definieren wollen, schreibe ich etwas wie folgt aus:

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

Jede Callback-Funktion wird seinen eigenen Namen haben.

Ihre Ereignisauslöser seine eigene Funktion aufrufen wird, so etwas wie

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

In Ihrer Script-Datei, die Event-Funktion nameSearch sieht wie folgt aus:

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

Sie müssen die Eigenschaft params Konstruktor zum Prototyp :

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

... und schließlich haben wir einen einzigen Ajax Spaß ction, die unendliche n von Anrufen dient:

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

wird Also, schauen die ganze Sache alle zusammen wie folgt aus:

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