Python內建資料結構----bytes和bytearray

阿新 • • 發佈：2020-08-05

1、什麼是ajax?

　　1.AJAX 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。

　　2.AJAX = Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML）。

　　3.AJAX 不是新的程式語言，而是一種使用現有標準的新方法。

2、ajax與傳統開發模式的區別：

　　ajax開發模式：頁面將使用者的操作通過ajax引擎與伺服器進行通訊，將返回的結果給ajax引擎，然後ajax將資料插入指定位置。

　　傳統的開發模式：使用者的每一次操作都觸發一次返回伺服器的HTTP請求，伺服器做出處理後，返回一個html頁面給使用者。

3、ajax的使用：

1、ajax傳送字串資料

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>註冊</title>
    <script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="../static/js/main.js 
"></script>
</head>
<body>

<form method="post" enctype="multipart/form-data" id = "add_form">

    使用者名稱：<input type="text" name="name" id="name">
    <br>

    郵箱：<input type="text" name="email" id = "email">
    <br>

    密碼：<input type="text" name=" 
pwd" id = "pwd">
    <br>

    確認密碼：<input type="text" name="pwd1" id = "pwd1">
    <br>

    手機號：<input type="text" name="phone" id = "phone">
    <br>

    身高：<input type="text" name="height" id = "height">
    <br>

    圖  片：<input type="file" name="picture1" id = "picture1">
    <br>


    <input type="submit" id = "regist">


</form>

