请求的 URL 不允许使用该方法

Question

I don't what is causing this to make error.Maybe I think it's a small thing to be changed but I am not able to find this.Please help me through this. What i want to dis send the file address to server and format it for something,that code I haven't added but the address is not being formatted.Help will be appreciated

    <div class="container">
         <form class="form-signin" method="post" role="form">
             <h2 class="form-signin-heading">Please Sign Up </h2>
             <div>
             <input type="text" name="address" placeholder="Drivers" class="form-control col-3 mr-4">
        </div>
        <div>
            <button class="btn btn-outline-light d-inline-block" style="width: 150px;float: left;" id="upload">Upload</button>
        </div>
        </form>
     </div>

$(function() {
     console.log("working")
    $('#upload').click(function() {
        console.log("inside is working")
        $.ajax({
            url: '/signUpUser',
            data: $('form').serialize(),
            type: 'POST',
            success: function(response) {
                console.log(response)
                console.log(data.address);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/signUpUser', methods=['GET','POST'])
def signUpUser():
    if request.method=='POST':
        address=request.form['address']
    return jsonify({'address':address}); 

Answer 1

Method not allowed means the route has not been set up for GET or most likely POST , this error is coming from your API meaning you haven't specified on your route what method it should be so it fails. I'm pretty sure it defaults to GET but if you're calling POST then it will complain at you with this error. Without seeing your api code that's about as much help as we can give.

Answer 2

The problem is because you've not prevented the standard form submission. This means that you're sending a standard form request to the current page, which is not configured to receive POST requests, hence the error you see.

To fix the problem attach a submit event handler to the form instead and call preventDefault() on the event which is provided as an argument to the handler function;

$(function() {
  $('form.form-signin').on('submit', function(e) {
    e.preventDefault();

    $.ajax({
      url: '/signUpUser',
      data: $(this).serialize(),
      type: 'POST',
      success: function(response) {
        console.log(response)
        // console.log(data.address); < commented out as 'data' is not defined anywhere
      },
      error: function(x, s, e) {
        console.log(x, s, e);
      }
    });
  });
});