一个前后端json使用的误区

后端传到前端的字符串,只要前端以json接收,用console.log()显示时候就是标准的json格式,但是使用循环遍历就是字符串的格式。看一下案例代码:
后端代码如下

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
                response.setHeader("Pragma", "No-cache");
                response.setHeader("Cache-Control", "No-cache");
                response.setDateHeader("Expires", 0);
                response.setContentType("text/html;charset=utf-8");
                Object result=JsonString.getJsonString();
                String json = JSON.toJSONString(result);
                response.getWriter().print(json);
    }
public class JsonString {
    public static String getJsonString() throws IOException {
        String JsonStringValues=null;
        File file=new File(JsonString.class.getResource("/data.json").getFile());
        return  JsonStringValues=FileUtils.readFileToString(file, JsonStringValues);
    }
}

一看成功使用fastjson成功完成转化,
接着就是前端的接收数据(使用的是mui框架,其它也是类似的可以有参考意义的)

mui.ajax("GetDataServlet", {
                dataType : "json", //服务器返回json格式数据
                type : "get", //HTTP请求类型
                timeout : 10000, //超时时间设置为10秒;
                headers : {
                    "Content-Type" : "application/json"
                },
                success : function(data) {
                    console.log(data);
                    //服务器返回响应,根据响应结果,分析是否登录成功;
                    var html = template("test", data);
                    document.getElementById("list").innerHTML = html;

                },
                error : function(xhr, type, errorThrown) {
                    //异常处理;
                    //console.log(type);
                }
            });
<script id="test" type="text/html">
        {{each stories as value i}}
        <li style="width:100%;height: 75px;background-color: #FFFFFF;padding: 10px;margin-bottom: 10px;overflow: hidden;">
            <span style="float: left;width: calc(100% - 72px);">
                {{value.title}}
            </span>
            <span style="float: right;margin-left: 10px;">
                <img width="62px" height="55px" src="{{value.images[0]}}"/>
            </span>
        </li>
        {{/each}}
    </script>

显示都一堆字符串格式的东西,
这里写图片描述
这时就使用console.log(data);打印出来接收到的东西,确实json格式,
这里写图片描述放在标签里面显示字符串。这是就出现前后端的互不承认问题所在。最后采取使用一般写死的json在前端处理,没有问题,排除了前端的框架错误,才好好的看后端代码。
在后端加上System.out.println("println.json=" + json);
打印在控制台确实是字符串,原来转混乱了。最后Servlet中的get方法

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 设置
                // 设置不缓存图片
                response.setHeader("Pragma", "No-cache");
                response.setHeader("Cache-Control", "No-cache");
                response.setDateHeader("Expires", 0);
                response.setContentType("text/html;charset=utf-8");
                /*response.setContentType("text/text;charset=utf-8");*/
                // 指定生成的相应图片
                Object result=JsonString.getJsonString();
                //String json = JSON.toJSONString(result);
                System.out.println("println.json=" +result);
                response.getWriter().print(result);
    }

实现了前端的
这里写图片描述
这时再来看看前端的console.log(data);显示
这里写图片描述
后端的显示也是jsong格式
这里写图片描述
这才是正确的传输方式;
总结:
(1)后端json是否传对看后台控制台是否为json格式
(2)前端检查是否接收的是正确格式的object对象,前端以json格式接收实际是接收的json的object对象。

备注
后端加入了一个jar包
commons-io-1.4.jar
前端:
这里写图片描述

利用jquery的ajax方法可以进行前后端的交互。以下是一个使用JSON进行数据传输的示例: 前端代码: ```javascript // 定义要发送的数据 var data = { name: '张三', age: 20, gender: '男' }; // 将数据对象转为JSON字符串 var jsonData = JSON.stringify(data); $.ajax({ url: 'backend.php', // 后端接口地址 type: 'POST', // 请求方法为POST data: { jsonData: jsonData // 向后端传递JSON数据 }, dataType: 'json', // 预期接收的数据类型为JSON success: function(response) { // 请求成功后的处理逻辑 console.log('后端返回的结果为:', response); }, error: function(xhr, status, error) { // 请求失败后的处理逻辑 console.log('请求失败', error); } }); ``` 后端代码(使用PHP语言作为示例): ```php // 接收前端传递的JSON数据 $jsonData = $_POST['jsonData']; // 将JSON字符串转换为PHP对象 $data = json_decode($jsonData); // 在后端进行对传递的数据的处理 $name = $data->name; $age = $data->age; $gender = $data->gender; // 构造要返回给前端JSON数据 $response = array( 'result' => 'success', 'message' => '数据接收成功', 'name' => $name, 'age' => $age, 'gender' => $gender ); // 将数据转为JSON字符串 $jsonResponse = json_encode($response); // 返回JSON响应 header('Content-type: application/json'); echo $jsonResponse; ``` 以上就是一个使用jquery的ajax方法进行前后端交互,并通过JSON传递数据的示例。前端通过ajax发送JSON数据到后端,后端接收后进行处理后再返回一个JSON响应给前端
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值