Javascript xhr请求多次调用

我正在创建一个个人资料页面，其中有一个使用图像标签的徽标。我需要通过单击图像并选择新的来更改徽标

当前实施：

<div align="center">
  @using (Ajax.BeginForm("UpdateImage", "Account", null, new AjaxOptions { HttpMethod = "POST", OnSuccess = "successImage" }, new { enctype = "multipart/form-data" }))
   {
    <img alt="User Pic" src="@Model.user.ImagePath" id="profile-image1" class="img-circle img-responsive">
    <input id="profile-image-upload" name="image" class="hidden" type="file" onchange="$(this).closest('form').submit();">
    <div id="imageError" class="field-validation-error" style="height:100%; display:none;">click here to change image</div>                               
   }
 </div>

$(function () {
 $("form").submit(function (e) {
 e.preventDefault();
 var form = e.target;
 if (form.getAttribute("enctype") === "multipart/form-data") {
    var file = $(form).find('#profile-image-upload');
    if (!validateImage(file)) {
        return false;
    }
    if (form.dataset.ajax) {
      e.stopImmediatePropagation();
      var xhr = new XMLHttpRequest();
      xhr.open(form.method, form.action);
      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
      xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        var result = JSON.parse(xhr.response);
        successIamge(result);
        return false;
      }
    };
    xhr.send(new FormData(form));
    }
  }
 });

$('#profile-image1').on('click', function () {
  $('#profile-image-upload').click();
});

function successImage(result) {
  if (!result || !result.resultCode) return; //If result is null not handled or Validation handled via ModelState
  if (result.resultCode == 1) {
    // $('profile-image1').attr('src', result.resultValue);
     location.reload();
        }
  else {
     location.href = "/Error/Index?errorMessage=" + result.resultMessage;
        }
 }

我使用文件上传控件并隐藏元素

当用户点击logo时，我调用了文件上传的点击事件

在文件上载控件的onChange事件中，我提交关闭表单

我跟踪表单提交事件，并使用xhr请求发送带有图像的Ajax帖子

Html代码：

<div align="center">
  @using (Ajax.BeginForm("UpdateImage", "Account", null, new AjaxOptions { HttpMethod = "POST", OnSuccess = "successImage" }, new { enctype = "multipart/form-data" }))
   {
    <img alt="User Pic" src="@Model.user.ImagePath" id="profile-image1" class="img-circle img-responsive">
    <input id="profile-image-upload" name="image" class="hidden" type="file" onchange="$(this).closest('form').submit();">
    <div id="imageError" class="field-validation-error" style="height:100%; display:none;">click here to change image</div>                               
   }
 </div>

$(function () {
 $("form").submit(function (e) {
 e.preventDefault();
 var form = e.target;
 if (form.getAttribute("enctype") === "multipart/form-data") {
    var file = $(form).find('#profile-image-upload');
    if (!validateImage(file)) {
        return false;
    }
    if (form.dataset.ajax) {
      e.stopImmediatePropagation();
      var xhr = new XMLHttpRequest();
      xhr.open(form.method, form.action);
      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
      xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        var result = JSON.parse(xhr.response);
        successIamge(result);
        return false;
      }
    };
    xhr.send(new FormData(form));
    }
  }
 });

$('#profile-image1').on('click', function () {
  $('#profile-image-upload').click();
});

function successImage(result) {
  if (!result || !result.resultCode) return; //If result is null not handled or Validation handled via ModelState
  if (result.resultCode == 1) {
    // $('profile-image1').attr('src', result.resultValue);
     location.reload();
        }
  else {
     location.href = "/Error/Index?errorMessage=" + result.resultMessage;
        }
 }

当前问题：

<div align="center">
  @using (Ajax.BeginForm("UpdateImage", "Account", null, new AjaxOptions { HttpMethod = "POST", OnSuccess = "successImage" }, new { enctype = "multipart/form-data" }))
   {
    <img alt="User Pic" src="@Model.user.ImagePath" id="profile-image1" class="img-circle img-responsive">
    <input id="profile-image-upload" name="image" class="hidden" type="file" onchange="$(this).closest('form').submit();">
    <div id="imageError" class="field-validation-error" style="height:100%; display:none;">click here to change image</div>                               
   }
 </div>

