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

Z时代
2024-01-10
分类：IT

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

回答：

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