Javascript MVC:使用AJAX从控制器获取JSON数据失败

我正在尝试使用AJAX从控制器查询数据，我的控制器是：

[HttpGet]
public ActionResult GetTestStatus(string userName)
{
    var db = new SREvalEntities();
    var allTests = db.Tests
        .Where(x => string.Equals(x.Owner, userName))
        .Select(x => new { CreateDate = x.CreateDate, EndDate = x.EndDate, Status = x.Status })
        .OrderByDescending(x => x.CreateDate)
        .ToList();

    return Json(allTests, JsonRequestBehavior.AllowGet);
}

我在外部文件中的javascript代码是：

function Filter() {
    var userAlias = document.getElementById("UserAliasInput");
    var txt = "<tr><th>StartDate</th><th>EndDate</th><th>Status</th><th>Detail</th></tr>";
    $.ajax({
        url: '/TestStatus/GetTestStatus',
        type: "GET",
        dataType: "JSON",
        data: { userName: userAlias },
        success: function (results) {
            $.each(results, function (i, result) {
                txt += "<tr><td>" + result.CreateDate + "</td>";
                txt += "<td>" + result.EndDate + "</td>";
                txt += "<td>" + result.Status + "</td>";
                txt += "<td><a href=\"\">Goto</a></td></tr>";
            });
        }
    });
    $("#ShowDetail").html(txt);
}

---

我的页面永远不会改变。我怎样才能让它工作？谢谢。

因为您正在使用异步的

$.ajax（）

。因此，在从API返回值之前，将调用

$（“#showdail”）.html（txt）

您应该在每个块之后设置

html（）

function Filter() {
    var userAlias = document.getElementById("UserAliasInput");
    var txt = "<tr><th>StartDate</th><th>EndDate</th><th>Status</th><th>Detail</th></tr>";
    $.ajax({
        url: '/TestStatus/GetTestStatus',
        type: "GET",
        dataType: "JSON",
        data: { userName: userAlias.value }, //Use the value property here
        success: function (results) {
            $.each(results, function (i, result) {
                txt += "<tr><td>" + result.CreateDate + "</td>";
                txt += "<td>" + result.EndDate + "</td>";
                txt += "<td>" + result.Status + "</td>";
                txt += "<td><a href=\"\">Goto</a></td></tr>";
            });

            $("#ShowDetail").html(txt); //Move code to set text here
        }
    });    
}

函数过滤器（）{
var userAlias=document.getElementById（“UserAliasInput”）；
var txt=“StartDateEndDateStatusDetail”；
$.ajax({
url:“/TestStatus/GetTestStatus”，
键入：“获取”，
数据类型：“JSON”，
数据：{userName:userAlias.value}，//在此处使用value属性
成功：功能（结果）{
$。每个（结果，函数（i，结果）{
txt+=“”+result.CreateDate+“”；
txt+=“”+result.EndDate+“”；
txt+=“”+结果.状态+“”；
txt+=”；
});
$（“#showdail”）.html（txt）；//将代码移到此处设置文本
}
});    
}

尝试以下功能

function Filter() {
    var userAlias = $("#UserAliasInput").val();//change this
    var txt = "<tr><th>StartDate</th><th>EndDate</th><th>Status</th><th>Detail</th></tr>";
    $.ajax({
        url: '/TestStatus/GetTestStatus',
        type: "GET",
        dataType: "JSON",
        data: { userName: userAlias },
        success: function (results) {
            $.each(results, function (i, result) {
                txt += "<tr><td>" + result.CreateDate + "</td>";
                txt += "<td>" + result.EndDate + "</td>";
                txt += "<td>" + result.Status + "</td>";
                txt += "<td><a href=\"\">Goto</a></td></tr>";
            });
            $("#ShowDetail").html(txt);//place this in the success function
        }
    });
}

函数过滤器（）{
var userAlias=$（“#UserAliasInput”）.val（）；//更改此值
var txt=“StartDateEndDateStatusDetail”；
$.ajax({
url:“/TestStatus/GetTestStatus”，
键入：“获取”，
数据类型：“JSON”，
数据：{userName:userAlias}，
成功：功能（结果）{
$。每个（结果，函数（i，结果）{
txt+=“”+result.CreateDate+“”；
txt+=“”+result.EndDate+“”；
txt+=“”+结果.状态+“”；
txt+=”；
});
$（“#showdail”）.html（txt）；//将其放入success函数中
}
});
}

谢谢。我照你说的做了，但没用。我添加

警报（结果）在成功回调中，页面不给出响应。通过键入/TestStatus/GetTestStaus？userName=。。。我可以看到控制器返回的JSON。@OnceJune，请使用
{userName:userAlias.value}
抱歉再次打扰您。既然“$.ajax（）”是异步的，那么在同一个函数中返回“$.ajax（）”之后，我该怎么做呢？比如更新页面？谢谢你。@OnceJune，是的，你可以
function Filter() {
    var userAlias = $("#UserAliasInput").val();//change this
    var txt = "<tr><th>StartDate</th><th>EndDate</th><th>Status</th><th>Detail</th></tr>";
    $.ajax({
        url: '/TestStatus/GetTestStatus',
        type: "GET",
        dataType: "JSON",
        data: { userName: userAlias },
        success: function (results) {
            $.each(results, function (i, result) {
                txt += "<tr><td>" + result.CreateDate + "</td>";
                txt += "<td>" + result.EndDate + "</td>";
                txt += "<td>" + result.Status + "</td>";
                txt += "<td><a href=\"\">Goto</a></td></tr>";
            });
            $("#ShowDetail").html(txt);//place this in the success function
        }
    });
}