JavaScript를 사용하여 JSON 형식 문자열 구성

현재 Restful API를 사용하고 있고 웹 프로젝트를 통해 json 형식 문자열 응답을 작성해야 하는 경우 이 문서는 javascript를 사용하여 json 형식 문자열을 만드는 데 도움이 될 것입니다. 이는 매우 유용합니다. jQuery 플러그인 $.toJSON을 통해 데이터 개체를 json 형식으로 변환합니다.

JavaScript를 사용하여 JSON 형식 문자열 작성

Javascript 코드:

여기에 JavaScript 코드가 포함되어 있습니다. $(“#form”).submit(function(){}- delete_button은 양식 태그의 ID입니다. element.val()을 통해 양식 입력 상자의 값을 호출합니다. 코드는 다음과 같습니다.

<script src="jquery.min.js"></script>
<script src="jquery.json-2.2.js"></script>
<script src="GetPostAjax.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#form").submit(function(e){
e.preventDefault();
var username,email,password,gender;
username=$("#username").val();
email=$("#email").val();
password=$("#username").val();
gender=$("#gender").val();
 
if(username.length>0 && email.length>0 && password.length>0 &&gender.length>0)
{
//Creating Objects
var request = new Object();
var userDetails = new Object();
var user = new Object();
var websites=new Array();
 
user.name=username;
user.email=email;
user.password=password;
user.gender=gender;
 
//Array Push
if(website1.length>0)
websites.push(website1);
if(website2.length>0)
websites.push(website2);
if(website3.length>0)
websites.push(website3);
 
user.websites=websites;
 
userDetails.user = user;
request.userDetails = userDetails;
 
var jsonfy = $.toJSON(request);
// Encodes special characters
var encodedata = &#39;jsondata=&#39;+encodeURIComponent(jsonfy);
 
//Ajax Call
var url=&#39;website API URL&#39;;
post_data(url,encodedata, function(data) {
alert("Success");
});
 
}
 
});
 
});
</script">

HTML 코드:

<form method=&#39;post&#39; action=&#39;&#39; id=&#39;form&#39;>
Name
<input type=&#39;text&#39; name=&#39;username&#39; id=&#39;username&#39;  />
Email
<input type=&#39;text&#39; name=&#39;email&#39; id=&#39;email&#39; />
Password
<input type=&#39;text&#39; name=&#39;password&#39; id=&#39;password&#39; />
Gender
<select name=&#39;gender&#39; id=&#39;gender&#39;><option value=&#39;male&#39;>Male</option><option value=&#39;female&#39;>Female</option></select>
Websites
<input type=&#39;text&#39; id=&#39;website1&#39; />
<input type=&#39;text&#39; id=&#39;website2&#39; />
<input type=&#39;text&#39; id=&#39;website3&#39; />
<input type=&#39;submit&#39; id=&#39;submit&#39;/>
</form>

JSON 출력

{
"userDetails":{
"user":{
"name":"Srinivas Tamada",
"email":"srinivas@9lessons.info",
"password":"Srinivas Tamada",
"gender":"male",
"websites":["www.software8.co","www.heatpress123.net","www.0769zzw.com"]
}
}
}
JSON Encoded

특수문자 인코딩 다음 문자가 생성됩니다. 인코딩: , / ? : @ & = + $ #

jsondata=%7B%22userDetails%22%3A%7B%22user%22%3A%7B %22name%22% 3A%22Srinivas%20Tamada%22%2C%22email%22%3A%22srinivas%409lessons.info%22%2C%22password%22%3A%22Srinivas%20Tamada%22%2C%22gender%22%3A %22male%22% 2C%22websites%22%3A%5B%22www.9lessons.info%22%2C%22www.egglabs.in%22%2C%22www.fglogin.com%22%5D%7D%7D%7D

GetPostAjax.js

jquery의 ajax 요청 방법은 여기에 정의됩니다.

function post_data(url,encodedata, success){
$.ajax({
type:"POST",
url:url,
data :encodedata,
dataType:"json",
restful:true,
contentType: 'application/json',
cache:false,
timeout:20000,
async:true,
beforeSend :function(data) { },
success:function(data){
success.call(this, data);
},
error:function(data){
alert("Error In Connecting");
}
});
}