控制器返回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的值
在视图页修改数据点击保存更新后实现局部刷新
题主如何调用next_step的?
看题主描述应该是放在表单中input type='submit'或者button(未添加type=button默认也是提交按钮),这样导致表单提交了,应该阻止表单提交
改成下面这种模式
<form onsubmit="return false;"
或者
<input type='submit' onclick='return next_step() '...../>
function next_step() {
//原来的代码
return false;////////////////阻止表单提交,这个方式的话得看
}
有帮助请【采纳该答案】,谢谢~~有其他问题可以继续交流~
$("#content").text(xm);
改为
$("#content"). html(xm);