views:

68

answers:

2

hi, i want to send a json string from a html webpage using javascript to a WCF.. is there any good tutorial for that?

this is the code i am using

<head> 
   <title>Test</title> 
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt; 
   <script type="text/javascript" src="http://www.json.org/json2.js"&gt;&lt;/script&gt; 
   <script type="text/javascript"> 
     $(function() { 
      JSONStringer json = new JSONStringer()

                      .object()   
                      .key("cno").value("2000")
                      .key("cname").value("HI")
                      .key("cmail").value("HI")
                      .key("cphno").value("9292")
                      .key("cmailtype").value("Home")
                      .key("cphnotype").value("Office")
                      .key("clientno").value("1")

                    .endObject();
       var dat = JSON.stringify(json.serializeArray()); 

       alert("I am about to POST this:\n\n" + dat); 

       $.post( 
         frm.attr("action"), 
         dat, 
         function(data) { 
           alert("Response: " + data); 
         } 
       ); 
     }); 
   </script> 
</head> 

let me know where i have to post it to a particular service.. something like specifying the URL

A: 

http://www.learn-ajax-tutorial.com/Json.cfm

  1. Get json.js.
  2. Encode array or object in to json.
  3. Do Ajax.Request to post the json string. Simplez!

That is pretty much all you need, not sure about the WCF side but if it is a proper webservice then all you need is the descriptor to figure out the function names and their parameters.

jambox
Use http://www.json.org/json2.js instead of json.js
Jan
@jambox: is there any possibity of doing this job without ajax? i want it simple javascript don't want to make it complex for a sample program.
Adhavan
@jan: i am using this file but its not doing the job.
Adhavan
Well you could hand craft the http post I guess (!) but that would make it harder, not simpler. Doing an AJAX request is pretty much as simple as it gets. Think of it this way - you need to do 2 things: 1. encode your data as a JSON string 2. post the data somehow. If you want something to make AJAX even simpler you could try JQuery or pyjamas (the latter really does make it a no-brainer)
jambox
@Adhavan: I use it to serialize and parse json. I am pretty sure that it works. Unless you are trying to do something different with it. Have you read the comment at the top of the file? It explains how it works and how to use it.
Jan
@jambox: s i am looking something in jQuery!
Adhavan
@Jan: i suppose the problem is not with that file. let me post my code.by that you all can spot me the error.i am very new to java.
Adhavan
I hope you mean 'javascript', because otherwise this is the wrong thread for you.
Jan
+1  A: 

I think you are mixing up java with javascript. Despite their names they are not related to each other in any way. As far as I know, JSONStringer doesn't exist in javascript nor jquery. JSON stands for JavaScript Object Notation, so that means it is very native to the javscript languages (with some subtle differences). Since it's so close it is very easy to parse Json in javascript.

Also, javascript is a dynamically typed language so supplying the type as you did normally results in a parse error. Use firebug or the Chrome console when your code doesn't work. You will see an error when the browser was unable to parse your code.

for the serialization you probably want to use (in a browser that supports JSON and/or with json2.js)

var dat = JSON.stringify({
  cno: 2000,
  cname: 'HI',
  cmail: 'HI',
  cphno: '9292',
  cmailtype: 'home',
  cphnotype: 'Office',
  clientno: 1
});

The url goes where you have put frm.attr("action"). I don't see where you create the frm object. I don't think you need a JQuery object for that, document.getElementById is supported in all major browsers and I bet it is faster too.

var myForm = document.getElementById('myformid');
$.post( 
  myForm.action, 
  dat, 
  function(data) { 
    alert('Response: ' + data); 
  } 
); 

Also as far as I know, postdata has to be in query parameter format so perhaps you need to put something like

'myData=' + dat,

Copy/pasting code from the web can get things started quickly but a lot of javascript programmers forget that you have to understand the language first. Don't just blindly copy code, try to understand what happens. Try to solve problems first without a library and discover where you actually need a library.

Jan