<script>
    $(function () {
        $("#regist").click(function () { 
            {#用標籤選擇器獲取需要的值#}
            var name = $("#name").val();   
            var email = $("#email").val();
            var pwd = $("#pwd").val();
            var pwd1 = $("#pwd1").val();
            var phone = $("#phone").val();
            var height = $("#height").val()
                {#傳送ajax請求#}
                .ajax({
                    url:"/user/add",  
                    type:"post",
                    data:{"name":name,
                          "email":email,
                          "phone":phone,
                          "pwd":pwd,
                          "pwd1":pwd1,
                          "height":height},
                    {#成功後執行的函式#}
                    success:function (res) {
                        if (res.code == 200){
                            {#重定向#}
                            window.location.href="/user/login"
                        }else {
                            alert(res.message)
                        }
                    {#失敗後執行的函式    #}
                    error:function f() {
                        alert("新增失敗，請重新新增");
                        window.location.href="/user/add"
                        }
                    }
                })

        })

    })



</script>

</body>

ajax傳送資料給後端

def adduser():

    if request.method =="POST":
        name = request.form.get("name")
        pwd = request.form.get("pwd")
        pwd1 = request.form.get("pwd1")
        email = request.form.get("email")
        phone = request.form.get("phone")
        height = request.form.get("height")
        picture1 = request.files.get("picture1")
        print(picture1,name)



        # print(name,pwd,pwd1,email,phone,height)

        if not all([name,pwd,pwd1,email,phone,height]):
            flash("資料不完整，新增完整")

        role_phone = r'1[\d]{10}$'
        role_email = r"[\w]+@[\w]+\.[a-z]{2,3}$"

        result_phone = re.match(role_phone,phone)

        result_email = re.match(role_email,email)

        if not result_email:
            flash("郵箱格式不正確，請檢查")
            return redirect("/user/add")

        if not result_phone:
            flash("手機號有誤，請檢查")
            return redirect("/user/add")

        if  pwd != pwd1:
            flash("兩次密碼不一致，請檢查")
            return redirect("/user/add")

        flag = False
        try:
            # print(1111111)
            print(type(phone),type(height),type(pwd),type(email),type(pic_filename))
            user1 = User(name=name,email=email,password=pwd,phone=phone,height= int(height),pic_name = pic_filename)
            db.session.add(user1)
            db.session.commit()
            # print(22222222)
            if user1:
                flag =True

        except Exception as e:
            # raise e
            db.session.rollback()
            flash("新增失敗，重新新增")
            return redirect("/user/add")


        if flag:
            return redirect("/user/show")

    return render_template("adduser.html")

後端處理ajax請求

2、ajax傳送檔案資料

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增圖片</title>
    <script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="../static/js/main.js"></script>
</head>
<body>

<form enctype="multipart/form-data" id="uploadForm">
      <input type='file' name='xxx' id='pic_img'>
      <input type='button' onclick='upload()' value='點選上傳'>
 </form>

</body>

<script>
    function upload(){
    var formData = new FormData($("#uploadForm")[0])  //建立一個forData
    formData.append('img', $('#pic_img')[0].files[0]) //把file新增進去  name命名為img
    $.ajax({
        url: "/add/picture",
        data:formData,
        type: "POST",
        async: false,
        {#當async屬性的值為false時是同步的，Ajax請求將整個瀏覽器鎖死，只有ajax請求返回結果後，才執行ajax後面的alert語句。#}
        {#當async屬性的值為true時是非同步的，即不會等待ajax請求返回的結果，會直接執行ajax後面的alert語句。#}
        cache: false,
        {#cache：true 如果當前請求有快取的話，直接使用快取。如果該屬性設定為 false，則每次都會向伺服器請求#}
        contentType: false,
        {#我們在 form 標籤中設定了enctype = “multipart/form-data”,這樣請求中的 contentType 就會預設為 multipart/form-data 。
        而我們在 ajax 中 contentType 設定為 false 是為了避免 JQuery 對其操作，從而失去分界符，而使伺服器不能正常解析檔案。#}
        processData: false,
        {#傳送的資料將被轉換為物件（從技術角度來講並非字串）以配合預設內容型別"application/x-www-form-urlencoded"。#}
        {#如果要傳送DOM樹資訊或者其他不希望轉換的資訊，請設定為false#}
        success: function(data) {
             if (data.code == 200) {
                 alert("success")
             }
        },
        error: function() {
              //失敗
            alert("fail ")
        }
      })
}


</script>


</html>

ajax傳送檔案資料

@addinfo.route("/add/picture",methods = ["POST","GET"])
def add_picture():
    if request.method == "POST":
        picture1 = request.files.get("img")
        pic_filename = picture1.filename
        pic_filename_list = pic_filename.split(".")
        pic_filename_list[0] = pic_filename_list[0] + str(int(time.time()))
        pic_filename = ".".join(pic_filename_list)

        path = basepath + "/static"
        upload_path = os.path.join(path, pic_filename)
        picture1.save(upload_path)
        message= {
            "code":200
        }

        return jsonify(message)
    else:
        message = {
            "code": 500
        }
        return jsonify(message)

後端獲取資料

3.ajax分頁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示</title>
    <script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.pagination.min.js"></script>

</head>
<body>

<table border="1" cellspacing="0">
    <div>
    <tr>
        <td>使用者名稱</td>
        <td>郵箱</td>
        <td>手機號</td>
        <td>身高</td>
        <td>圖片</td>
        <td>操作</td>
    </tr>

    {% for user in users %}

        <tr>
            <td>{{ user.name }}</td>
            <td>{{ user.email }}</td>
            <td>{{ user.phone }}</td>
            <td>{{ user.height }}</td>
            <td><img src="{{ url_for('static', filename= user.pic_name) }}" width="400" height="400" alt="圖片載入失敗 "></td>

            <td>
                <a href="">編輯</a>
                <a href="">刪除</a>
            </td>
        </tr>
    {% endfor %}
    </div>
</table>

<br>
<br>


<div id="pagination" class="page"></div>

<script>
        // 呼叫父頁面的方法改變選單指示
        // window.parent.fnChangeMenu(2);
        $(function () {
            $("#pagination").pagination({
                currentPage: {{ page }},
                totalPage: {{ total_page }},
                //當點選頁碼連結時，會執行如下函式
                callback: function (current) {
                    //引數current表示當前連結代表的頁碼值
                    //不寫地址表示當前地址，即當前為新聞列表地址
                    //?page=1
                    location.href='?page='+current;
                }
            });
        });
</script>
</body>
</html>

ajax分頁

@showuser.route("/user/show")
@check_login
def showinfo():

    page = int(request.args.get('page', '1'))
    pagination = User.query.filter_by().paginate(page, 2, False)
    user_list = pagination.items
    total_page = pagination.pages
    return render_template("showinf.html",users=user_list,
        total_page=total_page,
        page=page)