librelist archives

« back to archive

Using AJAX with Flask

Using AJAX with Flask

From:
Pranav Ravichandran
Date:
2012-06-30 @ 19:21
I'm trying to use AJAX with Python Flask. I have a HTML page with an input
form, and a div. When I type into the form and press enter, I want a POST
request to be sent to the flask server, and when the server responds with
some text, I want the response text to fill the div's contents.

Here's the code. <https://pastee.org/f4yc6>

Sorry about the unclean code, and also, the paste contains two files
templates/index.html and flask.py.

It works fine, except that when I type into the form and press enter, it
shows a new HTML page with the response text. It doesn't put the response
text into the div. I also get a broken pipe error for some reason. Any help
would be much appreciated.

Thanks!

-- 
E-ThoughtDumpyard <http://www.onloop.net/>

Re: [flask] Using AJAX with Flask

From:
Malphas Wats
Date:
2012-06-30 @ 19:30
On Sat, Jun 30, 2012 at 8:21 PM, Pranav Ravichandran <prp.1111@gmail.com> wrote:
> I'm trying to use AJAX with Python Flask. I have a HTML page with an input
> form, and a div. When I type into the form and press enter, I want a POST
> request to be sent to the flask server, and when the server responds with
> some text, I want the response text to fill the div's contents.
>
> Here's the code.
>
> Sorry about the unclean code, and also, the paste contains two files
> templates/index.html and flask.py.
>
> It works fine, except that when I type into the form and press enter, it
> shows a new HTML page with the response text. It doesn't put the response
> text into the div. I also get a broken pipe error for some reason. Any help
> would be much appreciated.
>

When you hit enter, your form submits and causes a new request for the
page. You need to change the onsubmit handler on line 39 to return the
value from your function:

    <input type="submit" value="Submit" onclick="return loadXMLDoc()" />

and you need to return false from your loadXMLDoc() function, that
stops the form from submitting which lets the AJAX request do it's
work.

Re: [flask] Using AJAX with Flask

From:
Pranav Ravichandran
Date:
2012-07-01 @ 04:33
@pronoyc - Thanks, I'll check that out!

@Malphas - I tried that, and I get a POST 400 error. It waits for the
response, forever. I tried to check where the response function might be
stuck, and the problem seems to be with the *username =
request.form['scname']* statement.

Here's the HTML file <http://pastie.org/4180325> and the Python
script.<http://pastie.org/4180320>

I added a couple of print statements to check where it breaks, and the
index() function prints out 'Response Text', but the 'print username'
doesn't seem to work, it fails to fetch the form data.

On Sun, Jul 1, 2012 at 1:00 AM, Malphas Wats <malphas@subdimension.co.uk>wrote:

> On Sat, Jun 30, 2012 at 8:21 PM, Pranav Ravichandran <prp.1111@gmail.com>
> wrote:
> > I'm trying to use AJAX with Python Flask. I have a HTML page with an
> input
> > form, and a div. When I type into the form and press enter, I want a POST
> > request to be sent to the flask server, and when the server responds with
> > some text, I want the response text to fill the div's contents.
> >
> > Here's the code.
> >
> > Sorry about the unclean code, and also, the paste contains two files
> > templates/index.html and flask.py.
> >
> > It works fine, except that when I type into the form and press enter, it
> > shows a new HTML page with the response text. It doesn't put the response
> > text into the div. I also get a broken pipe error for some reason. Any
> help
> > would be much appreciated.
> >
>
> When you hit enter, your form submits and causes a new request for the
> page. You need to change the onsubmit handler on line 39 to return the
> value from your function:
>
>    <input type="submit" value="Submit" onclick="return loadXMLDoc()" />
>
> and you need to return false from your loadXMLDoc() function, that
> stops the form from submitting which lets the AJAX request do it's
> work.
>



-- 
E-ThoughtDumpyard <http://www.onloop.net/>

Re: [flask] Using AJAX with Flask

