ajax非同步請求關鍵字提示（適用於註冊使用者時顯示已註冊使用者，避免重複）
阿新 • • 發佈：2018-11-01
1.前端程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>staff_insert.html</title> <script src="/static/js/jquery-1.12.4.js"></script> </head> <body> <form action="{% url 'bumen:staff_insert_handler' %}" method="post" enctype="multipart/form-data"> {% csrf_token %} <table> <tr> <td>員工姓名</td> <td> <input id = "sname" name="sname" /> <div id="show"> <ul></ul> </div> </td> </tr> <tr> <td>入職日期</td> <td> <input name='bpubdate'/> </td> </tr> <tr> <td>所屬部門</td> <td> <select name="sdepartment_id"> {% for i in department_list%} <option value="{{i.id}}">{{i.dname}}</option> {%endfor%} </select> </td> </tr> <tr> <td colspan="2"> <input type="submit" /> </td> </tr> </table> </form> <script src="/static/js/jquery-1.12.4.js"></script> <script> $(function () { $("#sname").keyup(function () { console.log($(this).val().trim()) $.ajax({ "url": "/bumen/getsname", "data": { "sname":$(this).val().trim() }, "success": function (data) { $("#show ul").html("") if(data.ret.length!=0){ data.ret.forEach(function (value) { $("#show ul").append("<li>" + '使用者名稱已存在' + "</li>") // $("#show ul").append("<li>" + value["sname"] + "</li>") }) }else { $("#show ul").append("<li>" + '使用者名稱可用'+ "</li>") } }, }) }) }) </script> </body> </html>
（1）可顯示使用者名稱
$("#show ul").append("<li>" + value["sname"] + "</li>")
（2）可靈活改寫成註冊頁面提示使用者名稱已存在
$("#show ul").append("<li>" + '使用者名稱已存在' + "</li>")
2.後端程式碼
def getsname(request): sname = request.GET.get("sname") if sname == "": ret = { "ret": [] } return HttpResponse(json.dumps(ret, ensure_ascii=False), content_type="application/json;charset=utf-8") sname_list = Staff.objects.filter(sname__icontains=sname).values("sname") #icontains:忽略大小寫狀態下的模糊查詢,contains: 精確大小寫狀態下的模糊查詢 info = [] for i in sname_list: d = {} d["sname"] = i["sname"] info.append(d) ret = { "ret": info } return HttpResponse(json.dumps(ret, ensure_ascii=False), content_type="application/json;charset=utf-8")
難點：
（1）icontains:忽略大小寫狀態下的模糊查詢,contains: 精確大小寫狀態下的模糊查詢
sname_list = Staff.objects.filter(sname__icontains=sname).values("sname")
（2）JSON中的object對應的是Python中的dict，因此要對Python中的自定義資料型別的物件進行序列化，就需要先把這個物件轉換成json模組可以直接進行序列化dict型別。由此可知，這個轉換函式是要完成的是Python物件（不是JSON物件）與dict之間的相互轉換，且序列化時轉換過程是“Python物件 --> dict --> JSON object”，
反序列化的過程是“JSON object -> dict --> Python物件”。所以，我們需要編寫兩個轉換函式來分別實現序列化和反序列化時的轉換過程。
(下面這段程式碼為轉換為dict過程)
info = []
for i in sname_list:
d = {}
d["sname"] = i["sname"]
info.append(d)
ret = {
"ret": info
}
（3）JSON中的object對應的是Python中的dict，因此要對Python中的自定義資料型別的物件進行序列化，就需要先把這個物件轉換成json模組可以直接進行序列化dict型別。由此可知，這個轉換函式是要完成的是Python物件（不是JSON物件）與dict之間的相互轉換，且序列化時轉換過程是“Python物件 --> dict --> JSON object”，反序列化的過程是“JSON object -> dict --> Python物件”。所以，我們需要編寫兩個轉換函式來分別實現序列化和反序列化時的轉換過程。
json.dumps(ret, ensure_ascii=False)
同時，json.dumps(ret, ensure_ascii=False)得到型別為Json型別，剛好能傳到前臺，問題解決。
結語：小知識點解釋可參考雲遊道士-部落格園