Jquery Ajax 要求下载 JSON 文件而不是进入成功块
Posted
技术标签:
【中文标题】Jquery Ajax 要求下载 JSON 文件而不是进入成功块【英文标题】：Jquery Ajax asks to download JSON file instead of going into success block 【发布时间】：2020-05-06 07:12:47 【问题描述】：我正在尝试将一个 excel 文件上传到 MVC5 中的数据库，这成功发生了，它应该显示已上传的数据。我在单个操作方法中执行这两个操作
public ActionResult UploadExcel(HttpPostedFileBase file)
//logic to upload and get uploaded data into a DataTable "dataLoadedTable"
..
..
string JSONresult;
JSONresult = JsonConvert.SerializeObject(dataLoadedTable);
return Json(JSONresult, JsonRequestBehavior.AllowGet);
然后我尝试使用 jquery ajax 获取这些数据，如下所示 -
$("#formId").on("submit", function ()
$.ajax
(
url: 'UploadExcel',
type:'POST',
datatype: 'application/json',
contentType: 'application/json; charset=utf-8',
success: function (response)
alert(response);
,
error: function (xhr, status, error)
alert(xhr.responseText);
alert(status);
alert(error);
);
但在运行代码时，页面要求将数据下载为 json 文件，而不是进入成功块。最初，我认为这是因为数据很大。即使这样也行不通 -
success: function (response)
alert("hi");
,
我的 html -
@using System.Data
@model DataTable
@
ViewBag.Title = "Upload Excel";
Layout = "~/Views/Shared/_CommonLayout.cshtml";
<body>
@using (Html.BeginForm("UploadExcel", "UploadData", FormMethod.Post, new enctype = "multipart/form-data" ))
<form id="myDataForm">
<div>
<h4>Upload Data</h4>
<div class="card shadow">
<div class="p-5">
<label>Upload File:</label>
<div class="input-group mb-3">
<div class="custom-file">
<input type="file" name="file" autofocus="autofocus" class="custom-file-input" id="inputGroupFile02" />
<label class="custom-file-label" for="inputGroupFile02">Choose file</label>
</div>
<div class="input-group-append">
<button class="btn btn-primary" id="btnUploadData">Upload</button>
</div>
</div>
<script>
$('#inputGroupFile02').on('change', function ()
//get the file name
//var fileName = $(this).val();
var fileName = $(this).val().split('\\').pop();;
//replace the "Choose a file" label
$(this).next('.custom-file-label').html(fileName);
)
</script>
<!--Display Error Message-->
<div style="color:red;">@ViewBag.Message</div>
@if (!string.IsNullOrWhiteSpace(ViewData["Upload Success"] as String))
<div class="alert alert-success alert-dismissible fade show mt-3" role="alert">
@Html.ViewData["Upload Success"]
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
</div>
</form>
<table id="dataTable" class="table table-bordered table-striped">
<thead>
<tr>
<th>ABC</th>
<th>XYZ</th>
..
..
</tr>
</thead>
</table>
</body>
【问题讨论】：
【参考方案1】：您需要阻止提交表单。在传递给submit 处理程序的事件上调用preventDefault()：
$("#formId").on("submit", function(e)
e.preventDefault();
// your ajax here...
);
此外，您似乎没有在 AJAX 请求中发送任何data？我假设这是在您写出问题时意外删除的。
另外，顺便说一句，不要使用alert() 进行调试。它阻止浏览器并强制数据类型，这是数据一致性时最不需要的事情。请改用console.log() 或console.dir()。
【讨论】：
它仍然要求下载它。根本没有进入成功块。 好的，所以您的 AJAX 不会被发送。那么有几个可能的问题。一是您在页面中的 jQuery 代码太早了，因此 DOM 还没有准备好。将其放入 document.ready 处理程序以解决该问题。或者，您的#formId 表单没有该 id，或者有多个元素共享相同的 id`
尝试使用 document.ready 并更改表单 ID，但没有运气。
能否将 HTML 添加到问题中。
表单的id是#myDataForm，不是#formId【参考方案2】：
看起来下面的代码是问题所在。需要进一步调查原因 -
@using (Html.BeginForm("UploadExcel", "UploadData", FormMethod.Post, new enctype = "multipart/form-data" ))
我只是用常规的 html 表单替换它，然后在下面添加代码以在 javascript 中发布文件对象 -
var $file = document.getElementById('inputGroupFile02'),
$formData = new FormData();
if ($file.files.length > 0)
for (var i = 0; i < $file.files.length; i++)
$formData.append('file-' + i, $file.files[i]);
并在 ajax 调用中添加以下内容 -
data: $formData,
dataType: 'json',
contentType: false,
processData: false,
在控制器上，使用
获取文件对象 if (Request.Files.Count > 0)
foreach (string file in Request.Files)
var _file = Request.Files[file];
我认为 FormMethod.Post 和 ajax 帖子可能存在一些冲突。我可能是错的。请随时更正此问题并添加可能存在的问题。
【讨论】：
以上是关于Jquery Ajax 要求下载 JSON 文件而不是进入成功块的主要内容，如果未能解决你的问题，请参考以下文章
jquery ajax请求成功,但是进入了success,但是返回的数据data为空
jquery ajax请求成功,但是进入了success,但是返回的数据data为空