<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .error{ color:red } </style> </head> <body> <form class="Form"> <p>姓名 <input class="v1" type="text" name="username" mark="用戶名"></p> <p>密碼 <input class="v1" type="text" name="email" mark="郵箱"></p> <p><input type="submit" value="submit"></p> </form> <script src="jquery-3.1.1.js"></script> <script> $(".Form :submit").click(function(){ flag=true; $("Form .v1").each(function(){ var value=$(this).val(); if (value.trim().length==0){ var mark=$(this).attr("mark"); var $span=$("<span>"); $span.html(mark+"不能爲空!"); $span.prop("class","error"); $(this).after($span); setTimeout(function(){ $span.remove(); },800); flag=false; return flag; } }); return flag }); </script> </body> </html>
AJAX常見應用情景
當咱們在百度中輸入一個「老」字後，會立刻出現一個下拉列表！列表中顯示的是包含「傳」字的4個關鍵字。css
其實這裏就使用了AJAX技術！當文件框發生了輸入變化時，瀏覽器會使用AJAX技術向服務器發送一個請求，查詢包含「傳」字的前10個關鍵字，而後服務器會把查詢到的結果響應給瀏覽器，最後瀏覽器把這4個關鍵字顯示在下拉列表中。html
- 整個過程當中頁面沒有刷新，只是刷新頁面中的局部位置而已！
- 當請求發出後，瀏覽器還能夠進行其餘操做，無需等待服務器的響應！
當輸入用戶名後，把光標移動到其餘表單項上時，瀏覽器會使用AJAX技術向服務器發出請求，服務器會查詢名爲zhangSan的用戶是否存在，最終服務器返回true表示名爲lemontree7777777的用戶已經存在了，瀏覽器在獲得結果後顯示「用戶名已被註冊！」。前端
- 整個過程當中頁面沒有刷新，只是局部刷新了；
- 在請求發出後，瀏覽器不用等待服務器響應結果就能夠進行其餘操做；
AJAX的優缺點
優勢：
- AJAX使用Javascript技術向服務器發送異步請求；
- AJAX無須刷新整個頁面；
- 由於服務器響應內容再也不是整個頁面，而是頁面中的局部，因此AJAX性能高；
缺點：
- 對服務器形成的壓力較大
jquery實現的ajax
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="{% static 'JS/jquery-3.1.1.js' %}"></script>
</head>
<body>
<button class="send_Ajax">send_Ajax</button>
<script>
//$.ajax的兩種使用方式:
//$.ajax(settings);
//$.ajax(url,[settings]);
$(".send_Ajax").click(function(){
$.ajax({
url:"/handle_Ajax/",
type:"POST",
data:{username:"Yuan",password:123},
success:function(data){
alert(data)
},
//=================== error============
error: function (jqXHR, textStatus, err) {
// jqXHR: jQuery加強的xhr
// textStatus: 請求完成狀態
// err: 底層經過throw拋出的異常對象，值與錯誤類型有關
console.log(arguments);
},
//=================== complete============
complete: function (jqXHR, textStatus) {
// jqXHR: jQuery加強的xhr
// textStatus: 請求完成狀態 success | error
console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText);
console.log('textStatus: %s', textStatus);
},
//=================== statusCode============
statusCode: {
'403': function (jqXHR, textStatus, err) {
console.log(arguments); //注意：後端模擬errror方式：HttpResponse.status_code=500
},
'400': function () {
}
}
})
})
</script>
</body>
</html>
view：
View Code
import json,time def index(request): return render(request,"index.html") def handle_Ajax(request): username=request.POST.get("username") password=request.POST.get("password") print(username,password) time.sleep(10) return HttpResponse(json.dumps("Error Data!"))
簡單的使用示例
前端頁面
View Code
{% load static %}
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <h3>index</h3> <p class="name"></p> <button class="s1">send_ajax</button> <hr> <input type="text" id="n1">+<input type="text" id="n2">=<input type="text" class="sum"> <button class="cal">計算</button> <hr> {% csrf_token %} <h4>校驗用戶名是否存在</h4> <input type="text" id="user"><span></span> <script src="{% static "jquery-3.2.1.min.js" %}"></script> <script> $(".s1").click(function () { // 觸發ajax事件 // ajax的無參請求 $.ajax({ url: "/ajax_handle/", type: "get", success: function (data) { console.log(data); $(".name").text(data) } }) }); // ajax發送參數 $(".cal").click(function () { $.ajax({ url: "/cal/", data: {"num1":$("#n1").val(),"num2":$("#n2").val()}, success: function (data) { $(".sum").val(data) } }) }); $("#user").blur(function () { $.ajax({ url: "/jiaoyan_user/", type: "post", data: { "user":$("#user").val(), "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val() }, success: function (data) { var data = JSON.parse(data); if (data["is_reg"]){ $("#user").next().text(data["error_msg"]).css("color","