From:
Simon Sapin
Date:
2012-07-01 @ 07:02
Le 01/07/2012 06:33, Pranav Ravichandran a écrit :
>
> @Malphas - I tried that, and I get a POST 400 error. It waits for the
> response, forever. I tried to check where the response function might be
> stuck, and the problem seems to be with the *username =
> request.form['scname']* statement.
>
> Here's the HTML file <http://pastie.org/4180325> and the Python script.
> <http://pastie.org/4180320>
>
> I added a couple of print statements to check where it breaks, and the
> index() function prints out 'Response Text', but the 'print username'
> doesn't seem to work, it fails to fetch the form data.

Hi,


In general you can use TRAP_BAD_REQUEST_ERRORS = True in Flask’s config 
to debug 400 errors, but here you already know that the problem is with 
scname.

http://flask.pocoo.org/docs/config/


Now on the client side, your XMLHttpRequest is not tied in any way to 
your form: the form data is not sent. You would need to encode the form 
data in the right format, pass it to send() and set the right headers. I 
recommend against doing this yourself as it can be easy to get wrong. 
Use a JavaScript library instead. jQuery is a popular choice.

Regards,
-- 
Simon Sapin

Re: [flask] Using AJAX with Flask

From:
Malphas Wats
Date:
2012-07-02 @ 08:28
On Sun, Jul 1, 2012 at 8:02 AM, Simon Sapin <simon.sapin@exyr.org> wrote:
> Le 01/07/2012 06:33, Pranav Ravichandran a écrit :
>>
>> @Malphas - I tried that, and I get a POST 400 error. It waits for the
>> response, forever. I tried to check where the response function might be
>> stuck, and the problem seems to be with the *username =
>> request.form['scname']* statement.
>>

I've always been a fan of rolling my own Javascript, there's no better
way to learn. That said, I'm probably *horrible* at it.

I reworked your code with a bit of my own and got it working:

  https://gist.github.com/3031823

Few points:
  1. You have to build the POST data to send in the request, line 41 &
42 (I added a second bit of data to show how you would send multiple
values).

  2. Set the request header so that Flask knows it just got some form
data (line 38)

  3. You have to actually point the request at a URL (line 37)

  4. I split the view and request handlers out, so line 37 points to
the method on line 65

  5. I returned the value as JSON (line 68, also note imports at top),
this is decoded in the javascript (line 31)

  6. I changed the submit input to a button, so the form won't ever be
submitted (line 54)

  7. Please don't ever do the thing I did with putting the HTML in a
big global variable, I just wanted everything in one file so it worked
with a single copy and paste :)

I hope this helps. Any other questions, just ask. I'm no javascript
guru, but I always try to do things myself, rather than rely on a
framework I know nothing about.

-Malphas

Re: [flask] Using AJAX with Flask

From:
Simon Sapin
Date:
2012-07-02 @ 08:52
Le 02/07/2012 10:28, Malphas Wats a écrit :
>    1. You have to build the POST data to send in the request, line 41 &
> 42 (I added a second bit of data to show how you would send multiple
> values).

If you want to serialize the form yourself, do encode each value with 
encodeURIComponent and then replace '%20' with '+'


https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/encodeURIComponent
http://www.w3.org/TR/html401/interact/forms.html#form-content-type

Regards,
-- 
Simon Sapin

Re: [flask] Using AJAX with Flask

From:
Malphas Wats
Date:
2012-07-02 @ 10:16
On Mon, Jul 2, 2012 at 9:52 AM, Simon Sapin <simon.sapin@exyr.org> wrote:

> If you want to serialize the form yourself, do encode each value with
> encodeURIComponent and then replace '%20' with '+'
>
> 
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/encodeURIComponent
> http://www.w3.org/TR/html401/interact/forms.html#form-content-type
>

oops, good catch! :) I'll update the gist when I get a moment! Thank you.

Re: [flask] Using AJAX with Flask

From:
Pranav Ravichandran
Date:
2012-07-02 @ 13:37
I got it working with jquery, and now I'm trying out Malphas's code. I'm
glad to learn it both ways ;) Thanks a ton for the help, people!

