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. [转帖]Linux内核映像vmlinux、Image、zImage、uImage区别

    https://zhuanlan.zhihu.com/p/466226177 本文介绍几种常用的Linux内核映像的区别. 一.vmlinux vmlinux:Linux内核编译出来的原始的内核文件, ...

  2. Linux下面rsync 实现 完全一致的同步方法

    1. 在某些特殊的linux机器上面, 比如龙芯后者是飞腾服务器,部分工具不太好用, 需要使用x86弄好之后进行同步过去, 这个时候scp 最简单但是网络流量非常大, 不如使用rsync, rsync ...

  3. Oracle 查看所有表大小的SQL

    Oracle 查看所有表大小的SQL 比较坑的是 lob 字段和 表的大小不在一个地方 为了出结果 我这边使用了 union all 慢的一逼... SELECT sum( tablesize ), ...

  4. rabbitmq rpm包安装以及简单设置用户的方法

    公司有一台性能比较好的power机器. 同事要求安装rabbitmq 今天尝试进行了一下处理 公司里面有网络有相应的源 性能还不错 第一步安装一下依赖的erlang yum install erlan ...

  5. 栈:数据结构中的后进先出(LIFO)容器

    栈是一种基本的数据结构,广泛应用于计算机科学和编程中,用于管理数据的存储和访问.栈遵循后进先出(Last In, First Out,LIFO)原则,即最后放入栈的元素首先被取出.这种数据结构模拟了物 ...

  6. 基于.net Core+EF Core项目的搭建(一)

    在我们要使用EF的项目中引用两个包Microsoft.EntityFrameworkCore.SqlServer和Microsoft.EntityFrameworkCore.Tools 我把要使用的E ...

  7. ​【心理学CPCI收录,AP独立出版】 2023年应用心理学与现代化教育国际学术会议(ICAPME 2023)

    ​[心理学CPCI收录,AP独立出版] 2023年应用心理学与现代化教育国际学术会议(ICAPME 2023) 大会官网:www.icapme.org 大会时间:2023年9月22-24日 大会地点: ...

  8. 手把手教学小型金融知识图谱构建:量化分析、图数据库neo4j、图算法、关系预测、命名实体识别、Cypher Cheetsheet详细教学等

    手把手教学小型金融知识图谱构建:量化分析.图数据库neo4j.图算法.关系预测.命名实体识别.Cypher Cheetsheet详细教学等 效果预览: 1. 知识图谱存储方式 知识图谱存储方式主要包含 ...

  9. 数据挖掘机器学习[七]---2021研究生数学建模B题空气质量预报二次建模求解过程:基于Stacking机器学习混合模型的空气质量预测{含码源+pdf文章}

    相关文章: 特征工程详解及实战项目[参考] 数据挖掘---汽车车交易价格预测[一](测评指标:EDA) 数据挖掘机器学习---汽车交易价格预测详细版本[二]{EDA-数据探索性分析} 数据挖掘机器学习 ...

  10. 【8】同步vscode配置和插件【导入导出】、再也不用担心换电脑重新安装插件了

    相关文章: [1]VScode中文界面方法-------超简单教程 [2]VScode搭建python和tensorflow环境 [3]VSCode 主题设置推荐,自定义配色方案,修改注释高亮颜色 [ ...