0

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

2019-06-03 提问
3 个回答
0

已采纳

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

//后台不变动

1

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

1

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

撰写答案

推广链接