On Mon, Jul 2, 2012 at 3:46 PM, Malphas Wats <malphas@subdimension.co.uk>wrote:

> On Mon, Jul 2, 2012 at 9:52 AM, Simon Sapin <simon.sapin@exyr.org> wrote:
>
> > If you want to serialize the form yourself, do encode each value with
> > encodeURIComponent and then replace '%20' with '+'
> >
> >
> 
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/encodeURIComponent
> > http://www.w3.org/TR/html401/interact/forms.html#form-content-type
> >
>
> oops, good catch! :) I'll update the gist when I get a moment! Thank you.
>



-- 
E-ThoughtDumpyard <http://www.onloop.net/>

Re: [flask] Using AJAX with Flask

From:
Pranav Ravichandran
Date:
2012-07-03 @ 14:17
I have a situation where the backend takes quite some time to process. For
instance, I'm parsing multiple pages and returning scraped output from all
these pages as one huge string, so the frontend shows the loader gif for
quite a while.

Is it possible for me to send the output in chunks? Like, once the first
chunk is received, it's put into the div, and as more chunks are received,
the div keeps expanding, so the user doesn't have to wait for a long while
for the whole output, and can instead deal with chunks of output as they
keep populating the div. Can I do this with one AJAX call?

On Mon, Jul 2, 2012 at 7:07 PM, Pranav Ravichandran <prp.1111@gmail.com>wrote:

> I got it working with jquery, and now I'm trying out Malphas's code. I'm
> glad to learn it both ways ;) Thanks a ton for the help, people!
>
>
> On Mon, Jul 2, 2012 at 3:46 PM, Malphas Wats <malphas@subdimension.co.uk>wrote:
>
>> On Mon, Jul 2, 2012 at 9:52 AM, Simon Sapin <simon.sapin@exyr.org> wrote:
>>
>> > If you want to serialize the form yourself, do encode each value with
>> > encodeURIComponent and then replace '%20' with '+'
>> >
>> >
>> 
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/encodeURIComponent
>> > http://www.w3.org/TR/html401/interact/forms.html#form-content-type
>> >
>>
>> oops, good catch! :) I'll update the gist when I get a moment! Thank you.
>>
>
>
>
> --
> E-ThoughtDumpyard <http://www.onloop.net/>
>
>


-- 
E-ThoughtDumpyard <http://www.onloop.net/>

Re: [flask] Using AJAX with Flask

From:
Michael Johnston
Date:
2012-07-04 @ 13:59
Yes. I recently implemented a chat server in Flask that does just that. I 
wasn't doing it because I needed to transfer large amounts of data, I just
wanted efficiency. When the user loads the chat room, I make an AJAX call 
to my server for the the 'all messages until now' JSON. Then, at regular 
intervals, I poll and get the new messages. I store the data in an array 
which is then used to populate the div. But you could also send straight 
HTML from the server and append it as well. The later approach is easier 
to manage, while the former gives you much greater flexibility. 



