0

I am not able to send POST/Get requests using jquery. I have a python Flask server set up. Curl requests work perfectly. I could see requests hitting the server but these ajax requests not hitting the server. Below is the code i've been working on.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
      <script>
      $(document).ready(function() {

         $("#b1").click(function() {
             $.ajax({
                 type: 'post',
                 url: 'http://np.mystiq.xyz/paste',
                 complete: function(response) {
                     $('#output').html(response.responseText);
                 },
                 error: function() {
                     $('#output').html('Bummer: there was an error!');
                 },
             });
         });
     });

   </script>
   </head>
   <body>
  <button id="b1">test success </button>
  <div id="output"/>
   </body>
</html>

but this fiddle seems to work http://jsfiddle.net/zc59uLnc/ So issue is with JQuery. Not sure what exactly is the issue. Any help is much appreciated.

deeshank
  • 4,286
  • 4
  • 26
  • 32
  • Is it stuck at cross domain? What if you are requesting it from the same domain? If it is cross domain, set `Access-Control-Allow-Origin` to `*` See more at http://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain – vee Sep 06 '16 at 22:41

2 Answers2

0

Change error to:

error: function(xhr, textStatus, error){
    $('#output').html('Bummer: there was an error!  Check the console for details.');
    console.log(xhr.statusText);
    console.log(textStatus);
    console.log(error);
}

And it should point you to the solution.

GAEfan
  • 11,244
  • 2
  • 17
  • 33
0

Are you sure that your view accepts POST HTTP method? did you test with POST or GET when you were using curl?

The following code works for me:

app.py:

from flask import Flask, jsonify, render_template

app = Flask(__name__)


@app.route('/', methods=['GET'])
def index():
    return render_template('index.html')


@app.route('/hello', methods=['POST'])
def hello():
    return jsonify({'test': 'test message'})


if __name__ == "__main__":
    app.run(host="0.0.0.0", debug=True)

In templates/index.html, I just pasted your template and changed your url to:

url: 'http://my_vm_ip:5000/hello'

instead of:

url: 'http://np.mystiq.xyz/paste'

If you have some cross domain issue, add the following code to your app.py file:

@app.after_request
def after_request(response):
    response.headers.add('Access-Control-Allow-Origin', '*')
    response.headers.add('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')
    response.headers.add('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, OPTIONS')
    return response
ettanany
  • 19,038
  • 9
  • 47
  • 63
  • Yes it accepts POST and curl -X POST 'np.mystiq.xyz/paste' works fine but via ajax it fails – deeshank Sep 07 '16 at 03:33
  • Did you try the code snippet in my answer? and what is the error that you are getting when you load your page? (you can check your chrome console to see the generated errors) – ettanany Sep 07 '16 at 07:56
  • there are no error.. i did try the snippet.. but did not help .. i'm not sure if u checked my edited post.. http://jsfiddle.net/zc59uLnc/ works but not in my code.. – deeshank Sep 07 '16 at 14:31
  • Are you sure you checked that you are not getting any error in your chrome console? please use F12 or Ctrl+Shift+I (on PC) and make sure that nothing is displayed on your console tab. Also, click on Network tab and see if a request is sent when you click on "test success" button. For me I get the correct result when I click on that button. – ettanany Sep 07 '16 at 15:44