Как создать json-объект в jsp?

Question

Я создал страницу JSP с несколькими полями ввода. Когда я нажимаю на submin, мне нужен javascript для создания json-объекта и ввода входных значений в нем, и я хочу отображать json-данные на одной странице jsp.

Это моя форма

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

Благодаря

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 в виде:

Чтобы отправить данные JSON в форме submit:

Скажем, у вас есть скрытое поле в форме, которую вы будете использовать для хранения значения строки 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 лет или около того.