如何在jsp中创建一个json对象？

Question

我创建了一个输入字段很少的 JSP 页面。当我点击 submin 时，我需要 javascript 来创建 json 对象并将输入值放入其中，我想在同一个 jsp 页面中显示 json 数据。

这是我的表格

<form name="jsond" method="get">
<br>
<p id="msg"></p>
First Name:
<input type="text" id="firstName"/><br>
Last Name:
<input type="text" id="lastName"/><br>
E-mail:
<input type="text" id="email"/><br>
Mobile No:
<input type="text" id="mobile"/><br>
Place:
<input type="text" id="place"/><br>
Country:
<input type="text" id="country"/><br>
<br>
<input type="submit" name="submit" value="Submit" onclick="return submitForm(this, event);">
</form>

这是我的脚本

function submitForm(thisObj, thisEvent) {
       var firstName = document.forms["jssond"]["firstName"].value;
       var lastName = document.forms["jssond"]["lastName"].value;
       var email = document.forms["jssond"]["email"].value;
       var mobile = document.forms["jssond"]["mobile"].value;
       var place = document.forms["jssond"]["place"].value;
       var country = document.forms["jssond"]["country"].value;

// How to do the remaining code? I want to store the above variables in json object and display json values in <p id="msg"></p>

如何将 json 对象从 javascript 传递给 servlet？

谢谢

Answer 1

您可以在 javascript 中创建对象，然后使用JSON.stringify 将 JSON 创建为文本。

function submitForm(thisObj, thisEvent) {
   var object = {
       firstName: document.forms["jssond"]["firstName"].value,
       lastName: document.forms["jssond"]["lastName"].value,
       email: document.forms["jssond"]["email"].value,
       mobile: document.forms["jssond"]["mobile"].value,
       place: document.forms["jssond"]["place"].value,
       country: document.forms["jssond"]["country"].value
   };
   document.getElementById('msg').innerHTML = JSON.stringify(object);
}

Answer 2

JSON 与具有键值对的 JavaScript 对象非常相似，它比您想象的要简单 :)

// retrieve the form values
var firstName = document.forms["jssond"]["firstName"].value;
var lastName = document.forms["jssond"]["lastName"].value;
var email = document.forms["jssond"]["email"].value;
var mobile = document.forms["jssond"]["mobile"].value;
var place = document.forms["jssond"]["place"].value;
var country = document.forms["jssond"]["country"].value;

// create JSON
var jsonObj = {
    "firstname": firstName,
    "lastName": lastName,
    "email": email,
    "mobile": mobile,
    "place": place,
    "country": country
};
// convert JSON to string
var jsonString = JSON.stringify(jsonObj);

以表单形式提交 JSON：

以submit的形式提交JSON数据：

假设您在表单中有一个隐藏字段，用于保存 JSON 字符串值：

<input type=hidden" id="jsonData" name="jsonData" />

创建jsonString后，可以将JSON字符串值放入隐藏的表单元素中：

document.getElementById('jsonData').value = jsonString;

处理 JSON 服务器端：

在您处理表单提交操作的服务器端代码中，例如在 PHP 中（无论您使用什么语言，都可能有等效的东西）：

<?php
    $jsonObject = json_decode($_POST['jsonData'], true);
?>

所以$jsonObject 现在是这种格式的关联数组：

[
    "firstName" => "...",
    "lastName" => "...",
    "email" => "...",
    "mobile" => "...",
    "place" => "...",
    "country" => "..." 
]

在 Java 中：

// Assuming 'request' is HttpServletRequest

String jsonString = request.getParameter("jsonData");
JSONObject jsonObject = (JSONObject) JSONValue.parse(jsonString);

Answer 3

function submitForm(thisObj, thisEvent) {
   var firstName = document.forms["jssond"]["firstName"].value;
   var lastName = document.forms["jssond"]["lastName"].value;
   var email = document.forms["jssond"]["email"].value;
   var mobile = document.forms["jssond"]["mobile"].value;
   var place = document.forms["jssond"]["place"].value;
   var country = document.forms["jssond"]["country"].value;

   var json = {
       firstName: firstName,
       lastName: lastName,
       email: email,
       mobile: mobile,
       place: place,
       country: country
   };
   // Displaying is up to you

您真的应该查找最新的 javascript/json 教程。 document.forms[etc] 已被弃用 15 年左右。