HTML/Javascript- 将用户输入添加为 JSON 对象

Question

我正在尝试将我的用户输入作为 JSON 对象添加到 localHost 网站。这是我的 HTML 页面。当用户单击“添加服务”时，按钮应将信息添加为 JSON 对象。

HTML 页面。

<table style="width:100%" id= "intake">
<tr><td>
  <label for="firstName">First Name: </label></td><td>
  <input type="text" name="firstName" id="firstName" v-model="firstName"></td> </tr>
<tr><td>
 <label for="lastName">Last Name: </label></td><td>
  <input type="text" name="lastName" id="lastName" v-model="lastName"></td> </tr>
<tr><td>
<label for="member">Member Number:</label></td><td>
  <input type="number" name="member" id="member" v-model="member" min= "1"> </td> </tr>
<tr><td>
<label for="ticket">Ticket Number:</label></td><td>
  <input type="number" name="ticket" id="ticket" v-model="ticket" min= "1"> </td> </tr>
<tr><td>
<label for="phone">Phone Number:</label> </td><td>
  <input type="number" name="phone" id="phone" v-model="phone" min= "1">  </td> </tr>
<tr><td>
<label for="email">Email:</label> </td><td>
 <input type="email" name="email" id="email" v-model="email" > </td> </tr>
 <tr><td>
 <label for="services">Service:</label> </td><td>
    <select name="services" id="services" v-model="services">
      <option value = "0">Options...</option>
      <option value = "1">Bronze Tune</option>
      <option value = "2">Silver Tune</option>
      <option value = "3">Gold Tune</option>
      <option value = "4">Bronze Wax</option>
      <option value = "5">Silver Wax</option>
      <option value = "6">Wax</option>
    </select> </td> </tr>
 <tr><td>
 <label for="notificationPreference">Notification Preference</label> </td><td>
    <select name="notification" id="notification" v-model="notification">
      <option value = "0">Options...</option>
      <option value = "1">1</option>
      <option value = "2">2</option>
      <option value = "3">3</option>
    </select> </td> </tr>
<tr><td>
<button class = "button5" id="add_service">Add Service</button>
</td></tr>
<tr><td>
<label for="notes">Notes:</label> </td><td>
<textarea type="notes" name="notes" id="notes" v-model="notes" input style="height:200px"></textarea> </td> </tr>
</table>
</div>
</form>  

并非所有这些选项都会被添加； atm 仅添加名字、姓氏、电话号码、电子邮件和通知首选项。

这是我必须添加的 JS 脚本。

function addCustomer() {    
    document.getElementById('add_service').onclick = function() {      
        var request = new XMLHttpRequest();

        var firstName = document.getElementById("firstName").value;
        var lastName = document.getElementById("lastName").value;
        var phoneNum = document.getElementById("phone").value;
        var emailAddress = document.getElementById("email").value;
        var notifications = document.getElementById("notification").value;

        request.open('GET', url, true);

        request.onload = function () {
            var url = 'localhost:8080/customer/add?
                firstName='firstName'
                &lastName='lastName'
                &custPhone='phoneNum'
                &custEmail='emailAddress'
                &notificationPreference='notifications;
        }
        request.send();
    }​;​
}

这个 JS 脚本的作用是 - 如果用户单击“添加服务”，它应该将此信息添加到 JSON 对象。

这是一个 URL，当用户输入附加到它时，会将其添加为一个对象。

localhost:8080/customer/add?firstName=STRING&lastName=STRING&custPhone=STRING&custEmail=STRING&notificationPreference=INTEGER

我在这里做错了什么？我是在 URL 上附加了错误的用户输入，还是错误编码了按钮单击？

编辑：添加 JSON 对象示例

{
    "custID": 100501,
    "custEmail": "test1@test1.net",
    "custPhone": "1115552222",
    "firstName": "TestFirst1",
    "lastName": "TestLast1",
    "notificationPreference": 2
},

Answer 1

我在这里看到的一个问题是 url 中的 concat 错误。您缺少“+”运算符。这有效：

var firstName = 'Max';

var url = 'localhost:8080/customer/add?firstName=' + firstName + '&lastName=';
console.log(url);