Convertissez les éléments de formulaire en JSON entre eux en construisant des paramètres AJAX

Cet article présente principalement l'introduction connexe de la conversion JSON des éléments de formulaire en construisant des paramètres AJAX. Les amis dans le besoin peuvent se référer aux

données du serveur de soumission ajax pour trier la méthode de conversion.

HTML :

<form id="fm" name="fm" action="">
<input name="UserName" type="text" value="UserName1"/>
</form>
<input name="UserId" id="UserId" type="text" value="UserId1"/>

1. Convertir les éléments du formulaire en QueryString

var q = $('#fm,#UserId').serialize(); //q = UserName=UserName1&UserId=UserId1

2. Chaîne, conversion JSON

var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );

Vous pouvez utiliser le plug-in jquery-json pour réaliser la conversion, citer directement l'exemple

var thing = {plugin: 'jquery-json', version: 2.3};
var encoded = $.toJSON( thing );
// '{"plugin":"jquery-json","version":2.3}'
var name = $.evalJSON( encoded ).plugin;
// "jquery-json"
var version = $.evalJSON(encoded).version;
// 2.3

3. Formulaire, élément à Nom, Tableau de valeurs

var arr = $("#fm,#UserId").serializeArray();
/*[ 
{name: 'UserName', value: '"UserName"1'}, 
{name: 'UserId', value: 'UserId'}
] */

4. Élément de formulaire vers JSON

$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
var obj = $('form').serializeObject();
/*obj: Object
UserId: "UserId1"
UserName: "UserName1"
__proto__: Object*/

5 JSON2FORM

$.getJSON('url_to_file', function(data) {
for (var i in data) {
$('input[name="'+i+'"]').val(data[i]);
}
}

data = {
"Name":"Emkay Entertainments",
"Address":"Nobel House, Regent Centre",
"Contact":"Phone"
} 
$('p#data').loadJSON(data);
<p id="data">
<h1 id="Name">Emkay Entertainments</h1>
<label for="Address">Address:</label>
<span id="Address">Nobel House, Regent Centre</span> 
<label for="Contact">Contact by:</label>
<span id="Contact">Phone</span>
</p>

Ce qui précède est quoi. J'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Communication Ajax et cgi sous le serveur Boa (tutoriel graphique)

Ajax+Struts2 implémente la fonction de vérification du code de vérification ( tutoriel graphique)

Cliquez Ajax pour charger en continu la liste des données (tutoriel graphique)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!