django-Ajax,局部刷新技術

小編:啊南 4閱讀 2020.12.21

不刷新頁面局部提交數據 其實也并不難,就是直接用的jq封裝好的代碼即可 直接上代碼吧,
如果使用了ajax的話,就不需要form表單了。因為沒意義了 *** 首先你得需要一個用戶名輸入框,和一個密碼輸入框,在加一個button提交按鈕, *** {% csrf_token %} #賬號<input type=”text” name=”name” id=”username”><br> 密碼<input type=”text” name=”pwd” id=”password”><br> <button id=”sub”>提交</button> 記得加上csrf_token噢 *** 最主要的是里面的id,用于后面js獲取到輸入的值, 然后開始js的編寫 *** 首先引入js *** <script src=”https://code.jquery.com/jquery-3.1.1.min.js”></script>

*** 這樣就可以引入了, *** 然后綁定點擊事件 *** $(‘#sub’).click(function)(){ 獲取用戶名框的值 var user=$(‘#username’).val(); 獲取密碼框的值 var pwd=$(‘#password’).val(); 構造csrftoken var csrf$(‘[name=csrfmiddlewaretoken’]).val(); 然后開始ajax $.ajax({ 提交的url相當于form的action url:’login’, 提交類型,get or post type:’post’; 提交的數據放在data里面,需要注意的是,如果是post提交,會有csrf提示,這個時候如果使用ajax的方式提交數據,就需要構造鍵值對了, 鍵的名字為:csrfmiddlewaretoken 值是{%csrf_token%} data:{username=user,password:pwd}, 請求成功后的操作 success:function(res){ console.log(res); if (res===’1′){ 登錄成功之后提示信息 $(‘.s’).text(‘登錄成功’); 接著重新請求另一個界面 location.href=(‘/’); }else{ $(‘.s’).text(‘登錄失敗’); } } }) } *** 一定要注意的地方就是data,因為沒有了form表單,后端接收數據的時候建議先打印request.POST,查看一下query字典集,然后在取數據即可,直接POST.get鍵 即可取值,很方便,也很酷 *** 通過后臺的打印request.POST可以看到 *** <QueryDict: {‘username’: [‘123’], ‘password’: [‘123’], ‘csrfmiddlewaretoken’: [‘l5erlhqdIdaqjzCysd3LJxkGzRImCy6 CFDdxfX29Pp1YwN399WtgZL7ue84VWzuy’]}> ***

關聯標簽:
欧美日韩在线精品视频二区_日本高清在线精品一区_天天看片天天av免费观看