On Tuesday, July 3, 2012 at 10:17 AM, Pranav Ravichandran wrote: 
> I have a situation where the backend takes quite some time to process. 
For instance, I'm parsing multiple pages and returning scraped output from
all these pages as one huge string, so the frontend shows the loader gif 
for quite a while. 
> 
> Is it possible for me to send the output in chunks? Like, once the first
chunk is received, it's put into the div, and as more chunks are received,
the div keeps expanding, so the user doesn't have to wait for a long while
for the whole output, and can instead deal with chunks of output as they 
keep populating the div. Can I do this with one AJAX call?
> 
> On Mon, Jul 2, 2012 at 7:07 PM, Pranav Ravichandran <prp.1111@gmail.com 
(mailto:prp.1111@gmail.com)> wrote:
> > I got it working with jquery, and now I'm trying out Malphas's code. 
I'm glad to learn it both ways ;) Thanks a ton for the help, people!
> > 
> > 
> > On Mon, Jul 2, 2012 at 3:46 PM, Malphas Wats 
<malphas@subdimension.co.uk (mailto:malphas@subdimension.co.uk)> wrote:
> > > On Mon, Jul 2, 2012 at 9:52 AM, Simon Sapin <simon.sapin@exyr.org 
(mailto:simon.sapin@exyr.org)> wrote:
> > > 
> > > > If you want to serialize the form yourself, do encode each value with
> > > > encodeURIComponent and then replace '%20' with '+'
> > > >
> > > > 
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/encodeURIComponent
> > > > http://www.w3.org/TR/html401/interact/forms.html#form-content-type
> > > >
> > > 
> > > oops, good catch! :) I'll update the gist when I get a moment! Thank you.
> > 
> > 
> > 
> > -- 
> > E-ThoughtDumpyard (http://www.onloop.net/)
> > 
> 
> 
> 
> -- 
> E-ThoughtDumpyard (http://www.onloop.net/)
> 

Re: [flask] Using AJAX with Flask

From:
Budi Arief Gusandi
Date:
2012-07-03 @ 14:35
How big is your data?

I've never experienced doing streaming with ajax, but if you have very
large data, consider to cache the file and do several ajax request to get
chunk of the file. For example if text has 1000 lines, you can chunk it 100
per request.
On Jul 3, 2012 9:17 PM, Pranav Ravichandran <prp.1111@gmail.com> wrote:

> I have a situation where the backend takes quite some time to process. For
> instance, I'm parsing multiple pages and returning scraped output from all
> these pages as one huge string, so the frontend shows the loader gif for
> quite a while.
>
> Is it possible for me to send the output in chunks? Like, once the first
> chunk is received, it's put into the div, and as more chunks are received,
> the div keeps expanding, so the user doesn't have to wait for a long while
> for the whole output, and can instead deal with chunks of output as they
> keep populating the div. Can I do this with one AJAX call?
>
> On Mon, Jul 2, 2012 at 7:07 PM, Pranav Ravichandran <prp.1111@gmail.com>wrote:
>
>> I got it working with jquery, and now I'm trying out Malphas's code. I'm
>> glad to learn it both ways ;) Thanks a ton for the help, people!
>>
>>
>> On Mon, Jul 2, 2012 at 3:46 PM, Malphas Wats <malphas@subdimension.co.uk>wrote:
>>
>>> On Mon, Jul 2, 2012 at 9:52 AM, Simon Sapin <simon.sapin@exyr.org>
>>> wrote:
>>>
>>> > If you want to serialize the form yourself, do encode each value with
>>> > encodeURIComponent and then replace '%20' with '+'
>>> >
>>> >
>>> 
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/encodeURIComponent
>>> > http://www.w3.org/TR/html401/interact/forms.html#form-content-type
>>> >
>>>  oops, good catch! :) I'll update the gist when I get a moment! Thank
>>> you.
>>
>>
>>
>>
>>  --
>> E-ThoughtDumpyard <http://www.onloop.net/>
>>
>>
>
>
> --
> E-ThoughtDumpyard <http://www.onloop.net/>
>
>

Re: [flask] Using AJAX with Flask

From:
pronoyc@gmail.com
Date:
2012-06-30 @ 19:28
>
> I'm trying to use AJAX with Python Flask. I have a HTML page with an input
> form, and a div. When I type into the form and press enter, I want a POST
> request to be sent to the flask server, and when the server responds with
> some text, I want the response text to fill the div's contents.
>
> Here's the code. <https://pastee.org/f4yc6>
>
> Sorry about the unclean code, and also, the paste contains two files
> templates/index.html and flask.py.
>
> It works fine, except that when I type into the form and press enter, it
> shows a new HTML page with the response text. It doesn't put the response
> text into the div. I also get a broken pipe error for some reason. Any help
> would be much appreciated.
>


Flask-Sijax <http://packages.python.org/Flask-Sijax/> my man.

Use it, it's totally worth it. It does everything you've asked for.

-- 
Regards,

Pronoy Chopra
http://blog.pronoy.in <http://www.pronoy.in/about>/
http://www.twitter.com/pronoyc