问题遇到的现象和发生背景
控制器返回json对象数据,如何在视图页实现异步刷新,而不是跳转出json的值
问题相关代码,请勿粘贴截图
<div>
<div id="loading" style="display:none">保存更新中......</div>
<div id="Updated"></div>
<p id="content"></p>
</div>
<script type="text/javascript">
function next_step() {
// 通过form表单的id获得form表单的对象(也就是把form表单转换成对象)
var goodsForm = new FormData(document.getElementById("formID"));
$.ajax({
url: "/Post/Edit",
type: 'post', //上传文件不能用get请求,只能用post或者put等上传大文件的请求
//这里的数据是上面的form表单对象
data: goodsForm,
dataType: 'json',
processData: false,
contentType: false,
async: true,//异步
success: function (data) {
console.log(data);//将返回的值打印出来
alert(data.Title);
str = "";
str += " <h2 style='text-align:center'>" + data.Title + "</h2>";
str = " <p style='color:dimgrey'>" + data.Type + " 发布时间:" + data.ReleaseTime + " 最近更新时间:" + data.UpdateTime + "</p ><hr />";
str = " <p style='font-size:16px'>" + data.Content + "</p>";
str = "<div style='text - align: center; border: 10px'> <img src='"+data.Illustration+"' style='width:600px ' /></div>";
$("#Updated").append(str);
var xm = data.Content;
$("#content").text(xm);
alert(data.Content);
},
error: function (e) {
alert("请重新上传图片");
}
});
}
</script>
运行结果及报错内容
数据传递过来了,但是会跳转出一个页面只显示json的值
我的解答思路和尝试过的方法
我想要达到的结果
在视图页修改数据点击保存更新后实现局部刷新