Constructing AJAX method to implement form JSON conversion

This time I will bring you the method of constructing AJAX to implement form JSON conversion, and what are the precautions for constructing AJAX to implement form JSON conversion. The following is a practical case, let's take a look.

ajax submits server data and sorts out the conversion method.

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. Convert form elements to QueryString

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

2.String, JSON conversion

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

You can use the jquery-json plug-in to achieve conversion, directly quote the example

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. Form, element to Name, Value array

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

4. Form element to 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]);
}
}

Google found a more powerful plug-in http://code.google.com/p /jquery-load-json/

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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to pass multiple parameters using ajax

##ajax file upload + processing browser compatibility

The above is the detailed content of Constructing AJAX method to implement form JSON conversion. For more information, please follow other related articles on the PHP Chinese website!