当 HTML 作为 JSON 请求的参数发送时，具有多个 CSS 类的 HTML 不会呈现
Posted
技术标签:
【中文标题】当 HTML 作为 JSON 请求的参数发送时，具有多个 CSS 类的 HTML 不会呈现【英文标题】：HTML with multiple CSS classes not rendering when HTML sent as a parameter of a JSON request 【发布时间】：2018-11-21 20:14:22 【问题描述】：我有一个将 JSON 作为请求参数的 API。此 JSON 中的字段之一是 html 字符串。 HTML 字符串从 .css 文件中选择其 css。但是，对于具有 2 个 css 类的 HTML 元素，没有一个 css 类被拾取。
这是我创建字典的方法：-
private func createCalendarInviteDictionary() -> [String: Any]
var calendarInviteDict = [:] as [String: Any]
calendarInviteDict["emailId"] = hostDict["HostEmailAddress"]
calendarInviteDict["startTime"] = mgVisitorInfo.startDate
calendarInviteDict["endTime"] = mgVisitorInfo.endDate
calendarInviteDict["location"] = mgVisitorInfo.locationSite
calendarInviteDict["subject"] = "Welcome!!"
calendarInviteDict["allDayEvent"] = "no"
calendarInviteDict["isSkypeMeeting"] = "no"
calendarInviteDict["isHigh"] = "yes"
calendarInviteDict["requiredAttendees"] = [mgVisitorInfo.email]
calendarInviteDict["optionalAttendees"] = []
return calendarInviteDict
以下是我调用上述方法并将字典转换为 JSON 的不完整方法：-
private func createCalendarInvite(_ completion: @escaping dataRequestCompletionBlock)
var calendarInviteDict = createCalendarInviteDictionary() as [String: Any]
let emailContentHelper = EmailContentHelper()
calendarInviteDict["body"] = emailContentHelper.constructEmailBody()
var calendarInviteJSON = ""
if let theJSONData = try? JSONSerialization.data(
withJSONObject: calendarInviteDict,
options: [.prettyPrinted])
calendarInviteJSON = String(data: theJSONData, encoding: .utf8)!
print("JSON string = \(calendarInviteJSON)")
let calendarInviteParams = ["requestJSONString": calendarInviteJSON] as [String: String]
// do something else
以下是控制台中为 JSON 字符串记录的内容：-
JSON string =
"optionalAttendees" : [
],
"requiredAttendees" : [
"abc@gmail.com"
],
"location" : "location",
"emailId" : "xyz@gmail.com",
"isSkypeMeeting" : "no",
"body" : "<html><head><style type=\"text\/css\" media=\"all\">#banner \n\twidth: 100%\n\n\n* \n box-sizing: border-box;\n\n\n.blue \n color: #007DB8;\n font-family: 'Roboto';\n font-weight: bold;\n font-size: 14pt;\n\n\n.blackBold \n font-family: 'Roboto';\n font-weight: bold;\n font-size: 14pt;\n\n\n.blackLight \n font-family: 'Roboto';\n font-weight: light;\n font-size: 14pt;\n\n\n.table-column1 \n vertical-align: top;\n padding-left: 0pt\n\n\n.table-column2 \n padding-left: 20pt;\n\n\n.centerText \n text-align: center;\n\n\nimg \n display: block;\n margin-left: auto;\n margin-right: auto;\n\n<\/style><\/head><body><p><img class=\"banner\" src=\"https:\/\/i.abc.com\/sites\/csimages\/Banner_Imagery\/all\/invite_web.png\" alt=\"Invite-Image-With-Logo\" border=\"0\"><\/p><p><span class=\"blackBold\">Dear<\/span><span class=\"blue\"> letsbondiway<\/span><\/p><p><span class=\"blackLight\">We are very much looking forward to your visit to the <\/span><span class=\"blackBold\">location<\/span><span class=\"blackLight\"> Campus.<\/span><\/p><br><span class=\"blue\">Your visit details:<\/span><br><table><tr><td class=\"blue table-column1\">Company:<\/td><td class=\"blackLight table-column2\">company<\/td><\/tr><tr><td class=\"blue table-column1\">Arrival Date:<\/td><td class=\"blackLight table-column2\">Thu, Nov 22, 2018 1:30 AM<\/td><\/tr><tr><td class=\"blue table-column1\">Departure Date:<\/td><td class=\"blackLight table-column2\">Thu, Nov 22, 2018 2:30 AM<\/td><\/tr><tr><td class=\"blue table-column1\">Visiting:<\/td><td class=\"blackLight table-column2\">letsbondiway<\/td><\/tr><\/table><br><\/body><\/html>",
"isHigh" : "yes",
"endTime" : "2018-11-22 2:30:23.000",
"startTime" : "2018-11-22 1:30:23.000",
"allDayEvent" : "no",
"subject" : "Welcome!!"
可以看出，上面登录的 JSON 中的 html 有两种元素——一种只有一个 css 类
<span class=\"blackBold\">Dear<\/span>
和其他有 2 个 css 类 -
<td class=\"blue table-column1\">Company:<\/td>
在 API 请求中发送此 JSON 且 API 成功执行时，具有一个 css 类的 HTML 部分正确呈现，但具有 2 个 css 类的 HTML 部分未正确呈现。实际上，它不采用这两个类中的任何一个的属性。
我显然可以使用内联样式，这应该也可以，但是由于我需要在 HTML 中的多个位置使用相同的属性，所以我创建了一个 .css 文件，其中包含 css 类。
我需要进行哪些更改才能正确呈现带有 2 个 css 类的 HTML 部分。
【问题讨论】：
【参考方案1】：在电子邮件中链接类不是一个好主意，因为许多电子邮件客户端无法识别它。
请记住，电子邮件中的 CSS 非常有限。因此，不要向每个单元格添加多个类，而只需添加一个。或者更好的是内联样式。我知道内联样式非常混乱，但是对于电子邮件，嵌套表格和内联样式是你最好的朋友。尽量保持简单。
【讨论】：
现在，我最终使用了类选择器和内联样式的组合来实现我想要的。类选择器仅采用一个类名，其余样式内联。以上是关于当 HTML 作为 JSON 请求的参数发送时，具有多个 CSS 类的 HTML 不会呈现的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Android 中将 JSON 参数作为 Web 服务请求发送？ [复制]
Swift Moya 在请求正文中将参数作为 JSON 发送
当请求来自浏览器或在请求来自移动设备时发送JSON字典时呈现HTML