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

how to create a json object in jsp?

提问by Shiju K Babu

I created a JSP page with few input fields. When i click on submin, i need the javascript to create json object and put input values in it and i want to display the json data in same jsp page.

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

This is my form

这是我的表格

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

And this is my script

这是我的脚本

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>

How to pass the json object to servlet from javascript?

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

Thanks

谢谢

回答by Amy

Well JSONis very similarto JavaScript object with key-value pairs, it's simpler than you think :)

那么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);

Submitting the JSON in form:

以表格形式提交 JSON：

To submit the JSON data in the form submit:

要以表单提交 JSON 数据submit：

Say you have a hidden field in the form that you'll use for holding the JSON string value:

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

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

After you created the jsonString, you can put the JSON string value into the hidden form element:

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

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

Handling the JSON server-side:

处理 JSON 服务器端：

And in your server-side code that's handling the form submit action, say in PHP(there's probably something equivalent in whatever language you're using):

在处理表单提交操作的服务器端代码中，比如在PHP 中（在您使用的任何语言中可能都有等价的东西）：

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

So $jsonObjectis now an associate array in this format:

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

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

In Java:

在 Java 中：

// Assuming 'request' is HttpServletRequest

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

回答by jcubic

You can create object in javascript and then use JSON.stringifyto create JSON as text.

您可以在 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);
}

回答by Joshua

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

You should really look up an up to date javascript/json tutorial. document.forms[etc]is deprecated since 15 years or so.

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