使用JavaScript构建JSON格式字符串实现步骤

如果你现在正在使用Restful API,并且你需要通过web项目来构建json格式字符串的响应,那么这篇文章将帮助你使用javascript来创建json格式字符串。这是非常有用的,我们将通过jQuery插件$.toJSON把数据对象转换为json格式。

使用JavaScript构建JSON格式字符串

JavaScript代码:

在这里包含了javascript代码 $(“#form”).submit(function(){}- delete_button是form标签的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 & gt; 0 & amp;& amp; email.length & gt; 0 & amp;& amp; password.length & gt; 0 & amp;& amp; gender.length & gt; 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 & gt; 0)
  websites.push(website1);
  if (website2.length & gt; 0)
  websites.push(website2);
  if (website3.length & gt; 0)
  websites.push(website3);
  user.websites = websites;
  userDetails.user = user;
  request.userDetails = userDetails;
  var jsonfy = $.toJSON(request);
  // Encodes special characters 
  var encodedata = 'jsondata=' + encodeURIComponent(jsonfy);
  //Ajax Call 
  var url = 'website API URL';
  post_data(url, encodedata, function (data) {
    alert("Success");
  }); 
} 
}); 
}); 
  </script">

HTML代码:

<form method='post' action='' id='form'> 
  Name 
  <input type='text' name='username' id='username' /> 
  Email 
  <input type='text' name='email' id='email' /> 
  Password 
  <input type='text' name='password' id='password' /> 
  Gender 
  <select name='gender' id='gender'><option value='male'>Male</option><option value='female'>Female</option></select> 
  Websites 
  <input type='text' id='website1' /> 
  <input type='text' id='website2' /> 
  <input type='text' id='website3' /> 
  <input type='submit' id='submit'/> 
</form>
JSON输出
{ 
    "userDetails":{ 
    "user":{ 
    "name":"Srinivas Tamada", 
    "email":"json@json.im", 
    "password":"Srinivas Tamada", 
    "gender":"male", 
    "websites":["www.json.im","www.heatpress123.net","www.json.im"] 
           } 
     } 
  }

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");
            }
    });
}