来自服务器端的 JSON 字符串无法正确使用 ajax jquery

Question

我正在做的是，我正在使用 mvc 从服务器端获取数据。数据正确地返回部分。 但是当我在客户端调试时，我只得到[的参数值。

下面是我得到的 JSON 响应。

[{"VENDORNAME":"ABC","VENDORCODE":"1234"},{"VENDORNAME":"Abc test","VENDORCODE":"233311"},{"VENDORNAME":"ABC 2","VENDORCODE":"12345"}]

但是当我签入客户端时，我只在参数中得到 [。

下面是代码

getValue: function (element) {        
        return {
            label: element.VENDORNAME,
            value: element.VENDORCODE
         };
    },  

在element 我只得到[

请指出我哪里错了

更新

这是完整的代码

var autocompleteOptions = {        

    url: function (phrase) {
        return AppConfig.PrefixURL + 'App/GetVendorData';
    },

    getValue: function () {        
        return {
            label: element.VENDORNAME,
            value: element.VENDORCODE
         };
    },      

    ajaxSettings: {
        dataType: "json",
        method: "POST",
        data: {
            dataType: "json",                
        }
    },        

    preparePostData: function (data) {
        data.phrase = $("#txtAssignVendor").val();           
        return data;
    },

    requestDelay: 400
};

以及下面的参考链接

http://easyautocomplete.com/examples#examples-ddg

服务器代码

[HttpPost]
    public JsonResult GetVendorData(string phrase)
    {
        string strJsonData = "";
        try
        {
            Assignment ObjSAPAssign = new Assignment();
            DataTable dt = ObjSAPAssign.GetVendorList(phrase);               
            strJsonData = JsonConvert.SerializeObject(dt, Formatting.None);                
        }
        catch (Exception ex)
        {
            ApplicationLog.Error("Error", "GetVendorData", ex.Message);
            ErrorLog.HandleErrorLog("", "", "GetVendorData", ex.Message);
        }
        return Json(strJsonData);
    }

Answer 1

错误是您将DataTable 序列化了两次，一次是通过JsonConvert.SerializeObject()，另一次是通过Json() 方法。

---

制作这样的模型类：

public class VendorData 
{ 
    public string VENDORNAME { get; set; } 
    public string VENDORCODE { get; set; } 
}

---

这是修改后的操作方法

[HttpPost] 
public JsonResult GetVendorData(string phrase) 
{ 
    try 
    { 
        Assignment ObjSAPAssign = new Assignment(); 
        DataTable dt = ObjSAPAssign.GetVendorList(phrase); 
        List<VendorData> vendorList = dt.AsEnumerable().Select(row => new VendorData 
        { 
            VENDORNAME = row.Field<string>("VENDORNAME"), 
            VENDORCODE = row.Field<string>("VENDORCODE") 
        }).ToList();

        // Serializing only once 
        return Json(vendorList, JsonRequestBehavior.AllowGet); 
    } 
    catch (Exception ex) 
    { 
        ApplicationLog.Error("Error", "GetVendorData", ex.Message); 
        ErrorLog.HandleErrorLog("", "", "GetVendorData", ex.Message); 
        return Json(new object(), JsonRequestBehavior.AllowGet); 
    } 
}

---

最后在客户端：

var autocompleteOptions = { 

url: function (phrase) { 
    return AppConfig.PrefixURL + 'App/GetVendorData'; 
}, 

getValue: "VENDORNAME", 

template: { 
    type: "description", 
    fields: { 
    description: "VENDORCODE" 
    } 
}, 

list: { 
    match: { 
        enabled: true 
    } 
}, 

ajaxSettings: { 
    dataType: "json", 
    method: "POST", 
    data: { 
        dataType: "json", 
    } 
}, 

preparePostData: function (data) { 
    data.phrase = $("#txtAssignVendor").val(); 
    return data; 
}, 

requestDelay: 400 
};

Answer 2

您的服务器代码：

    string strJsonData = "";
    try
    {
        Assignment ObjSAPAssign = new Assignment();
        DataTable dt = ObjSAPAssign.GetVendorList(phrase);               
        strJsonData = JsonConvert.SerializeObject(dt, Formatting.None);                
    }
    catch (Exception ex)
    {
        ApplicationLog.Error("Error", "GetVendorData", ex.Message);
        ErrorLog.HandleErrorLog("", "", "GetVendorData", ex.Message);
    }
    return Json(strJsonData);

您在 dt 中构建供应商列表，然后使用 JsonConvert.SerializeObject() 构建响应 JSON。但是，您在最后一次调用Json() 时再次对其进行序列化。应该很简单

    return strJsonData;

这就是为什么您将[ 作为第一个“元素”：自动完成插件将您的 JSON 作为 字符串 进行迭代。如果您更改 return 语句，它将正确接收您的实际表格。

edit — 我很确定上面描述了问题，但我的建议不起作用，因为 strJsonData 是错误的数据类型（不是 JsonResult）。基于this other question，我认为这可能有效：不要使用JsonConvert.SerializeObject。相反，使用普通的Json():

    DataTable dt;
    try
    {
        Assignment ObjSAPAssign = new Assignment();
        dt = ObjSAPAssign.GetVendorList(phrase);               

    }
    catch (Exception ex)
    {
        ApplicationLog.Error("Error", "GetVendorData", ex.Message);
        ErrorLog.HandleErrorLog("", "", "GetVendorData", ex.Message);
    }
    return Json(dt, JsonRequestBehavior.AllowGet);                

（请注意，我并不真正了解 C# - 关键是您必须使用 Json() 从 DataTable 获取 JsonResult。）

现在，一旦解决了问题，并且自动完成插件正确接收了数组，接下来要决定如何处理 getValue() 函数。该插件期望处理 strings。在您的代码中，您让该函数返回一个对象，这只会混淆插件。

我不确定大型应用程序需要什么，但该函数可以执行以下操作：

      getValue: function(element) {
        return element.VENDORNAME + " - " + element.VENDORCODE;
      }