向订阅端点的JSON请求添加不同的字段

Question

为了练习跟踪事件，我需要将不同的字段集成到订阅端点的JSON请求中。以下是3个字段：

• "deviceType"：(string("mobile"、"tablet"或"desktop">
• "userAgent"：(字符串(navigator.userAgent的直接值
• "sourceForm"：(string("top"或"bottom"(我在页面的顶部和底部有两个不同的按钮用于相同的操作进行注册(

这是代码：

function bindSubscriptionButton(btnId, nameId, emailId, nameErrorId, emailErrorId) {
var button = document.getElementById(btnId);
if (button) {
button.addEventListener("click", function (e) {
hideErrors();
var name = document.getElementById(nameId).value;
var email = document.getElementById(emailId).value;
var nameError = document.getElementById(nameErrorId);
var emailError = document.getElementById(emailErrorId);
if (!name) {
nameError.innerHTML = "Name ist erforderlich";
nameError.hidden = false;
}
if (!email) {
emailError.innerHTML = "E-Mail is required";
emailError.hidden = false;
} else if (!isEmailValid(email)) {
emailError.innerHTML = "E-Mail is not valid";
emailError.hidden = false;
}
if (name && email && isEmailValid(email)) {
hideErrors();
sendDataToServer(name, email, undefined)
}
}, false);
}
}
bindSubscriptionButton("subscriptionButton", "nameInput", "emailInput", "nameInputError", "emailInputError");
bindSubscriptionButton("subscriptionButton2", "nameInput2", "emailInput2", "nameInputError2", "emailInputError2");
}
function sendDataToServer(name, email, referralCode) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = this.response ? JSON.parse(this.response) : null;
goToSuccessPage();
}
};
var data = {
email: email,
firstName: name,
lang: "en",
};

xhttp.open("POST", serverURL, true);
xhttp.setRequestHeader("Content-type", "application/json");
xhttp.send(JSON.stringify(data));
}

我想将deviceType、userAgent和sourceForm添加到此对象：

var data = {
email: email,
firstName: name,
lang: "en",
};

对于deviceType，我还需要传递以下函数：

const deviceType = () => {
const ua = navigator.userAgent;
if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
return "tablet";
}
else if (/Mobile|Android|iP(hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(ua)) {
return "mobile";
}
return "desktop";
};

对于sourceForm，我需要在这里为"source"传递一个额外的参数：

bindSubscriptionButton("subscriptionButton", "nameInput", "emailInput", "nameInputError", "emailInputError");
bindSubscriptionButton("subscriptionButton2", "nameInput2", "emailInput2", "nameInputError2", "emailInputError2");

并将其一直传递到这里：

if (name && email && isEmailValid(email)) {
hideErrors();
sendDataToServer(name, email, undefined)
}

非常感谢您的帮助

Answer 1

您可以"积分"；只需在创建data对象时在其上设置更多属性即可获得值。

对于sourceForm，您可以通过bindSubscriptionButton函数将值传递到sendDataToServer函数中，正如您所描述的那样，然后在data对象中设置其值。

对于deviceType和userAgent，我建议修改deviceType函数，使其在单个对象中同时返回用户代理字符串和派生的设备类型值。然后，可以将特性值复制到data对象中的等效特性中。

例如：

bindSubscriptionButton("subscriptionButton", "nameInput", "emailInput", "nameInputError", "emailInputError" "top");
bindSubscriptionButton("subscriptionButton2", "nameInput2", "emailInput2", "nameInputError2", "emailInputError2", "bottom");

和

function bindSubscriptionButton(btnId, nameId, emailId, nameErrorId, emailErrorId, sourceFrom) {
....
sendDataToServer(name, email, undefined, sourceFrom);
....

和

const deviceType = () => {
const ua = navigator.userAgent;
var devType = "";
if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
devType = "tablet";
}
else if (/Mobile|Android|iP(hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(ua)) {
devType = "mobile";
}
else { devType = "desktop"; }
return { "deviceType": devType, "userAgent": ua };
};

和

function sendDataToServer(name, email, referralCode, sourceFrom) {
....
var dt = deviceType();
var data = {
email: email,
firstName: name,
lang: "en",
deviceType: dt.deviceType,
userAgent: dt.userAgent,
sourceFrom: sourceFrom
};
....