[英]How to send javascript object literals from a Node backend to the browser frontend?
I am using Node where I have JavaScript object literals with methods in the backend, eg:我正在使用 Node,在那里我有 JavaScript 对象文字和后端的方法,例如:
const report = {
id: 1,
title: 'Quarterly Report for Department 12345',
abstract: 'This report shows the results of the sales and marketing divisions.',
searchText: function () {
return this.title + '|' + this.abstract;
}
};
And I want to send these object literals to the frontend via AJAX and be able to call the methods on these objects as I can in the backend.我想通过 AJAX 将这些对象文字发送到前端,并且能够像在后端一样调用这些对象上的方法。
But even though I can send the objects to the frontend without JSON.stringify(), they are still converted to plain JSON by the time they reach my frontend:但是即使我可以在没有 JSON.stringify() 的情况下将对象发送到前端,当它们到达我的前端时,它们仍然会转换为纯 JSON:
Am I missing something, or is there not a way to send full object literals from backend to frontend.我是否遗漏了什么,或者没有办法将完整的对象文字从后端发送到前端。 I'm using Axios.我正在使用 Axios。
But even though I can send the objects to the frontend without JSON.stringify(),但即使我可以在没有 JSON.stringify() 的情况下将对象发送到前端,
It sounds like you are using JSON.stringify
… just indirectly (via a library).听起来您正在使用JSON.stringify
……只是间接地(通过库)。
JSON has no function
data type. JSON 没有function
数据类型。 So you can't just use JSON.所以你不能只使用 JSON。
You have a few options.你有几个选择。
Listed in the order I'd recommend them in.按照我推荐的顺序列出。
In your example, your function simple return this.title + '|' + this.abstract;
在您的示例中,您的函数简单return this.title + '|' + this.abstract;
return this.title + '|' + this.abstract;
so you could replace it with a string:所以你可以用一个字符串替换它:
const report = {
id: 1,
title: 'Quarterly Report for Department 12345',
abstract: 'This report shows the results of the sales and marketing divisions.',
searchText: 'Quarterly Report for Department 12345|This report shows the results of the sales and marketing divisions.'
}
};
You could use the replacer
argument of JSON.stringify
to do this automatically for any method on the object.您可以使用JSON.stringify
的replacer
参数为对象上的任何方法自动执行此操作。
This is the simplest option but results in data that doesn't update dynamically so it might not be suitable for your needs.这是最简单的选项,但会导致数据不会动态更新,因此可能不适合您的需求。
Send a simple object which doesn't have the method but does have a field which describes the type of object it does.发送一个简单的对象,它没有方法但确实有一个描述它所执行的对象类型的字段。
Then inflate it on the client:然后在客户端对其进行充气:
const type = ajaxResponse.type;
const Constructor = collectionOfConstructorFunctions[type];
const data = new Constructor(ajaxResponse.data);
You could use JSONP instead of Axios.您可以使用JSONP而不是 Axios。
The response would be application/javascript
instead of application/json
so you could encode function expressions in the returned data.响应将是application/javascript
而不是application/json
因此您可以在返回的数据中编码函数表达式。
I don't recommend this option.我不推荐这个选项。
This is horrible.这太可怕了。
const report = {
id: 1,
title: 'Quarterly Report for Department 12345',
abstract: 'This report shows the results of the sales and marketing divisions.',
searchText: "return this.title + '|' + this.abstract;"
}
and then, on the client:然后,在客户端上:
report.searchText = new Function(report.searchText);
console.log(report.searchText());
This is effectively using eval
.这是有效地使用eval
。 Don't do it.不要这样做。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.