Question

我不知道这个问题的标题是否正确，所以如果有人有更好的描述，请编辑它。

我使用自定义属性锚定元素如下（更新：根据@Rune解决方案和@Shauna评论）

<a href="#" class="call-method" data-url="/Pages/mustafa/test_dialoge.aspx/GetDate" data-data="" data-success="handleResult">call me</a>

数据网址，数据数据，数据成功和数据错误是自定义属性

然后我使用以下代码片段将一些脚本附加到它

$('.call-method').live('click', function () {

    var obj = $(this);
    var options = new Object();

    options.url = obj.attr('data-url').toString();
    options.success = obj.attr('data-success');
    options.error = obj.attr('data-error');
    options.complete = obj.attr('data-complete');

    var _options = JSON.stringify(options);

    callServerGetMethod(_options);

});


  var callServerGetMethod = function (options) {
    var _options = new Object();
    var self = this;
    if (typeof options === 'string') {
      _options = JSON.parse(options, function (key, value) {
        if (typeof self[value] === 'function') {
          return eval(self[value]);
        }
        return value;
      });
    }

    $.ajax(
      {
        type: "post",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        async: true,
        cache: false,
        error:
          function (xhr, ajaxOptions, thrownError) {
            console.log(xhr.statusText);
            console.log(thrownError);
          }
      }, $.extend(_options));
  };

现在我在浏览器控制台中出现以下错误

SyntaxError {popStackFrame: function}
arguments: Array[1]
get message: function () { [native code] }
get stack: function () { [native code] }
set message: function () { [native code] }
set stack: function () { [native code] }
type: "unexpected_token"
__proto__: Error
arguments: undefined
constructor: function SyntaxError() { [native code] }
name: "SyntaxError"
stack: undefined
type: undefined
__proto__: d

Answer 1

您正在将字符串而不是函数传递给ajax选项，这就是它无法正常工作的原因。

在您的示例中，您可能已经写过

callServerGetMethod(url, data, function(msg) {
      alert("error " + msg);
    },
      function() {
        alert('comepleted');
      }
    , "handleSuccess");

注意最后一个参数是一个普通的字符串

相反，您必须传递一个函数，最常见的方法是使用JavaScript而不是自定义属性附加函数。

根据您对数据属性的处理方式，您可以使用该属性。

<a href="#" 
   class="call-method" 
   options="{url: "/Pages/mustafa/test_dialoge.aspx/GetDate",data:{param1: 1, param2: 2}, success:handleResult,error:doOnError}"
>call me</a>

var callServerGetMethod = function (options) {
    var self = this;
    if(typeof options === 'string'){
      options = JSON.parse(options,function (key, value) {
         if (typeof self[value] === 'function') {
            return self[value];
         }
         return value;
      });
    }
    $.ajax($.extend({type: "POST"},options);
};

如果您不能像这样使用数据属性，那么只需根据属性值构造options参数

var call = function (url, data, onError, onComplete, onSuccess) {
    return callServerGetMethod('{"url":"' + url +'","data":' + data + ',"error":"' + onError + '","success":"' + onSuccess'"}');
}

或者，您可以定义一个函数将字符串转换为已定义的函数

var string2function = function string2function(functionName){
     if (typeof functionName === 'function') return functionName;

     if(typeof functionName === 'string'){
         if (typeof self[functionName] === 'function') {
            return self[functionName];
         }
     }
     return null;
}

然后像这样使用它

options.success = string2function（obj.attr（＆＃39; data-success＆＃39;））;

理论上，您可以对属性值使用eval，但通常会鼓励它避免使用eval，因为与该功能相关的潜在风险很多

在jquery ajax中将函数名称作为字符串传递

1 个答案: