碼上歡樂
相關內容    簡體    繁體

form表單/ajax/bootstrap

本文轉載自   查看原文   2019-01-28 20:43   781 

一、DOM

'''
// sup.append(sub); 在sup的最后方添加sub
// $('body').append($box);
​
// sub.appendTo(sup); 將sub插入到sup的最后放
// $box.appendTo($('body'));
​
// sup.prepend(sub); 在sup的最前方添加sub
// $('body').prepend($box);
​
// 在wrapper后添加box
// $('.wrapper').after($box);
​
// box插入到wrapper前
// $box.insertBefore($('.wrapper'))
​
// 所有wrapper被box替換
// $('.wrapper').replaceWith($box)
​
// 用box把所有的wrapper替換掉
// $box.replaceAll($('.wrapper'))
​
// $('.wrapper').empty();
// $('.wrapper').html("");
​
$('.ele').click(function () {
    alert($(this).text())
});
​
// 自刪: remove()不保留事件  detach()保留事件
// var $ele = $('.ele').remove();
var $ele = $('.ele').detach();
​
'''
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>DOM操作</title>
    <style>
        .wrapper {
            width: 450px;
            margin: 50px auto;
            background-color: pink;
        }
        .wrapper:after {
            content: "";
            display: block;
            clear: both;
        }
        .box {
            width: 150px;
            height: 150px;
            background-color: red;
            border-radius: 50%;
            float: left;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <!--3 x 3的9個圓-->
        <!--重復來創建 => 循環-->
        <!--<div class="box"></div>-->
        <!--<div class="box"></div>-->
        <!--<div class="box"></div>-->
        <!--<div class="box"></div>-->
        <!--<div class="box"></div>-->
        <!--<div class="box"></div>-->
        <!--<div class="box"></div>-->
        <!--<div class="box"></div>-->
        <!--<div class="box"></div>-->
    </div>
    <!--<div class="wrapper"></div>-->
​
    <div class="ele">123</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    // 1.創建頁面元素對象
    var $box = $('<div></div>');
​
    // 2.操作頁面元素對象
    $box.addClass('box');
    console.log($box);
​
    // 3.添加到頁面的指定位置
    // $('.wrapper').append($box);
​
    // sup.append(sub); 在sup的最后方添加sub
    // $('body').append($box);
​
    // sub.appendTo(sup); 將sub插入到sup的最后放
    // $box.appendTo($('body'));
​
    // sup.prepend(sub); 在sup的最前方添加sub
    // $('body').prepend($box);
​
    // 在wrapper后添加box
    // $('.wrapper').after($box);
​
    // box插入到wrapper前
    // $box.insertBefore($('.wrapper'))
​
    // 所有wrapper被box替換
    // $('.wrapper').replaceWith($box)
​
    // 用box把所有的wrapper替換掉
    // $box.replaceAll($('.wrapper'))
​
    // $('.wrapper').empty();
    // $('.wrapper').html("");
​
    $('.ele').click(function () {
        alert($(this).text())
    });
​
    // 自刪: remove()不保留事件  detach()保留事件
    // var $ele = $('.ele').remove();
    var $ele = $('.ele').detach();
​
    console.log($ele);
    $('body').append($ele);
​
​
</script>
​
<script>
    // 0.前提: 布局
    for (var i = 0; i < 9; i++) {
        // 1.創建
        var $box = $('<div class="box"></div>');
        // 2.設置
        $box.click(function () {
            alert($(this).index())
        });
        // 3.添加
        $('.wrapper').append($box);
    }
</script>
</html>
View Code

二、表單

```html
<!-- action: 請求的后台鏈接地址 -->
<!-- method: 請求方式 get | post -->
<form action="" method="post">
    <!--可以提交給后台的數據: 必須有唯一標識, 用name屬性來標識-->
​
    <!--表單元素對象input通過設置type來實現不同的功能-->
    <div>
        <label for="usr">用戶名:</label>
        <input type="text" id="usr" name="usr" value="000">
    </div>
    <div>
        <label for="pwd">密碼:</label>
        <input type="password" id="pwd" name="pwd" placeholder="請輸入密碼">
    </div>
    
    <!--文本域-->
    <textarea></textarea>
    
    <!--列表-->
    <select name="sex">
        <option value="male">男</option>
        <option value="female">女</option>
        <option value="other">哇塞</option>
    </select>
​
    <!--單選框, name來關聯, checked為默認選中項-->
    <div>
        男<input type="radio" name="gender">
        女<input type="radio" name="gender" checked>
    </div>
​
    <!--復選框, name來關聯-->
    <div>
        愛好:
        男<input type="checkbox" name="like" value="male">
        女<input type="checkbox" name="like" value="female" checked>
    </div>
    
    <div>
        <button type="button">普通按鈕</button>
        <button type="reset">重置</button>
        <button type="submit">提交</button>
        <input type="submit" value="我也是提交">
    </div>
</form> 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表單</title>
</head>
<body>
​
<div class="box">獲取用戶名輸入框內容</div>
​
<form action="" method="post">
    <!--可以提交給后台的數據: 必須有唯一標識-->
​
    <!--表單元素對象input通過設置type來實現不同的功能-->
    <div>
        <label for="usr">用戶名:</label>
        <input type="text" id="usr" name="usr" value="000">
    </div>
    <div>
        <label for="pwd">密碼:</label>
        <input type="password" id="pwd" name="pwd" placeholder="請輸入密碼">
    </div>
    
    <!--文本域-->
    <textarea></textarea>
    
    <!--列表-->
    <select name="sex">
        <option value="male">男</option>
        <option value="female">女</option>
        <option value="other">哇塞</option>
    </select>
​
    <!--單選框-->
    <div>
        男<input type="radio" name="gender">
        女<input type="radio" name="gender" checked>
    </div>
​
    <!--復選框-->
    <div>
        愛好:
        男<input type="checkbox" name="like" value="male">
        女<input type="checkbox" name="like" value="female" checked>
    </div>
    
    <div>
        <button type="button">普通按鈕</button>
        <button type="reset">重置</button>
        <button type="submit">提交</button>
        <input type="submit" value="我也是提交">
    </div>
</form>
</body>
<script src="js/jquery-3.3.1.js"></script>
​
<script>
    $(function () {
        $('.box').click(function () {
            // val()就是表單元素對象的內容, 對應html就是value全局屬性
            var val = $('#usr').val();
            if (val) {
                $(this).text(val);
            }
        });
​
        // 如何取消form表單默認事件 => 目的:拿到表單數據,用ajax來提交給后台
        // form: 提交數據一定會刷新頁面
        // ajax: 可以完成局部數據刷新
        // $('form').submit(function () {  // 取消form表單的默認事件, 不主動提交數據
        //     return false;
        // });
​
        
        $('button').click(function () {
            console.log("提交按鈕點擊了")
        })
    })
</script>
</html>
View Code

三、flask實現簡易后台

from flask import Flask, request
from flask_cors import CORS
​
# 創建服務器對象
app = Flask(__name__)
# 解決跨越, 數據在兩個服務器之間傳輸
CORS(app, supports_credentials=True)
​
# 將請求路徑與邏輯函數形成一一對應關系
@app.route('/') # http://127.0.0.1:5000/
def home():
    return "<h1>主頁</h1>"
​
@app.route('/index') # http://127.0.0.1:5000/index
def index():
    return "<h1 style='text-align:center;color:red'>index頁面</h1>"
​
@app.route('/test') # http://127.0.0.1:5000/test
def test():
    # print(request)
    # print(type(request))
    a = request.args['a'] # 通過request對象的args拿到前台數據
    b = request.args['b']
    return a + b
​
# 為form表單登錄請求提供處理邏輯 => 前端一定會出現頁面轉跳
@app.route('/login')
def login():
    usr = request.args['usr']
    pwd = request.args['pwd']
​
    if usr == 'abc' and pwd == '123':
        return "登錄成功頁面"
    return "登錄失敗頁面"
​
​
@app.route('/loginAjax')
def login_ajax():
    usr = request.args['usr']
    pwd = request.args['pwd']
​
    if usr == 'abc' and pwd == '123':
        return "登錄成功"
    return "登錄失敗"
​
# 自啟文件, 啟動falsk服務器
if __name__ == "__main__":
    app.run()  # port=6666 可以設置端口號

五、form請求后台(會在服務器地址上發送頁面轉跳, 不需要處理跨越問題)

<!--action: 請求的鏈接地址 -->
<form action="http://127.0.0.1:5000/login" method="get">
    <div class="row">
        <label for="usr">用戶名:</label>
        <input id="usr" name="usr" type="text" placeholder="請輸入用戶名">
    </div>
    <div class="row">
        <label for="pwd">密碼:</label>
        <input id="pwd" name="pwd" type="password" placeholder="請輸入密碼">
    </div>
    <div class="row">
        <button type="submit">登錄</button>
    </div>
</form>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登錄</title>
</head>
<body>
<!--action: 請求的鏈接地址 -->
<form action="http://127.0.0.1:5000/login" method="get">
    <div class="row">
        <label for="usr">用戶名:</label>
        <input id="usr" name="usr" type="text" placeholder="請輸入用戶名">
    </div>
    <div class="row">
        <label for="pwd">密碼:</label>
        <input id="pwd" name="pwd" type="password" placeholder="請輸入密碼">
    </div>
    <div class="row">
        <button type="submit">登錄</button>
    </div>
</form>
</body>
</html>
View Code

六、ajax請求后台(數據在兩個服務器上傳遞, 需要處理跨越問題)

<h1>登錄</h1>
<form action="" method="">
    <div class="row">
        <label for="usr">用戶名:</label>
        <input id="usr" name="usr" type="text" placeholder="請輸入用戶名">
    </div>
    <div class="row">
        <label for="pwd">密碼:</label>
        <input id="pwd" name="pwd" type="password" placeholder="請輸入密碼">
    </div>
    <div class="row">
        <button type="submit">登錄</button>
    </div>
</form>
​
<script src="js/jquery-3.3.1.js"></script>
<script>
    // 取消form表單默認提交數據的事件
    $('form').submit(function () {
        return false;
    });
​
    // 用button點擊發送ajax請求來完成數據交互 => 局部刷新
    $('button').click(function () {
        console.log("ajax請求...");
        // 獲取用戶輸入的賬戶密碼
        var usrStr = $('#usr').val();
        var pwdStr = $('#pwd').val();
​
        // ajax發送前台請求
        $.ajax({
            url: "http://127.0.0.1:5000/loginAjax",  // 請求地址
            data: {
                usr: usrStr, // 把用戶數據提交給后台的key
                pwd: pwdStr
            },
            success: function (arg) { // 請求成功的回調函數 arg后台返回的數據結果
                console.log(arg);
                // 局部刷新前台頁面內容
                $('h1').text(arg);
            }
        })
​
    })
​
</script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ajax登錄</title>
</head>
<body>
<h1>登錄</h1>
<form action="" method="">
    <div class="row">
        <label for="usr">用戶名:</label>
        <input id="usr" name="usr" type="text" placeholder="請輸入用戶名">
    </div>
    <div class="row">
        <label for="pwd">密碼:</label>
        <input id="pwd" name="pwd" type="password" placeholder="請輸入密碼">
    </div>
    <div class="row">
        <button type="submit">登錄</button>
    </div>
</form>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    // 取消form表單默認提交數據的事件
    $('form').submit(function () {
        return false;
    });
​
    // 用button點擊發送ajax請求來完成數據交互 => 局部刷新
    $('button').click(function () {
        console.log("ajax請求...");
        // 獲取用戶輸入的賬戶密碼
        var usrStr = $('#usr').val();
        var pwdStr = $('#pwd').val();
​
        $.ajax({
            url: "http://127.0.0.1:5000/loginAjax",  // 請求地址
            data: {
                usr: usrStr, // 把用戶數據提交給后台的key
                pwd: pwdStr
            },
            success: function (arg) { // 請求成功的回調函數  arg后台返回的數據結果
                console.log(arg);
                $('h1').text(arg);
            }
        })
    })
​
</script>
</html>
View Code

七、bootstrap入門

　　用bootstrap規定好的html結構來構建html結構, 再給具體的標簽特定的類名(特定的全局屬性),就能實現特定的頁面樣式與功能。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bs入門</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
        #hehe {
            color: red;
            font-size: 100px;
        }
    </style>
</head>
<body>

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>


<button type="button" class="btn btn-warning">按鈕</button>
<i class="glyphicon glyphicon-arrow-down"></i>

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li class="dropdown-header">我是分組標題</li>
        <li class="bg-success"><a href="#">123</a></li>
        <li class="disabled"><a href="#">123</a></li>
        <li class="dropdown-header">我是分組標題</li>
        <li><a href="#" id="hehe">123</a></li>
    </ul>
</div>

<!--用bs規定好的html結構來構建html結構, 再給具體的標簽特定的類名(特定的全局屬性)-->
<!--就能實現特定的頁面樣式與功能-->
</body>
<script src="js/jquery-3.3.1.js"></script>
<!--注: bs是基於jq框架-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script>

    $('#hehe').click(function () {

        alert("呵呵");
        return false;
    })
</script>

</html>
View Code


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 ajax提交form表單 ajax(ajaxSubmit)提交form表單 AJAX異步提交form表單 ajax form表單，前后端交互 ajax提交整個form表單 Bootstrap 清空表單form select2賦值 導出excel用ajax不行，提交form表單可以 form表單提交前進行ajax驗證 使用ajax方法實現form表單的提交 使用ajax方法實現form表單的提交
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM