Question

我正在尝试编写ajax用户搜索。我有这个文本字段：

<input type="text" id="userSearch" class="search-query" placeholder="Search">

这个jQuery适用于.js文件：

$("#userSearch").keyup(function () {
        if ($(this).val().length >= 3) {
            $.getJSON('/User/SearchUsers', { displayName: $(this).val() }, function (data) {
                if (data == null) {
                    alert("nothing");
                }
                else{
                    alert("OK");
                }
            });
        }
    });

以下是UserController和Application以及Repository类：

[HttpGet]
public ActionResult SearchUsers(string displayName)
{
    return Json(userApp.GetUserBySearch(displayName), JsonRequestBehavior.AllowGet);
}

public List<User> GetUserBySearch(string displayName)
{
    return userRepo.GetUserBySearch(displayName);
}

public List<User> GetUserBySearch(string displayName)
{
    return context.Users.Include("Group").Where(u => u.DisplayName.Contains(displayName)).ToList();
}

但这根本不起作用。它根本没有警报。那是什么意思？这意味着数据为空且不为空？！我也试过这个：

var i = 0;
for (i = 0; i <= data.length; i++) {
    alert(data[i].UserId);
}

但它也没有用。我做过这样的事已经有好几千次，但是现在它还没有工作...... 我该怎么做...？

Answer 1

我建议使用Fiddler来测试浏览器和服务器之间发生的情况。

我还建议使用.ajax而不是这样，它允许你更明确地捕获服务器上发生的错误：

var URL = 'yourURLGoesHere';
$.ajax({
    url: URL, type: "post", data: yourdata, dataType: 'json', contentType: "application/json",
    success: function (data, status, jqXHR) {
        console.log('status:', status);
        console.log('jqXHR:', jqXHR);
        console.log('data:', data);
        if (data) {
            //do your OK Stuff
        } else {
            //do your NOT OK Stuff
        }
    },
    error: function (data, status, jqXHR) {
        console.log('responseText:', data.responseText);
        //do your error stuff

    }
});

<强>更新

看起来主要的问题是你如何向服务器发送数据。

如果您没有看到500错误的详细信息，则表示您正在使用WebAPI并且尚未将其设置为向您显示错误详细信息。如果是这种情况，这link可能会有所帮助。

以下是使用.ajax（）并将displayName放入查询字符串的代码的更新版本 - 主要优点是您可以捕获错误事件并相应地处理它。

$("#userSearch").keyup(function () {
    if ($(this).val().length >= 3) {
        var URL = '/User/SearchUsers/?displayName=' + encodeURIComponent($(this).val());
        $.ajax({
            url: URL, type: "post", dataType: 'json', contentType: "application/json",
            success: function (data, status, jqXHR) {
                console.log('status:', status);
                console.log('jqXHR:', jqXHR);
                console.log('data:', data);
                if (data) {
                    //do your OK Stuff
                } else {
                    //do your NOT OK Stuff
                }
            },
            error: function (data, status, jqXHR) {
                console.log('responseText:', data.responseText);
                //do your error stuff

            }
        });
    }
});

Answer 2

将您的代码放入ready事件

中

$(document).ready(function(){
    $("#userSearch").keyup(function () {
        var value = $(this).val();    
        if (value.length >= 3) {
            $.getJSON('/User/SearchUsers', { displayName: value }, function (data) {
                if (data == null) {
                    alert("nothing");
                }
                else{
                    alert("OK");
                }
            });
        }
    });
});

JQuery ajax在这里返回什么？

2 个答案: