AJAX

  • 它是js的功能,特点:异步请求,局部刷新

简单请求示例

  • 基于jquery的ajax请求
  • 异步请求,不会刷新页面,页面上用户之前输入的数据都不会丢失
      <p>下面是ajax请求</p>
<div>
<label>
用户名:<input type='text' name='username' id='username'>
</label>
<label>
密码:<input type='text' name='password' id='password'>
</label>
<button id='btn'>提交</button>
</div> <script src='/static/js/jquery.js'></script>
<script>
$('#btn').click(function(){
var uname = $('#username').val();#取到input标签输入的值
var pwd = $('#password').val(); $.ajax({
url:'/login_ajax/', #可以是相对路径,可以是绝对路径,浏览器不会跳到这个路径,这是ajax请求发送请求,往哪里发使用的
type:'post', #请求方法
data:{xx:uname,pp:pwd} #ajax请求携带参数和格式
success:function(res){
#success对应的function表示请求成功(正常)之后自动执行的函数
#res名字随便写,res得到的就是响应数据
console.log(res,typeof res);
}
})
})
</script>

完整的一个ajax登录示例

      <form action='/login/' method='post'>
用户名:<input type='text' name='username' value='{{ uanme }}'>
密码:<input type='text' name='password'>
<button>提交</button>
<span style='color:red;'>{{ error }}</span>
</form> <p>下面是ajax请求</p>
<div>
<label>
用户名:<input type='text' uname='username' id='username'>
</label>
<label>
密码:<input type='text' name='password' id='password'>
</label>
<button id='btn'>提交</button>
<span id='error_msg' style='color:red;font-size:12px;'></span>
</div> <script src='/static/js/jquery.js'></script>
<script>
$('#btn').click(function(){
var uname = $('#username').val()
var pwd = $('#password').val() $.ajax({
url:'/login_ajax/',#可以是相对路径,可以是绝对路径
type:'post',
data:{xx:uname,pp:pwd}
success:function(res){
#success对应的function表示请求成功(正常)之后自动执行的函数
#res名字随便写,res得到的就是响应数据
if (res==='ok'){
#登录成功
location.href='/home/',#跳转页面
}else{
#登录失败
$('#error_msg').text('用户名或者密码错误')
}
}
})
})
</script>

注意点

      $.ajax({
url:'/login__ajax/',#写路径时,如果后台使用的是django框架,那么url路径的后面的斜杠要加上,如果想不加上斜杠,那么需要在django的settings配置文件中加上 APPEND_SLASH=False,并且后台的urls.py文件中的路径要和ajax请求路径对应好,该有斜杠写斜杠,不需要写斜杠的,去掉斜杠
})

在js代码中可以使用url别名反向解析来写路径

      $.ajax({
url:'{% url 'login_ajax' %}',
type:'post',
data:{xx:uname,oo:pwd}
success:function(res){
...
}
})
但是要注意一点,当这段js代码是写到某个js文件中,然后html文件通过script标签的src属性来引入时,你的{% url 'login_ajax' %}语法就不能被模板渲染了,也就是失效了

通过httpresponse响应字典类型数据

      list.html文件内容
$('#btn').click(function(){
$.ajax({
url:'/data/',
type:'get',
success:function(res){
console.log(res,typeof res);
//{"name":"xx","hobby":["女","gay"]} 这个是从后台序列化传过来的数据,所以是string类型
var res_dict =JSON.parse(res) //反序列化成字典object
//var hobby = res_dict['hobby']
var hobby = res_dict.hobby; //['女','gay']
console.log(hobby); //将数据放到li标签中,然后添加到ul标签中进行列表数据展示
for (var i=0;i<res.length;i++){
var content = res[i]
var liStr = `<li>${concent}</li>`
$('ul').append(liStr)
}
}
})
}) views.py文件内容
import json
def data(request):
data_list = {'name':'xx','hobby':['女','gay']}
date_list_str = json.dumps(data_list,ensure_ascii=False)
#ensure_ascii=False把传输过后显示的unicode正常显示为中文
#直接使用HttpResponse回复字典类型数据,那么会将字典里面的元素的键都拼接成一个字符串来响应,所以不是我们想要的结果,所以我们先将字典类型数据,转换成json字符串,在通过HttpResponse来进行响应
return HttpResponse(data_list_str) urls.py内容如下
url(r'^data/',views.data)

