服务器端将复合json对象传回前端

168 篇文章 6 订阅
11 篇文章 0 订阅

前端接收后端传过来的JSON对象,对前端来说,传过来的确实就是JSON对象;但后端,类型则灵活得多,可以是IList<>等类型,当然也可以是newtonsoft的JObject类型。反正在后端,传达的参数类型很多,到达前端后,都变成了JSON对象。

见拙作:http://blog.csdn.net/leftfist/article/details/42404989 (JSON参数 )

其中原因,固然是估计后端(asp.net)做了处理,将多种数据自动转换:

config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));//改为JSON方式  

另一方面,也是因为JSON类型确实强,跟XML一样,可以描述各种各样的数据格式。

这里又对后端将JSON作为参数传递做一些记录:

比如说,我前端用easyUI的datagrid,要分页,那么传递给前端的数据格式,应该是这样的:

{"total":106,"rows":[{},{},{}.....]}

那么后端该怎么生成这种格式呢?

有代码有J8:


using Newtonsoft.Json;

[System.Web.Http.HttpGet]
public JObject GetTags(string account)
{
    JObject jobj = new JObject();

	//ViewTag是自定义类
    IList<ViewTag> list = customViewService.GetTags(ProjectId,account);
    jobj.Add("total", (JToken)list.Count());
    jobj.Add("rows", JArray.FromObject(list));

    return jobj;
}


如果服务器端无法接受到 Axios 前端传递JSON 对象,可能是因为以下原因: 1. 前端没有将请求体设置为 JSON 格式的字符串。 确保在发送 POST 请求时,将请求体设置为 JSON 格式的字符串。可以使用 JSON.stringify() 方法将对象转换为 JSON 字符串。 ```javascript const data = { name: 'John', age: 25 }; axios.post('/api/users', JSON.stringify(data)) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); ``` 2. 后端没有使用 body-parser 中间件来解析请求体中的 JSON 数据。 在服务器端,必须使用 body-parser 中间件来解析请求体中的 JSON 数据。确保在服务器端使用以下代码: ```javascript const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.json()); app.post('/api/users', (req, res) => { const data = req.body; console.log(data); // Handle the data... }); app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 3. 请求头中的 Content-Type 不是 application/json。 在发送 POST 请求时,确保请求头中的 Content-Type 设置为 application/json。可以使用 Axios 的默认配置或者手动设置请求头。 默认配置: ```javascript axios.defaults.headers.post['Content-Type'] = 'application/json'; ``` 手动设置: ```javascript axios.post('/api/users', JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } }) ``` 如果以上方法都无法解决问题,则可能是其他原因导致的。可以在控制台查看请求和响应的详细信息,以便进一步分析和解决问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值