<!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","