comment créer un objet json dans jsp?

Question

J'ai créé une page JSP avec peu de champs de saisie. Quand je clique sur submin, j'ai besoin du javascript pour créer un objet json et y mettre des valeurs d'entrée et je veux afficher les données json dans la même page jsp.

C'est ma forme

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

Et voici mon 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> 

Comment passer l'objet JSON Servlet de javascript?

Merci

Answer 1

Eh bien JSON est très similaire pour objet JavaScript avec des paires clé-valeur, il est plus simple que vous le pensez :)

// 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); 

Envoi JSON sous forme:

Pour soumettre les données JSON sous la forme submit:

Supposons que vous avez un champ caché sous la forme que vous utiliserez pour maintenir la valeur de chaîne JSON:

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

Après avoir créé le jsonString, vous pouvez mettre la valeur de chaîne JSON dans l'élément de forme cachée:

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

manipulation du côté serveur JSON:

Et dans votre code côté serveur qui est la manipulation du formulaire soumettre l'action, par exemple dans PHP (il y a probablement quelque chose d'équivalent dans la langue que vous utilisez):

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

Alors $jsonObject est maintenant un tableau associé dans ce format:

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

En Java:

// Assuming 'request' is HttpServletRequest 

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

Answer 2

Vous pouvez créer un objet en javascript, puis utiliser JSON.stringify pour créer du JSON sous forme de texte.

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 

Vous devriez regarder vraiment une mise à jour tutoriel javascript/JSON. document.forms[etc] est obsolète depuis 15 ans ou plus.