点击提交按钮后,将当前textarea中的文本通过后台加工后并获取加工后数据显示在当前页面的div中(不需要数据库),怎么处理?

点击提交按钮后,将当前textarea中的文本通过后台加工成json格式的数据后,把加工后的数据显示在当前页面的div中(不需要数据库),怎么处理?

目前我用的是表单提交,但是一旦在html页面点击提交按钮后就跳转到新的页面->localhost:8801/Test,并显示处理过的数据,但是不知道如何将处理后的数据显示在前面的html页面中“result-box”这个div盒子中。。。请教大家,这个该怎么办?

相关代码

// 后台
public class TestApiController {

@ApiOperation("测试")
@PostMapping("/Test")
public Result Test(@ApiParam("待处理数据") @RequestParam String sentence){
    //处理过程。。。
    }

}

//前端

<div class="content">
    <form action="/Test" method="post" target="_blank" id="text">
        <textarea autocomplete="off" rows="7" placeholder="请输入内容,最多输入100字。" name="sentence"></textarea>
        <input type="submit" value="提交" />
    </form>
    <form action="/Test-File" method="post" enctype="multipart/form-data" id="File">
        <input type="file" value="上传文件" name="multipartFile"/>
        <input type="submit" value="提交文件" />
    </form>
</div>
<div id="result-box"></div>

//localhost:8801/test.html页面效果

阅读 631
评论 2019-06-03 提问
    3 个回答

    感谢楼上2位的回答,让我再搜索的时候有了新的关键词去搜索解答,目前解决了该问题,使用的是ajax,不过在写代码的过程中一定要细心,不要犯低级错误:括号不成对、用id标签的漏了“#”;如果觉得代码没问题,但页面就是没效果,可以用alert('XXX')来测试。

    //js部分

        function testJson(url){
            var sent = $("#TestDemo").val();//alert('123');
                $.ajax({
                    url: "/Test",
                    type: "POST",
                    dataType: "text",
                    data: {sentence:sent},
                    success: function (result) {
                        if(""==sent){
                            alert("请输入内容!");
                            $('#result-box').html("");
                        }
                        else{
                            $('#result-box').html(result);
                        }
                        
                    }
                });
        }
    

    注意:

    dataType:"text",//这里如果用json则无法解析。
    不要在请求头中加入contentType:'application/json;charset=UTF-8',

    //html页面,把form表单替换为了div

        <div class="se-box">
            <textarea autocomplete="off" rows="7" placeholder="请输入内容,最多输入100字。" name="sentence" id="TestDemo"></textarea>
            <input type="button" value="提交" onclick="testJson();"/>
        </div>
    

    //后台不变动

    评论 赞赏 2019-06-06

      你如果非要用表单action提交,那你还需要加一个接口用来获取后端处理后的json数据;
      或者不用表单提交,改用ajax

      评论 赞赏 2019-06-04

        如果只想动态给div赋值的话,可以用jquery $("#result-box").html(),要想在前台显示json,json是个对象了,需要你再另外加标签得到对象里面的key,如果只想显示字符串就用上面的方法。

        评论 赞赏 2019-06-04
          撰写回答

          登录后参与交流、获取后续更新提醒