Question

我想在填写文本框后立即显示图片，不需要点击任何按钮来获取图片。

我在我的观点中这样做了：

@using (Html.BeginForm())
{
    <input value="" id="UserID" name="UserID" type="text" class="form-control" />
    <img id="CaptchaImg" alt="Captcha" src="@Url.Action("showFoto", "loan")" style="" />
}
<script language="javascript" type="text/javascript">
    $.ajax({
        type: "POST",
        url: '@Url.Action("showFoto", "loan")',
        datatype: "image/jpg",
        success: function (UserID) {
            $('#CaptchaImg').attr('src', UserID);
        }
    });
</script>

在我的控制器Loan.cs中：

[HttpPost]
public string showFoto(string UserID)
{
   string ImageID = UserID;
   var virtualPath = string.Format("~/images/profile/{0}.jpg", ImageID);
   if (System.IO.File.Exists(Server.MapPath(virtualPath)))
   {
      return virtualPath;
   }
   return null;
}

我的资料来自：get a image through jquery ajax 请，需要你的帮助......谢谢！

Answer 1

更改脚本以处理文本框的.change事件，并将其值传递给服务器方法（请注意，当文本框失去焦点时会发生change事件）

$('#UserID').change(function() {
  $.ajax({
    type: "GET",
    url: '@Url.Action("showFoto", "loan")',
    data: { userID: $(this).val() }, // pass the value of the textbox to the method
    datatype: "image/jpg",
    success: function (UserID) {
        $('#CaptchaImg').attr('src', UserID);
    }
  });
});

填充文本框后立即显示图像

1 个答案: