使用 Ajax 发出 POST 请求

Question

I want to send email to my flask server using Ajax but its not working.
Below is my Code.
Script:

    <script type="text/javascript">
        $(document).ready(function(){
            var email = "";
         $("#letter").on("click",function(){
             email = $("letterEmail").val();
            $.ajax({
                type: 'POST',
                url: '/letters',
                data: JSON.stringify({Email: email}),
                contentType: 'application/json;charset=UTF-8'

            });
            $("#lettersForm").html("Sent");
            console.log(email.toString());
        });
        });
        </script>

Python View to handle this:

    @app.route("/letters", methods = ['POST'])
    def letters():
        email = request.json['Email']
        send_email("myemail@example.com","Email",str(email))
        return True

This is the html for the form

    <form id = "lettersForm">
                <div class="row uniform 50%">
                    <div class="8u 12u(mobilep)">
                        <input type="email" name="email" id="letterEmail" placeholder="Email Address" />
                    </div>
                    <div class="4u 12u(mobilep)">
                        <input id = "letter" type="submit" value="Sign Up" class="fit" />
                    </div>
                </div>
            </form>

The problem is data is not sent from client side.
So I also get a KeyError on server side.
Please help.

Answer 1

The KeyError is due to Flask not finding the key. Note if stringify finds an empty email variable it will not include that key in the post automatically.

Also, do not use request.json directly, but instead use request.get_json() .

Answer 2

The client-side problem here is in this line:

email = $("letterEmail").val();

It will try to get any Element in the page with the tagName letterEmail , and I don't think you have it.

Probably, what you want to do here is to get it the Element by its ID:

email = $("#letterEmail").val();