使用Jquery和Ajax返回数据

Question

使用Jquery和Ajax返回数据

3

我正在编写一个网页上的函数，当你输入序列号时，它会在 SQL 数据库中查找与该序列号对应的零件型号。目前，JsonResult 可以正常工作并找到正确的信息，但是 jQuery 和 Ajax 出现了问题，因为在单击序列号框之外（模糊状态），它不会显示出来（尽管触发了）。

以下是控制器代码：

    public JsonResult SerialNumberSearch(string serialnum)
    {
        var result = db.IASerialNoMasters.Where(x => x.SerialNo == serialnum).Select(x => x.Model).Single().ToString();

        return Json(result, JsonRequestBehavior.AllowGet);
    }

这是我目前在视图上拥有的脚本。

<script type="text/javascript">
    var serialnum;
    var url = '@Url.Action("SerialNumberSearch", "WarrantyRegistration")'
    $("#SerialNum").blur(function () {
        GetLiftModel();
    });
    function GetLiftModel() {
        serialnum = $("#SerialNum").val();
        $.ajax({
            type: "GET",
            url: url,
            data: { serialnum: serialnum },
            success: function(data) {
                $('#ModelName').val(data.Model);
            }
        })
    }
</script>

以下是“视图”中文本框的代码。

        <div class="row">
            @Html.TextBoxFor(model => model.SerialNum, new { placeholder = "Serial #" })
            @Html.ValidationMessageFor(model => model.SerialNum, null, new { @class = "text-danger" })
        </div>

        <br />

        <div class="column-1">
            @Html.TextBoxFor(model => model.ModelName, new { placeholder = "Model" })
            @Html.ValidationMessageFor(model => model.ModelName, null, new { @class = "text-danger" })
        </div>

有人能告诉我代码中GetLiftModel函数区域缺少什么吗？

- bubbajake00

2个回答

1

你确定要显示data.Model吗？如果你返回JsonResult，那么data变量实际上代表你的序列号，所以很可能data.Model实际上是undefined。尝试将其更改为：

$.ajax({
         type: "GET",
         url: url,
         data: { serialnum: serialnum },
         success: function(data) {
             $('#ModelName').val(data);
          }
       })

另一方面，基于事实，您只返回了字符串，没有理由返回JsonResult。您可以更改控制器方法的签名为：

public JsonResult SerialNumberSearch(string serialnum)
{
    var result = db.IASerialNoMasters
                   .Where(x => x.SerialNo == serialnum)
                   .Select(x => x.Model).Single().ToString();
    return result;
}

- Jaroslav Kadlec

这最终起作用了，谢谢！我已经卡在这里几个小时了。我刚刚测试了一下，它带来了正确的部分。 - bubbajake00

不用谢。我还建议您考虑一下LINQ查询。如果没有匹配的序列号怎么办？现在你正在抛出异常，而你可以让客户端知道并优雅地将其显示在UI上。 - Jaroslav Kadlec

哦，是的，我刚刚完成了编码。在开始使代码变得更加复杂之前，我只是担心数据能否首先传递过来。 - bubbajake00

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rion Williams · Accepted Answer

这最终取决于您想要访问什么以及是否需要访问多个属性：

- 需要单个属性吗？如果您只需要一个属性，那么您应该能够像当前代码一样隔离该属性并仅传递该属性。 - 需要多个属性吗？然后，您可能需要从SerialNumberSearch()方法返回整个对象或至少部分对象。

返回单个属性

您当前的代码具有最终的ToString()调用，这似乎表明您将仅返回单个属性，在本例中为Model属性：

var result = db.IASerialNoMasters
               .Where(x => x.SerialNo == serialnum)
               .Select(x => x.Model)
               .Single()
               .ToString(); // This returns a string

既然是这种情况，你返回的data对象已经包含了特定的属性，因此你只需要像下面所示使用data即可：

success: function(data) {
    // data will already contain your result, so just use it
    $('#ModelName').val(data);
}

返回多个属性或对象图

如果您希望能够从JSON中访问对象的多个属性，您需要返回对象本身，并让序列化程序处理将其传递给JavaScript，以便按预期使用：

public JsonResult SerialNumberSearch(string serialnum)
{
    var result = db.IASerialNoMasters
                   .SingleOrDefault(x => x.SerialNo == serialnum);;
    if(result == null)
    {
         // Do something if it doesn't exist
         return HttpNotFound();
    }
    return Json(result, JsonRequestBehavior.AllowGet);
}

然后在你的JavaScript代码中从data对象中访问所需的属性：

success: function(data) {
   // data will already contain your result, so just use it
   $('#ModelName').val(data.Model);
}