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

Question

点击提交按钮后，将当前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页面效果

Answer 1

感谢楼上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>

//后台不变动

Answer 2

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

Answer 3

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