将查询结果传递给ajax回调

Question

我正在进行实时搜索，用户在文本框中键入内容，然后通过 ajax 结果被提取并添加到 ul 中，在这种特定情况下，我正在寻找用户名，所以如果用户名是 johnny并且用户输入jo 然后johnny 应该出现等等。

我有 ajax js 代码、一个 post 方法和一个用户列表模型视图，我现在正试图返回列表但似乎不起作用。

我的js：

$("input#searchtext").keyup(function (e) {

    var searchVal = $("input#searchtext").val();

    var url = "/profile/LiveSearch";

    $.post(url, { searchVal: searchVal }, function (data) {
console.log(data);
    });

});

LiveSearch 视图模型

public class LiveSearchUserVM
    {
        public LiveSearchUserVM()
        {
        }

        public LiveSearchUserVM(UserDTO row)
        {
            FirstName = row.FirstName;
            LastName = row.LastName;
        }

        public string FirstName { get; set; }
        public string LastName { get; set; }
    }

post 方法

[HttpPost]
        public List<string[]> LiveSearch(string searchVal)
        {
            // Init db
            Db db = new Db();

            List<LiveSearchUserVM> usernames = db.Users.Where(x => x.Username.Contains(searchVal)).Select(x => new LiveSearchUserVM(x)).ToList();

            return usernames;
        }

所以基本上我想返回包含特定字符串的列列表（或其他内容），并将所有结果通过 ajax 回调传递给 javascript。

Answer 1

要以 JSON 格式返回结果，请将您的方法更改为以下内容：

[HttpPost]
public JsonResult LiveSearch(string searchVal)
{
    // Init db
    Db db = new Db();

    List<LiveSearchUserVM> usernames = db.Users.Where(x => x.Username.Contains(searchVal)).Select(x => new LiveSearchUserVM(x)).ToList();

    return Json(usernames);
}

Answer 2

你可以这样使用。这个想法是使用成功函数

   $.ajax({
url : ""/profile/LiveSearch"",
type: "POST",
data : searchVal ,
success: function(data)
{
    //data - response from server
},
error: function ()
{

}
});

并从 Post 方法返回 JsonResult