JsonResponse

      views.py文件
import json
def data(request):
data_list = {'name':'xx','hobby':['女','gay']}
#第一种方式,直接通过httpresponse回复字典数据,那么ajax接收到数据之后,需要自行反序列化
data_list_str = json.dumps(data_list,ensure_ascii=False)
#直接使用httpresponse回复字典类型数据,那么会将字典里面元素的键都拼接成一个字符串来响应,所以不是我们想要的结果,所以我们先将字典类型数据,转换成json字符串,在通过httpresponse来进行响应
return HttpResponse(data_list_str) #第二种方式:通过HttpResponse回复字典数据,回复之前,加上一个响应头键值对,如下,那么ajax收到这个响应数据的时候,会查看这个响应头,发现content-type这个响应头的值为application/json,那么会自动对响应数进行反序列化,不需要我们自己手动反序列化了
#手动加上ret['content-type'] ='application/json'响应头
ret = HttpResponse(data_list_str)
ret['content-type'] = 'application/json'
return ret #第三种方式 JsonResponse
#JsonResponse主要做两件事,1.序列化数据,2.加上['content-type']='application/json'这个响应头键值对
return JsonResponse(data_list) #三种方式总结:
第一种需要自己序列化和反序列化,
第二种需要先序列化,然后加响应头自动反序列化,
第三种是直接自动序列化和反序列化 注意点:
hobby_list = ['女','gay']
#当使用JsonResponse回复非字典类型数据时,需要将safe参数的值改为False
return JsonResponse(hobby_list,safe=False)

请求头消息格式分析

      请求消息格式和请求方法没有关系
