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>

如何从javascript传递json对象到servlet？

由于

Answer 1

嗯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 2

您可以在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 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年左右。

如何在jsp中创建json对象？

3 个答案: