• JSON Input String using JavaScript.

    If you are working with Restful API’s and you must need to send a JSON input response via web project, especially for Node projects. This post helps you to create a JSON input string using JavaScript. It’s very useful, converting Data objects to JSON data format implemented with $. to JSON Jquery plugin.

    JavaScript :-
    Contains javascipt code. $(“#form”).submit(function(){}- delete_button is the ID name of form tag. Using element.val() calling form text input values.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    
    <script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="jquery.json-2.2.js"></script><script type="text/javascript" src="GetPostAjax.js"></script><script type="text/javascript">// <![CDATA[
    $(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 &#038;&#038; email.length>0 &#038;&#038; password.length>0 &#038;&#038; 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 = 'jsondata='+encodeURIComponent(jsonfy);
     
    //Ajax Call
    var url='website API URL';
    post_data(url,encodedata, function(data) {
    alert("Success");
    });
    }
    });
    });
    // ]]></script>

    HTML Code :-

    Name Email Password Gender

    Websites

    GetPostAjax.js :-
    Jquery ajax method.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    
    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");
    }
    });
    }

Comments on this post

Leave a Reply

  • Security Code :


    × 3 = nine