[gameprogrammer] Re: POST in JSON format?

  • From: Vince <uberneen@xxxxxxxxx>
  • To: gameprogrammer@xxxxxxxxxxxxx
  • Date: Thu, 24 Jan 2013 14:50:40 -0800 (PST)

$.each('form') uses a selector that basically says, get me all the forms.
In jquery you can use a selector on an object also, so if your form is named or 
indexed you can do something like:
$.each(document.forms[0]) or $.each(document.forms.formname)

--- On Thu, 1/24/13, Kevin Jenkins <gameprogrammer@xxxxxxxxxx> wrote:

From: Kevin Jenkins <gameprogrammer@xxxxxxxxxx>
Subject: [gameprogrammer] Re: POST in JSON format?
To: "gameprogrammer" <gameprogrammer@xxxxxxxxxxxxx>
Date: Thursday, January 24, 2013, 10:01 PM

Thank you Michael.
I'm learning this stuff but haven't figured out the last step. If I have more 
than one form on the page, it gathers up the values from all forms, not just 
the one I clicked submit for. The closest I found was for multiple submit 
buttons, not multiple separate forms
http://stackoverflow.com/questions/5721724/jquery-how-to-get-which-button-was-clicked-upon-form-submission


How would I make the jquery only act on the form I clicked?
<html><head><script src="jquery.min.js"></script>
</head><body><div id="result_string">No results yet</div><br />
<form name="jsonform1" id="jsonform1" action="dev/account">
        First name: <input type="text" value="fndef" name="firstname"><br>      
Last name: <input type="text" value="lndef" name="lastname"><br>
        <input id="action" type="button" name="button" value="Submit"></form>
<script type="text/javascript">
        //<![CDATA[jQuery(function() {  jQuery("#action").click(function() {
                var oJsonData = {};             var result = { };               
$.each($('form').serializeArray(), function() {
                    result[this.name] = this.value;             });             
oJsonData.json = JSON.stringify (result);
                                jQuery.ajax({             type: "POST",         
  url: $('form').attr('action'),
                  data: oJsonData.json,           contentType: 
"application/json; charset=UTF-8"                }).done(function(data){
                        document.getElementById('result_string').innerHTML = 
data;              });     });
});//]> 
</script></body></html>



On Thu, Jan 24, 2013 at 12:28 PM, Michael Croghan <mcroghan@xxxxxxxxxxxxxx> 
wrote:

http://api.jquery.com/jQuery.post/http://api.jquery.com/jQuery.ajax/

// my example //
jQuery.post ("jsontest.php", oJsonData, function(oData) {  
jQuery('#json_string').html(JSON.stringify (oData));});
// your example with an added 'done' callback //

jQuery.ajax({  type: "POST",  url: "dev/account",  data: oJsonData.json,  
contentType: "application/json; charset=UTF-8"}).done(function(data){

  // do whatever here like update an html element //});
I'd look more at the jQuery api.  Widely used, easy to use and makes your front 
end life much less frustrating.


-- Mike
On Thu, Jan 24, 2013 at 10:49 AM, Kevin Jenkins <gameprogrammer@xxxxxxxxxx> 
wrote:


I figured out how to set the headers (below).
In my code below, you can see I'm submitting the form to the url dev/account  
which has an associated servlet. In that servlet, I want to return some HTML as 
a test 


resp.getWriter().println( "TEST RESPONSE" );

How would I, after pressing submit on the form, view that response? Is there a 
way to change the URL to dev/account? Or to update index.html to just show it?



My ultimate purpose of this is so that an external website can submit through a 
web form some stuff to my java server, and display the results back. But for 
now I'm just putting all the forms on one index.html so I can rapidly test 
without having to use restclient



Thanks in advance.
Code here:
<form id="jsonform">    First name: <input type="text" value="fndef" 
name="firstname"><br>


        Last name: <input type="text" value="lndef" name="lastname"><br>        
<input id="action" type="button" name="button" value="Submit">


</form><script type="text/javascript">jQuery(function() {       
jQuery("#action").click(function() {
                var oJsonData = {};             var result = { };               
$.each($('form').serializeArray(), function() {


                    result[this.name] = this.value;             });             
oJsonData.json = JSON.stringify (result);


                                jQuery.ajax({             type: "POST",         
  url: "dev/account",


                  data: oJsonData.json,           contentType: 
"application/json; charset=UTF-8"                });


        });});


On Thu, Jan 24, 2013 at 8:06 AM, Kevin Jenkins <gameprogrammer@xxxxxxxxxx> 
wrote:



Thanks for these helpful responses.
Michael, does index.php have to be php, or can I use index.html so I can test 
on my local system? From the code I think you are submitting the form to 
itself, then running PHP to add the two header fields? There's no way to do 
this with javascript?





On Wed, Jan 23, 2013 at 11:52 PM, Michael Croghan <mcroghan@xxxxxxxxxxxxxx> 
wrote:




simple example with jQuery

On Wed, Jan 23, 2013 at 11:38 PM, Paulo Pinto <pjmlp@xxxxxxxxxxxxx> wrote:





You cannot do JSON POST directly from forms.

The only way is via Ajax requests.

So you need to bind the click event for the "Ok" button to a JavaScript 
function that calls the





server side with an Ajax call.



On Thu, Jan 24, 2013 at 7:41 AM, Kevin Jenkins <gameprogrammer@xxxxxxxxxx> 
wrote:






Sorry for not being clear. I'm OK on the server side because I'm writing it in 
Java and am using json-lib to read the body of the post. But for testing I want 
to write a webpage that can do a POST from an HTML form







<form>
First name: <input type="text" name="firstname"><br>







Last name: <input type="text" name="lastname"><br><input type="submit" 
value="Submit">







</form>


With that code the body is not in JSON format. I was wondering if there was a 
simple way to make any form put the body in JSON format. Or lacking that, at 
least how to hand-craft it so that it is. I found some javascript code online 
but it didn't work, that is what I was alluding to.









On Wed, Jan 23, 2013 at 9:51 PM, Michael Croghan <mcroghan@xxxxxxxxxxxxxx> 
wrote:







Didn't think about server side. :)
One way half-a-dozen ways depending on what specifically you're trying to do.








On Wed, Jan 23, 2013 at 9:39 PM, Alan Wolfe <alan.wolfe@xxxxxxxxx> wrote:

btw... a sly trick i use sometimes when i have http questions of this

sort is i'll go ask on the libcurl mailing list (shh)



People tend not to consider it off topic, and they will actually think

that you are trying to achieve something with libcurl (mostly i am,

but not always) - and there's a lot of super knowledgeable people

there with regards to this sort of thing.



On Wed, Jan 23, 2013 at 9:36 PM, Alan Wolfe <alan.wolfe@xxxxxxxxx> wrote:

> i think it partly depends on the server understanding your intentions

> (ie apache vs IIS vs WCF even, are different if i recall correctly),

> but the official content-type is "application/json" according to the

> RFCs

>

> http://tools.ietf.org/html/rfc4627

>

> doesn't do a lick of good if that doesn't work for you though (:

>

> On Wed, Jan 23, 2013 at 9:19 PM, Kevin Jenkins

> <gameprogrammer@xxxxxxxxxx> wrote:

>> Does anyone know how to do an HTML form POST using JSON format? I searched

>> online but couldn't find any clear explanations or source-code that actually

>> worked.



---------------------

To unsubscribe go to http://gameprogrammer.com/mailinglist.html





















Other related posts: