Redmonster0923 2021-12-04 19:36 采纳率: 33.3%
浏览 32
已结题

将Json对象数据中的内容局部刷新式显示在原页面

问题遇到的现象和发生背景

控制器返回json对象数据,如何在视图页实现异步刷新,而不是跳转出json的值

img

问题相关代码,请勿粘贴截图
<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 + "&nbsp;&nbsp;&nbsp;发布时间:" + data.ReleaseTime + "&nbsp; &nbsp; &nbsp;最近更新时间:" + 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的值

我的解答思路和尝试过的方法
我想要达到的结果

在视图页修改数据点击保存更新后实现局部刷新

img

  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2021-12-04 20:16
    关注

    题主如何调用next_step的?
    看题主描述应该是放在表单中input type='submit'或者button(未添加type=button默认也是提交按钮),这样导致表单提交了,应该阻止表单提交
    改成下面这种模式

    <form onsubmit="return false;"
    或者
    <input type='submit' onclick='return next_step() '...../>
     function next_step() {
    //原来的代码
    return false;////////////////阻止表单提交,这个方式的话得看
    }
    

    有帮助请【采纳该答案】,谢谢~~有其他问题可以继续交流~

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 12月12日
  • 已采纳回答 12月4日
  • 创建了问题 12月4日

悬赏问题

  • ¥15 TMC2209串口模式下读取不到寄存器的值串口助手蓝色字体是发过去的消息,绿色字体是收到的消息,第二行发送读取寄存器的指令但是没有读取到寄存器的值串口助手如下图:接线如下图,如何解决?
  • ¥15 高通安卓11提取完整线刷包软件,或者优博讯dt50顺丰刷机包
  • ¥20 C,有个译码器,换了信道就跑不出原来数据
  • ¥15 MIMIC数据库安装问题
  • ¥60 基于JTag协议开发Fpga下载器上位机,哪位大🐂有偿指导?
  • ¥20 全书网Java爬取数据
  • ¥15 怎么获取红包封面的原始链接,并且获取红包封面序列号
  • ¥100 微信小程序跑脚本授权的问题
  • ¥100 房产抖音小程序苹果搜不到安卓可以付费悬赏
  • ¥15 STM32串口接收问题