[gameprogrammer] Re: POST in JSON format?
- From: Kevin Jenkins <gameprogrammer@xxxxxxxxxx>
- To: gameprogrammer <gameprogrammer@xxxxxxxxxxxxx>
- Date: Thu, 24 Jan 2013 19:32:02 -0800
Thanks for all the help. I finally got it working. Here it is if anyone
else wants to know for future reference.
<html>
<head>
<script src="jquery.min.js"></script>
<script type="text/javascript">
function submitForm(in_form)
{
var oJsonData = {};
var result = { };
$.each( in_form, function() {
if (this.type != "button")
{
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>
</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="fndef1" name="firstname"><br>
Last name: <input type="text" value="lndef1" name="lastname"><br>
<button type='button' onClick='submitForm(this.form);'>Submit</button>
</form>
<form name="jsonform2" id="jsonform2" action="dev/account">
First name: <input type="text" value="fndef2" name="firstname"><br>
Last name: <input type="text" value="lndef2" name="lastname"><br>
<button type='button' onClick='submitForm(this.form);'>Submit</button>
</form>
</body>
</html>
On Thu, Jan 24, 2013 at 5:36 PM, Vince <uberneen@xxxxxxxxx> wrote:
> Instead of using a submit, just use a button.
> <button type='button' onClick='submitForm("jsonform1");'>
> <button type='button' onClick='submitForm("jsonform2");'>
>
> function submitForm(in_form)
> {
> ...
> $.each(document.forms[in_form]).etc();
> ...
> }
>
> --- On Fri, 1/25/13, Kevin Jenkins <gameprogrammer@xxxxxxxxxx> wrote:
>
> From: Kevin Jenkins <gameprogrammer@xxxxxxxxxx>
> Subject: [gameprogrammer] Re: POST in JSON format?
> To: "gameprogrammer" <gameprogrammer@xxxxxxxxxxxxx>
> Date: Friday, January 25, 2013, 12:37 AM
>
> Right now it's the same javascript no matter what FORM I use. Is there a
> way to just tell which submit button was pressed? That way I don't have to
> copy/paste the javascript code one time for every form I plan on using.
> There are going to be about 30 forms on that page.
>
>
> On Thu, Jan 24, 2013 at 2:50 PM, Vince <uberneen@xxxxxxxxx> wrote:
>
> $.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
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> ---------------------
> To unsubscribe go to http://gameprogrammer.com/mailinglist.html
>
>
>
Other related posts:
