Django——Ajax

1.Ajax概述

对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上。

对比

1、传统的Web应用

一个简单操作需要重新加载全局数据

2、Ajax

  AJAX,Asynchronous JavaScript and XML (异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案。

异步的JavaScript:

  使用 【JavaScript语言】 以及 相关【浏览器提供类库】 的功能向服务端发送请求,当服务端处理完请求之后,【自动执行某个JavaScript的回调函数】

  PS:以上请求和响应的整个过程是【偷偷】进行的,页面上无任何感知。

XML:

 

  X

M

L是一种标记语言,是Ajax在和后台交互时传输数据的格式之一

Ajax的特点:

  1. 异步交互
  2. 浏览器页面局部刷新

Ajax的优点:

  1. Ajax使用Javascirpt向服务器发送异步请求
  2. Ajax无须刷新整个页面

同步交互与异步交互

同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;

异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。

Ajax可以做:

  1. 注册时,输入用户名自动检测用户是否已经存在。
  2. 登陆时,提示用户名密码错误
  3. 删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除。(博客园)

2.基于jQuery的Ajax实现

jQuery.ajax(...) 部分参数: url:请求地址 type:请求方式,GET、POST(1.9.0之后用method) headers:请求头 data:要发送的数据 contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8") async:是否异步 timeout:设置请求超时时间(毫秒) beforeSend:发送请求前执行的函数(全局) complete:完成之后执行的回调函数(全局) success:成功之后执行的回调函数(全局) error:失败之后执行的回调函数(全局) accepts:通过请求头发送给服务器,告诉服务器当前客户端课接受的数据类型 dataType:将服务器端返回的数据转换成指定类型 "xml": 将服务器端返回的内容转换成xml格式 "text": 将服务器端返回的内容转换成普通文本格式 "html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。 "script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式 "json": 将服务器端返回的内容转换成相应的JavaScript对象 "jsonp": JSONP 格式 使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数

 

下面是一个基于jQueryAjax实现登录的demo

模板:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登录</title></head><body><form id="form_login"><input type="text" name="user" /><input type="password" name="pwd" /><span class="msg"></span><input type="button" class="btn-primary" value="提交"></form><script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script><script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script><script> $(".btn-primary").click(function(){ $.ajax({ url: "/login/", method: "post", data: $("#form_login").serialize(), dataType: "json", headers:{"X-CSRFtoken": $.cookie("csrftoken")}, success: function(data){ if(data.status){ location.href="http://www.baidu.com" }else{ $(".msg").html(data.msg).css({"color":"red"}) } } }) })</script> 

 

视图:

from django.http import JsonResponsedef login(request): data = {"status":True, "msg": ‘‘} if request.method == "POST": user = request.POST.get(user) pwd = request.POST.get(pwd) if user == "root": if pwd == "mima": return JsonResponse(data) else: data["status"] = False data["msg"] = "密码错误" else: data["status"] = False data["msg"] = "用户名错误" return JsonResponse(data)

 

相关文章