xpath選擇器的使用
阿新 • • 發佈:2020-08-04
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.jsajax傳送資料給後端"></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>
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)後端資料