Thursday, September 13, 2012

To display JSON object in full string javascript/jquery

      var jsonobj = {};

       jsonobj["employee"] = {};
       jsonobj["employee"]["employeename"] = "Balajiprasad";
       jsonobj["employee"]["companyname"] = "Microsoft";
       jsonobj["employee"]["CompanyAddress"] = {};
       jsonobj["employee"]["CompanyAddress"]["Address1"] = "IT park";
       jsonobj["employee"]["CompanyAddress"]["Address2"] = "SEZ Area";
       jsonobj["employee"]["CompanyAddress"]["Address3"] = {};
       jsonobj["employee"]["CompanyAddress"]["Address3"]["Area"] = "Manyata";
       jsonobj["employee"]["CompanyAddress"]["City"] = "Bangalore";
       jsonobj["employee"]["CompanyAddress"]["Country"] = "India";
      
       jsonobj["personal"] = {};
       jsonobj["personal"]["personalname"] = "Balajiprasad";
       jsonobj["personal"]["Place"] = "Coimbatore";

       alert(JSON.stringify(jsonobj));

27 comments:

  1. Hi Balaji,

    How to use beforeSend method to send Header information to REST(Apache CXF) web Service,
    i have tried so many ways but not working,
    can u send a code if u have

    Client Code(JQuery1.7.1.)
    $.ajax({ type: "POST",
    url:'http://10.163.14.56:9000/customerservice/HeaderRequestDet',
    dataType:'json', data: { "x": "y" },
    beforeSend: function (xhr) {
    xhr.setRequestHeader (("key", "12453"));
    xhr.setRequestHeader (("X-Requested-With123", "hash"));
    },
    success: function(data,textStatus,jqXHR) { alert('Success!'); alert(data); }, error: function(jqXHR, exception) { if (jqXHR.status === 0) { alert('Not connect Server.\n Verify Network.'); } if (jqXHR.status == 500) { alert('Internal Server Error [500].'); } } });

    WebService Code:


    @POST
    @Path("/HeaderRequestDet/")
    public Response HeaderRequestDet(String data,@Context HttpServletResponse serverResponse,@Context HttpHeaders headers,@HeaderParam("Authorization") String theUserAgent,@Context HttpServletRequest request) throws Exception{
    System.out.println("Data From Cleint :"+data);
    ResponseBuilder builder = Response.ok();
    System.out.println("Header Data***************"+headers.getRequestHeaders());
    List hh=headers.getRequestHeaders().get("Access-Control-Request-Headers");
    System.out.println("Header Data111111dfdfdf:"+hh.size());
    for(int i=0;i<hh.size();i++){
    System.out.println("Header Value:"+i+":"+hh.get(i));

    }

    String responsee="sucess";
    builder.header("Access-Control-Allow-Origin", "*");
    builder.header("Access-Control-Max-Age", "3600");
    builder.header("Access-Control-Allow-Methods", "POST");
    builder.header("Access-Control-Allow-Headers", "Content-Type ");

    return Response.ok(responsee, MediaType.APPLICATION_JSON).build();
    }
    using above jquery ajax call even it is not invoking my service if beforesend() method not included then it is invoking my service,
    what wrong with my code,what to do
    Thanks

    ReplyDelete
  2. Try to add header like below..


    EX:-

    $.ajax({

    type: "GET",

    url : "url",
    headers : {
    "key":"12453",
    "X-Requested-With123" : "hash"
    },

    ...etc

    ReplyDelete
  3. i tried with GET method but not working.
    Actually i want to send json data and headers simultaneously,w
    hen i am trying to send the same to webservice(RESTfull Apache cxf) am getting the following information in firebug

    Request URL:http://10.163.14.56:9000/customerservice/HeaderRequestDet
    Request Method:OPTIONS
    Status Code:HTTP/1.1 200 OK

    Request Headers 15:48:10.570
    Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Encoding:gzip, deflateAccept-Language:en-us,en;q=0.5Access-Control-Request-Headers:authorityAccess-Control-Request-Method:POSTCache-Control:no-cacheConnection:keep-aliveHost:10.163.14.56:9000Origin:http://localhost:8084Pragma:no-cacheUser-Agent:Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:14.0) Gecko/20100101 Firefox/14.0.1
    Response Headers
    Δ24ms

    Allow:POST,GET,OPTIONS,HEADContent-Length:0Date:Fri, 21 Sep 2012 10:18:10 GMTServer:Jetty(7.5.4.v20111024)


    if web service overide with OPTIONS,am getting headers values not reqused json data,
    if i change to POST means not even calling web service,what to do.

    why request method changing to OPTIONS if use header or beforSend()

    ReplyDelete
  4. Are you sure that the Call working properly??.. did you tried using RESTClient in browsers?..if not, try to use Firefox RESTClient (you need add RESTClient Addon) to check your call.. if it works perfect in REST Client then you can the same in your coding.
    In your code, for Header you can use "beforesend" function also "header" attribute
    For sending JSON Data you can use "data" attribute with stringifying the JSON Data

    EX:- $.ajax({

    type: "GET", or type: "POST",

    url : "url",
    headers : {
    "key":"12453",
    "X-Requested-With123" : "hash"
    },
    data:JSON.stringify(JSONData),

    ...etc)

    ReplyDelete
  5. i tried with firefox RESTclient addon, it works fine and am getting header value and json data in my webservice,where as in my jquery function not working,can u give the ajax call code ,it will help to me

    ReplyDelete
  6. Try this http://rbalajiprasad.blogspot.in/2012/09/jquery-sample-ajax-call-format.html and add your attributes if required..

    ReplyDelete
  7. i used as it is your ajax call(code from your link) but still not calling web service,it is going error function

    ReplyDelete
  8. can u give a idea to solve this problem....

    ReplyDelete
  9. when i try with same port,headers data information coming but try with different port or different server that webservice even not calling ....
    how to handle cross domain issue for header

    ReplyDelete
  10. I am not sure, why this problem happening to you and what code you using.

    JSON will not support for cross domains, so that JSONP used.

    For your reference, just read this article http://en.wikipedia.org/wiki/JSONP and try your code with JSONP or with CORS.

    ReplyDelete
  11. Check this http://rbalajiprasad.blogspot.in/2012/09/cross-domain-ajax-with-jsonp.html

    ReplyDelete
  12. i could not understand what you have explained, this is my code for client which is running on localhost:8080

    $(document).ready(function(){
    $('#b1').click(function(){
    $.ajax({
    //your type GET, POST, PUT etc
    type: "POST",
    datatype:'json',

    url:"http://10.163.14.56:9000/customerservice/HeaderRequestDet",
    data:{"Name": "otcnic"},

    headers : {
    "key":"12345"
    },

    async:false,

    cache:false,

    success: function (data) {

    alert("success");
    },
    error: function (jqXHR, textStatus, errorThrown) {

    alert("Error"+jqXHR);
    }
    });
    });
    });


    and server side is running on : localhost:9000
    @POST
    @Path("/HeaderRequestDet")
    public Response HeaderRequestDet(String data,@Context HttpServletResponse serverResponse,@Context HttpHeaders headers,@Context HttpServletRequest request) throws Exception{
    System.out.println("Data From Cleint :"+data);
    ResponseBuilder builder = Response.ok();


    List hh=headers.getRequestHeaders().get("hash");
    System.out.println("Header Data111111dfdfdf:"+hh.size());
    for(int i=0;i<hh.size();i++){
    System.out.println("Header Value:"+i+":"+hh.get(i));
    }

    String responsee="sucess";
    builder.header("Access-Control-Allow-Origin", "*");
    builder.header("Access-Control-Max-Age", "3600");
    builder.header("Access-Control-Allow-Methods", "POST,GET,OPTIONS,PUT,DELETE");
    builder.header("Access-Control-Allow-Headers","X-Requested-With,Host,User-Agent,Accept,Accept-Language,Accept-Encoding,Accept-Charset,Keep-Alive,Connection,Referer,Origin");
    return Response.ok(responsee, MediaType.APPLICATION_JSON).build();
    }

    how to implement jsonp for post method or CORS,

    ReplyDelete
  13. how to overcome this problem..... u told that use proxy server in PHP,but here i am using java not php

    ReplyDelete
  14. Not a problem, try changing datatype:json to jsonp and also try with CORS if it not works out

    include following line before ajax call to enable CORS,
    $.support.CORS = true;

    try the possiblities using jsonp or CORS..

    ReplyDelete
  15. i have added "$.support.CORS = true;" before ajax call event not invoked web service

    ReplyDelete
  16. how to use 'CORS',can u send if u have any code

    ReplyDelete
  17. do u have code to enable CORS,please send me if u have,i changed datatype:'jsonp' and enabled the CORS,even not calling service(REST)

    ReplyDelete
  18. Check with Firebug Net panel

    Install Firebug Addon in Firefox and inspect your code in browser with Net panel. You can find out the exact error of it. It will tell you real problem.

    ReplyDelete
  19. This comment has been removed by the author.

    ReplyDelete
  20. why request type changing to 'POST' to 'OPTIONS', when use 'headers' or 'beforsend()' .
    the follwoing message showing in firebug net panel
    "[12:40:00.605] OPTIONS http://10.163.14.56:9000/customerservice/HashValue [HTTP/1.1 200 OK 24ms]"

    ReplyDelete
  21. have u found any solution for CORS?

    ReplyDelete
  22. hey lenin,

    i am thinking there is some issue with your calling webservice or from your IP. Please check with your system team for any firewall blocks.

    ReplyDelete
  23. This comment has been removed by the author.

    ReplyDelete
  24. This comment has been removed by the author.

    ReplyDelete
  25. no firewall but proxy is running. will be there any problem with that?

    ReplyDelete
  26. check both side. Iam not sure about proxy is a problem. Check with system admin from your ajax call hitting site. In some cases, from ajax call hitting site should enable our calls.

    ReplyDelete
  27. have u done cross domain web service call using ajax. if means that can u please share the code mr balaji

    ReplyDelete