0

I used ajax call to send data to server from a form and receive data as a jsonify. But I'm getting Error that "The method is not allowed for the requested URL." and I cannot what is wrong with the code. This is form data.

<form class="form-submit" method="post"   role="form">
    <div class="input-group">
         <input name="userID" id="userID" type="text" class="form-control width100" placeholder="Input User ID" style="width: 80%;">
              <span class="input-group-btn">
                   <button id="button" class="btn btn-secondary" type="submit"><i class="fa fa-search"></i></button>
              </span>
    </div>
 </form>

Following is ajax call to post data. Here I'm calling from post.html.

$('#button').click(function (event) {                
      $.ajax({
           data:{
               userID : $('#userID').val()
           },
           type : "POST",
           url : '/charts'
      }).done(function (data) {
           console.log(data.id);
      });
      event.preventDefault();
  });

And Here is my relevant code.

@app.route('/posts',methods=["POST"])
def posts():
    if request.method == "POST":
        id = request.form['userID']
        return jsonify({"id": id})
    return render_template('posts.html')

I cannot figure out what is the problem with this. For this I'm getting both errors which are, 

POST http://127.0.0.1:5000/posts 405 (METHOD NOT ALLOWED)

and

GET http://127.0.0.1:5000/favicon.ico 404 (NOT FOUND)

Can anyone help me with this. I checked all the relevant questions and didn't found a help.

SjAnupa
  • 102
  • 10
  • The 'method not allowed' error seems to indicate that your server needs to be configured to accept incoming POST requests. (The 'favicon not found' error is probably unimportant.) – Cat Jun 08 '20 at 06:22
  • how can I do that – SjAnupa Jun 08 '20 at 06:24
  • I don't remember the details, but you often have to set these kinds of permissions in HTTP headers. You might need this one: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Methods (As an overview of HTTP, I think the browser sends a 'preflight' request and the server responds with some info about what's allowed, then the browser sends the "real" request and waits for the server's response.) Also, googling your error message turned up this: https://stackoverflow.com/questions/17333013/jquery-ajax-post-request-throws-405-method-not-allowed-on-restful-wcf – Cat Jun 08 '20 at 06:43
  • The error indicates that your ajax call does a POST request to /posts route, not /charts route. Your posts route only allows GET requests, hence the error. You need to find out why /charts route is not being requested. – gittert Jun 08 '20 at 07:06
  • I cannot find it, If I remove chart method and combined it to post method will it be a solution, because return data loads to same page.Edited like that – SjAnupa Jun 08 '20 at 07:38

0 Answers0