文章出處：http://blog.csdn.net/lvhuiyang/article/details/53192277

html的預設方式提交

<form  action="/server_url" method="post" id="form"><!--提交地址-->
    <input type="text" name="username" class="username" placeholder="請輸入您的使用者名稱！">
    <input type="password" name="password" class="password" placeholder
 
="請輸入您的使用者密碼！"><inputtype="tel"name="telphone"class="tel"placeholder="請輸入您的電話號碼！">
    <input type="submit" class="submit_button" id="submit_button" value="登入"><button type="reset" class="reset_button">重置</button></form>

• 1
• 2
• 3
• 4
• 5
• 6

這一種提交方式無話可說，需要注意的是form標籤內的 action屬性負責提交的地址，method是提交的方式（get/post）。

2. 使用jquery進行控制

有時候我們需要對賬號密碼的輸入進行控制，比如要判斷輸入框是否為空，為空的話進一步提醒使用者。為了方便使用jQuery進行操作，如下：

$(document).ready(function () {
    $("#submit_button").click(function () {
        var username = $('.username').val();
        var password = $('.password').val();var telphone = $('.tel').val();
        if (username == ''
 
) {
            alert("請輸入賬號");
            return false;
        }
        else {
            if (password == '') {
                alert("請輸入密碼");
                return false;
            }elseif (tel == '') {                returnfalse;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

注意一點就是如果不符合要求的話最後要返回false,不然彈出對話方塊之後還是會提交，關於這一點的原理之後再補，先挖坑。

3.使用ajax進行提交

同樣使用jQuery，程式碼如下

$(document).ready(function () {
    $("#submit_button").click(function () {
         var username = $('.username').val();
          var password = $('.password').val();
          alert(username + ' \n' + password);
          $.post(
                                  '{{ url_for('main.login') }}',
                  {username: username, password: password},
                  function () {
                    window.location.href = 'http://www.baidu.com';});
    });

});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

注意post方法的格式 $.post(url, data , callback())，使用flask時後端進行的重定向，但是前端頁面並沒有跳轉，原因可能是ajax本身對於頁面的控制，或者說ajax的特性並不能使頁面進行跳轉，解決方法是 callback()函式中可以設定對頁面進行跳轉。