如何使用eval向jQuery ajax调用注入其他数据

Question

我正在开发一个通用的自动完成功能，用于从数据库中选择值（请考虑从产品名称列表中选择一个ProductID）

由于某些类型需要额外的参数来过滤和验证列表，我在输入中有一个data-params字段来从表单中捕获数据（或修复）

我正在尝试在输入中使用此语法data-params='{ProductType1: $("#ProductType1"), ProductType2: $("#ProductType2")}'来提供ajax调用但我收到此错误：Uncaught SyntaxError: Unexpected token :

仅使用1个参数正常工作：
data-params='{ProductType1: $("#ProductType1")}'

jsBin让你尝试

http://jsbin.com/atamez/1/edit

这是html

<form>
    <input type="text" id="ProductType1" name="ProductType1" value="123">
    <input type="text" id="ProductType2" name="ProductType2" value="456">
<p>
    <span class="superlist">
    <input type="hidden" id="ProductID" name="ProductID" value="0">
    <input type="text" id="Product" name="Product" value="" style="Width: 150px;" 
         class="superlistinput" 
         data-controller="Products" 
      data-params='{ProductType1: $("#ProductType1"), ProductType2: $("#ProductType2") }'>
  </span>
  </p> 
</form> 

的Javascript

$(function () {
    $('.superlistinput').each(function (i, el) {
        dosuperlistinput(el);
    });
});

function dosuperlistinput(el) {
    el = $(el);
    el.autocomplete({
        minLength: 0,
        source: function(request, response) {
            $.ajax({
              url: '/' + el.data("controller") + '/Lista/?term=' + request.term,
                dataType: 'json',
                data: eval(el.data("params")),
                success: function(data) {
                    response(data);
                }
            });
        },
        select: function (event, ui) {
            el.prev().val(ui.item.ID);
            el.val(ui.item.Nombre);
            return false;
        },
        change: function (event, ui) {
            el.removeClass('superlistinvalid');
            if (!ui.item) {
                var valoractual = el.val();
                $.getJSON('/' + el.data("controller") + '/ListaValidar/' + valoractual,
                    eval(el.data("params")),
                    function (json) {
                        var valid = false;
                        if (json.length > 0) {
                            el.prev().val(json[0].ID);
                            el.val(json[0].Nombre);
                            valid = true;
                        }
                        if (!valid) {
                            // it didn't match anything
                            el.addClass('superlistinvalid');
                            el.prev().val("0");
                        }
                        return false;
                    }
                );
            }
        }
    })
    .data("autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
          .data("item.autocomplete", item)
          .append('<a>' + item.Nombre + (item.ExtraInfo === null ? '' : '<div><i>' + item.ExtraInfo + '</i></div>') + '</a>')
          .appendTo(ul);
    };

    el.keyup(function (event) {
        if (event.keyCode != '13' && event.keyCode != '9') {
            el.prev().val(0).trigger('change');
        }
    });

    addbuttonautocomplete(el);

}

function addbuttonautocomplete(el) {
    el = $(el);
    $('<button type="button">&nbsp;</button>')
        .attr('tabIndex', -1)
        .attr('title', 'Mostrar todos los items')
        .insertAfter(el)
        .button({
            icons: {
                primary: 'ui-icon-triangle-1-s'
            },
            text: false
        })
        .removeClass('ui-corner-all')
        .addClass('ui-corner-right ui-button-icon autocompletebutton')
        .click(function (event) {
            event.preventDefault();

            // close if already visible
            if (el.autocomplete('widget').is(':visible')) {
                el.autocomplete('close');
                return;
            }

            el.autocomplete('search', '');
            el.focus();
        });
}

Answer 1

类似于使用eval执行JSON的方式（在本地JSON对象出现之前），您需要在要尝试解析的字符串周围添加括号，如下所示：

data: eval("("+eval(el.data("params"))+")")

话虽如此，必须有更好的方法来做你想做的事情。也许你可以把元素的ID放在data属性中并从实际的JavaScript中调用一些东西？

Answer 2

我认为你这一切都错了，你不应该使用代码来表示动态数据只是使用数据。例如，存储要从中获取值的元素的id（也就是现在你如何获得它只是一个jQuery元素）例如
data-params='{"ProductType1": "#ProductType1", "ProductType2": "#ProductType2"}'

现在您可以检索属性并设置值。

var data = {};
var params = el.data("params");
for (var prop in params){
    data[prop] = $(params[prop]).val();
}
...
    data:data,
...