和请求头键值对中的这一组键值对有关系
Content-Type:application/x-www-form-urlencoded;//浏览器发送数据ajax或者form表单,默认的格式都是它
它表示请求携带的数据格式,application/x-www-form-urlencoded对应的数据格式:a=1&b=2 socket 接收到我们请求数据,会分析一下Content-Type: application/x-www-form-urlencoded;这个请求头 # 叫做解析器
if Content-Type == 'application/x-www-form-urlencoded':
data = 'a=1&b=2'
l1 = data.split('&') [a=1,b=2]
for i in l1:
k,v = i.split('=')
if 请求方法 == 'GET':
request.GET[k] = v elif Content-Type == 'multipart-formdata':
request.FILES #django没有内置对appcation/json的消息格式的解析器,所以如果请求数据 <script>
$('#sub').click(function () {
var a = $('[name="a"]').val(); #通过name属性找到标签
var b = $('[name="b"]').val();
$.ajax({
url:'/sub/',
{#type:'get',#}
type:'post',
headers:{
'Content-Type':'application/json',
},
{#data:{aa:a,bb:b},#}
data:JSON.stringify({aa:a,bb:b}),
// /sum/?aa=1&bb=2
// 也就是说,如果请求方法为get,那么data属性中的键值对数据,会自动拼接到请求路径后面,作为查询参数来携带请求数据
success:function (res) {
alert(res);
}
})
})
</script>

django学习第十天---ajax请求和JsonResponse的更多相关文章

  1. Django学习之十: staticfile 静态文件

    目录 Django学习之十: staticfile 静态文件 理解阐述 静态文件 Django对静态文件的处理 其它方面 总结 Django学习之十: staticfile 静态文件 理解阐述     ...

  2. Django 学习第十天——状态保持及表单

    状态保持: 1.http协议是无状态的:每次请求都是一次新的请求,不会记得之前通信的状态 2.客户端与服务器端的一次通信,就是一次会话实现状态保持的方式:在客户端或服务器端存储与会话有关的数据 3.存 ...

  3. Django学习系列之结合ajax

    AJAX简介 什么是AJAX AJAX = 异步JavaScript 和 XML(Asynchronous JavaScript and XML) 通过在后台于服务器进行少量数据交换,AJAX可以使网 ...

  4. JavaScript原生封装ajax请求和Jquery中的ajax请求

    前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果.Ajax 在浏览器与 Web 服务器之间使用异步 ...

  5. ajax请求和aspx返回数据

    ajax请求: $(function () {            $.ajax({                url: "index.aspx?method=send",  ...

  6. Django学习之十二:Cache 缓存组件

    目录 Django Cache 缓存组件 缓存逻辑伪代码 配置缓存源 可配置参数说明 01. Django的默认缓存 02. 基于Redis的django-redis 03. 自定义cache 04. ...

  7. 原生ajax请求和jsonp

    1.原生ajax请求 var obj = new XMLHttpRequest(); obj.open("POST", url, true); obj.setRequestHead ...

  8. Django学习之十四:Django ORM继承关系

    目录 Django ORM继承关系 1. SINGLE_TABLE(django好像不支持) 2. TABLE_PER_CLASS 3. JOINED 4. 代理继承 Django ORM继承关系 参 ...

  9. Django之前后端交互使用ajax的方式

    1. 在项目中前后端数据相互是一种常态, 前后端交互使用的是ajax请求和form表单的请求两种方式" ajax与form表单的区别在于: form 是整个页面刷新提交的,  但是ajax ...

  10. Django学习笔记(8)——前后台数据交互实战(AJAX)

    这里将自己这段时间学习的关于前后台数据交互的笔记写在这里,这里包含了Django传输数据给JS,AJAX的相关问题,跨域问题,如何解决AJAX的跨域问题等等.比较凌乱,请看到这篇博客的盆友见谅,如果我 ...

随机推荐

  1. date的命令使用.

    date命令的使用 1.直接用date命令显示日期时间 在命令行中输入date然后回车,显示结果"Wed Aug 7 08:58:07 CST 2019".这是系统根据设定的时区显 ...

  2. vuex标准化看这篇文章就够了~

    1.新建一个store文件夹,新建index.js文件,内容如下: import Vue from 'vue' import Vuex from 'vuex' import state from '. ...

  3. c++基础之函数

    距离上次更新又过了一周,又该更新新的读书笔记了.本次更新的主要是c++中函数部分的内容 c++ 中的函数与c语言中的函数大致用法或者语法是一样的,这里就不就这点详细展开了.需要注意的是c/c++中并没 ...

  4. 3.3 Windows驱动开发:内核MDL读写进程内存

    MDL内存读写是一种通过创建MDL结构体来实现跨进程内存读写的方式.在Windows操作系统中,每个进程都有自己独立的虚拟地址空间,不同进程之间的内存空间是隔离的.因此,要在一个进程中读取或写入另一个 ...

  5. 21.12 Python 实现网站服务器

    Web服务器本质上是一个提供Web服务的应用程序,运行在服务器上,用于处理HTTP请求和响应.它接收来自客户端(通常是浏览器)的HTTP请求,根据请求的URL.参数等信息生成HTTP响应,并将响应返回 ...

  6. 关闭表单验证/关闭控制台async-validator警告

    找到util.js node_modules -> async-validator -> es -> util.js 将console.warn(type, errors)注释 如果 ...

  7. Windows XP Professional with Service Pack 3 (x86)

    Windows XP Professional with Service Pack 3 (x86) 链接:https://pan.baidu.com/s/1p99vLx5psoq9K4ONlRpkZA ...

  8. PID 控制在医学麻醉过程血压控制中的应用|期末课程设计|PID控制器|自动控制原理

    前言 那么这里博主先安利一些干货满满的专栏了! 首先是博主的高质量博客的汇总,这个专栏里面的博客,都是博主最最用心写的一部分,干货满满,希望对大家有帮助. 高质量博客汇总https://blog.cs ...

  9. System V|共享内存基本通信框架搭建|【超详细的代码解释和注释】

    前言 那么这里博主先安利一下一些干货满满的专栏啦! 手撕数据结构https://blog.csdn.net/yu_cblog/category_11490888.html?spm=1001.2014. ...

  10. 小知识:NFS卡死问题处理

    现象: df -h发现长时间卡住,无法显示结果. 根据以往运维经验,通常df -h这种操作都无法显示时,首先就要确认是否有NFS挂载的目录,如果有,确认NFS目录是否正常. 这是最常见的情况,最近又遇 ...