$(function () {
 $("form").submit(function (e) {
 e.preventDefault();
 var form = e.target;
 if (form.getAttribute("enctype") === "multipart/form-data") {
    var file = $(form).find('#profile-image-upload');
    if (!validateImage(file)) {
        return false;
    }
    if (form.dataset.ajax) {
      e.stopImmediatePropagation();
      var xhr = new XMLHttpRequest();
      xhr.open(form.method, form.action);
      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
      xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        var result = JSON.parse(xhr.response);
        successIamge(result);
        return false;
      }
    };
    xhr.send(new FormData(form));
    }
  }
 });

$('#profile-image1').on('click', function () {
  $('#profile-image-upload').click();
});

function successImage(result) {
  if (!result || !result.resultCode) return; //If result is null not handled or Validation handled via ModelState
  if (result.resultCode == 1) {
    // $('profile-image1').attr('src', result.resultValue);
     location.reload();
        }
  else {
     location.href = "/Error/Index?errorMessage=" + result.resultMessage;
        }
 }

进程成功运行，但在响应映像后，再次触发post请求

我做过的工作：

<div align="center">
  @using (Ajax.BeginForm("UpdateImage", "Account", null, new AjaxOptions { HttpMethod = "POST", OnSuccess = "successImage" }, new { enctype = "multipart/form-data" }))
   {
    <img alt="User Pic" src="@Model.user.ImagePath" id="profile-image1" class="img-circle img-responsive">
    <input id="profile-image-upload" name="image" class="hidden" type="file" onchange="$(this).closest('form').submit();">
    <div id="imageError" class="field-validation-error" style="height:100%; display:none;">click here to change image</div>                               
   }
 </div>

$(function () {
 $("form").submit(function (e) {
 e.preventDefault();
 var form = e.target;
 if (form.getAttribute("enctype") === "multipart/form-data") {
    var file = $(form).find('#profile-image-upload');
    if (!validateImage(file)) {
        return false;
    }
    if (form.dataset.ajax) {
      e.stopImmediatePropagation();
      var xhr = new XMLHttpRequest();
      xhr.open(form.method, form.action);
      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
      xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        var result = JSON.parse(xhr.response);
        successIamge(result);
        return false;
      }
    };
    xhr.send(new FormData(form));
    }
  }
 });

$('#profile-image1').on('click', function () {
  $('#profile-image-upload').click();
});

function successImage(result) {
  if (!result || !result.resultCode) return; //If result is null not handled or Validation handled via ModelState
  if (result.resultCode == 1) {
    // $('profile-image1').attr('src', result.resultValue);
     location.reload();
        }
  else {
     location.href = "/Error/Index?errorMessage=" + result.resultMessage;
        }
 }

从guest271314问题中，我发现我不能阻止默认表单提交。因此，现在在提交中添加了阻止默认值。我更改了上面的源代码。 现在图片没有更新为新图片，我从上传中得到了回复。所以现在我改变了SuccessLogo方法来重新加载页面，得到了新的图像

---

现在，请建议使用其他方法更新图像而不重新加载页面

您所说的“再次启动post请求”是什么意思？

是否设置了

数据ajax

属性？您是否已阻止表单提交的默认操作？

successImage

调用了两次吗？；在

OnSuccess=“successImage”

和

onchange=“$（this）.closest（'form'）.submit（）；

？我的意思是在成功上传图像后再次启动post方法。因此再次上传图像。很抱歉，您阻止了默认操作。实际上，当表单提交时，如果我使用e.preventDefault（），我使用自定义代码附加图像在xhr.send（）之后方法，上载的图像没有显示在图像标记中。但是所有其他成功您似乎调用了两次

successImage

？@guest271314，ajax post调用了两次。原因是我没有像您所说的那样阻止默认sumit。但是我的json响应有新的图像路径，并且没有更新徽标图像。这里我需要将页面重新发布到获取新的。还有其他选项吗？我在问题中更新了此详细信息“再次启动post请求”是什么意思？

是否设置了

数据ajax

属性？是否阻止表单提交的默认操作？是否调用了两次

成功图像

；at

OnSuccess=“成功图像”“

和

onchange=“$（this）.closest（'form'）.submit（）；

？我的意思是在成功上传图像后再次启动post方法。因此再次上传图像。很抱歉，您阻止了默认操作。实际上，当表单提交时，如果在xhr.send（）之后使用e.preventDefault（），我使用自定义代码附加图像方法，上载的图像没有显示在图像标记中。但是所有其他成功您似乎调用了两次

successImage

？@guest271314，ajax post调用了两次。原因是我没有像您所说的那样阻止默认sumit。但是我的json响应有新的图像路径，并且没有更新徽标图像。这里我需要将页面重新发布到买一个新的。还有其他选择吗？我在问题中更新了这个细节