AJAX

最新推荐文章于 2022-06-19 13:50:53 发布
最新推荐文章于 2022-06-19 13:50:53 发布
阅读量135 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42233629/article/details/84021221
版权

文章目录

AJAX准备知识：JSON

  • 什么是JSON
    • JSON指的是JavaScript对象表示法(JavaScript Object Notation)
    • JSON 是轻量级的文本数据交换格式
    • JSON独立于语言
    • JSON具有自我描述形，更易理解
  • JSON使用JavaScript语法来描述数据对象。但是JSON仍然独立于语言和平台。JSON解析器和JSON库支持许多不同的编程语言
    js中的undefined格式没法转换成json格式
    在这里插入图片描述
    python中操作json数据
    json.dump():往文件中存
    json.dumps():往对象中存
    json.load(): 从一个字符串中加载数据
    json.loads(): 从一个打开的文件中读取数据
    js中操作json数据
    JSON.parse() : 读，从一个字符串中解析数据
    JSON.stringify(): 把js中的数据类型转换成字符串，再转换成字节就可以通过网络传给其他语言了
    例 python中的字典通过python的json模块序列化后传给ajax，ajax再通过Jquery中的json模块解析成他看得懂的类型。这样前端就是json格式数据，后端用python进行相关操作
    NOTE:序列化：（序列，就是有序排列）就是把数据按一定顺序存储，下次读取保留现有状态，有时间或者空间先后关系，
    在这里插入图片描述
    例2 python中的字典通过Django封装的关于Json模块直接传递给浏览器或ajax
    在这里插入图片描述

stringify和parse方法

JavaScript中关于JSON对象和字符串转换的两个方法：
JSON.parse(): 用于将一个JSON字符串转换为JavaScript对象
JSON.stringify用于将JavaScript值转换为JSON字符串
在这里插入图片描述

和XML的比较

JSON格式于2001年Douglas Crockford提出的，目的就是取代繁琐笨重的XML格式
JSON格式有两个显著优点：书写简单，一目了然。符合JavaScript原生语法，可以由解释引擎直接处理。不用另外添加解析代码，所以，JSON迅速被接受。已经成为各大网站交换数据的标准格式。并被写入ECMAScript5，成为标准的一部分。
XML和JSON都使用结构化方法来标记数据，
类似html的标签的语言。

AJAX简介

目的是不用form表单传递数据给js，最开始没有json，只有xml，现都是传递json格式数据了，特点是用js给服务器发请求，而不是form发请求
AJAX(Asynchronous JavaScript And XML),即使使用JavaScript语言于服务器进行异步交互，传输的数据为XML(当然，传输的数据不只是XML)
AJAX不是编程语言，而是一种使用现有标准的新方法，
异步：一个请求没回来就可以发送下一个请求，如果页面有很多触发ajax请求，就是在前一个请求阻塞的情况下可以下一个请求继续执行。ajax请求拿到数据之后，通过JS的Dom操作去修改页面的内容，给用户一种局部刷新的错觉，可以同时向服务器发送很多请求。缺点是滥用时对服务端压力比较大。
FORM表单请求需要刷新页面得到回应才发生下一个请求，如果没有接收到就阻塞了。
在这里插入图片描述
AJAX不能用submit提交，因为type类型submit提交会刷新页面，如果不写type，默认type为submit。一定要指定button的type为button才会按ajax提交。
在这里插入图片描述

原生JS实现的AJAX

  • templates
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/index/" method="post">
    <input type="text" name="num" id="i1">
    <input type="submit" value="submit">
</form>

 <button id="b2">点我发AJAX</button>
<script>
    var b2E = document.getElementById('b2');
    b2E.onclick = function () {
        // new JS中的创建新的XMLHttpRequest对象
        var xmlHttp = new XMLHttpRequest();
        // 打开POST请求往/index/发请求
        xmlHttp.open('POST', '/index/', true);
        // 设置请求的头部。Content-type=..编码方式（form表单默认的enctype）用JS模拟form表单提交数据
        xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        // 发数据，取到用户填写的值,JS中取值是value,innerHTML,innerTEXT
        var num = document.getElementById('i1').value;
        xmlHttp.send('num='+num);
        // 回调，当请求收到后端的响应之后
        xmlHttp.onreadystatechange = function () {
            // 如果请求的状态码为4，并且响应的状态码为200，
            if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
                // 请求被正常响应了，得到一个结果，此结果是views函数中return的内容，保存在responseText中，然后弹框
                alert(xmlHttp.responseText);
            }
        }
    }
</script>
</body>
</html>
  • views
from django.shortcuts import render,HttpResponse
from django.http import JsonResponse

from app01.models import UserInfo
# Create your views here.

def index(request):
    if request.method == 'POST':
        inp = request.POST.get('num')
        return HttpResponse('您刚刚输入的内容是:%s' % inp)
    return render(request, 'index.html')
  • urls
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^index/', views.index),
]

浏览器运行结果如图
在这里插入图片描述
在这里插入图片描述
由于元素JS实现ajax比较繁琐，所以用jQuery实现

  • form表单的post请求和AJAX的post请求的发送到服务器的区别
    AJAX帮助发送到服务端请求而无需刷新整个页面，只是刷新了局部
    在这里插入图片描述
    v在这里插入图片描述
  • JS原生实现AJAX的原理
    在这里插入图片描述
  • 原生JS实现失去焦点时的操作
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" name="num" id="i1">
<script>
    var i1Ele = document.getElementById('i1');
    i1Ele.onblur = function () { // 只要光标点击input外，就能触发该匿名函数，
        // new JS中的创建新的XMLHttpRequest对象
        var xmlHttp = new XMLHttpRequest();
        // 使用POST请求往/index/发请求
        xmlHttp.open('POST', '/index/', true);
        // 设置请求的头部。Content-type=..编码方式（form表单默认的enctype）用JS模拟form表单提交数据
        xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        // 发数据，取到用户填写的值,JS中取值是value,innerHTML,innerTEXT
        var num = i1Ele.value;
        // 把拼接的值发送给后端
        xmlHttp.send('num=' + num);
        // 回调，当请求收到后端的响应之后
        xmlHttp.onreadystatechange = function () {
            // xmlHttp对象有回应了，请求失败和请求发送中都有编码，请求被响应的状态码为4，响应的成功的状态码为200，
            if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
                // 请求被正常响应了，得到一个结果，此结果是views函数中return的内容，保存在responseText中，然后弹框
                // 实现了页面没有刷新的情况下，把数据发送给服务端和客户端。
                alert(xmlHttp.responseText);
            }
        }
    }
</script>
</body>
</html>

jQuery实现AJAX

  • 对于Django来说，无论时AJAX发送的请求还是form表单提交的请求，都是一样的，只要获取到了request.POST或request.GET就可以了。拿到的是QueryDict类型
  • html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" name="num" id="i1">
{% load static %}
<script src={% static 'jquery.js' %}></script>
<script>
    // JQuery中的匿名函数，失去焦点时。
    $('#i1').on('blur', function() {
        // 发送ajax请求
        $.ajax({
            // 往哪里发请求
            url: '/JQueryAJAX/',
            // 发送的方式
            type: 'POST',
            // 发送的数据
            data: {'num':$('#i1').val()
            },
            // 当请求被成功响应后，执行success的匿名函数,res是视图函数中返回值。
            success: function (res) {
                alert(res)},
            // 请求失败后执行error后匿名函数
            error: function (err) {
                alert(err)
            }
        })
    })
</script>
</body>
</html>
  • urls
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^JSAJAX/', views.JSAJAX),
    url(r'^JQueryAJAX', views.JQueryAJAX)
]
  • views
def JQueryAJAX(request):
    if request.method == 'POST':
        inp = request.POST.get('num')
        print(inp)
        return HttpResponse(inp)
    return render(request, 'JQuery实现AJAX.html')

前端知识复习

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
input
在这里插入图片描述
当前请求的IP地址
request.META.get(‘REMOTE_ADDR’)
在这里插入图片描述
p标签中不能包含p标签
在这里插入图片描述
JS控制网页的跳转
在这里插入图片描述
委托事件
在这里插入图片描述
一个选择器使用多次时，赋值给一个变量
在这里插入图片描述
添加属性
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
attr操作属性的，prop获取type为checkbox中是否被选中，选中就返回true。
在这里插入图片描述
在这里插入图片描述
JQuery中的val
在这里插入图片描述
JQuery中与i1同级的下面的p标签设置文本内容为res
在这里插入图片描述

Django项目中ajax如何处理csrftoken

  • html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>欢迎登录</h1>
<div>
    <p>
        <label for="i1">用户名</label>
        <input type="text" id="i1">
    </p>
    <p>
        <label for="i2">密码</label>
        <input type="password" id="i2">
    </p>
    <p>
        <label for="b1"></label>
        <button id="b1">登录</button>
        <span style="color:red"></span>
    </p>
    {% csrf_token %}
</div>
{% load static %}
<script src={% static 'jquery.js' %}></script>
<script>
    $('#b1').click(function(){
        var c = $('[name="csrfmiddlewaretoken"]').val();
        $.ajax({
            url: '/login1/',
            type: 'post',
            // 用ajax携带csrfmiddlewaretoken
            data: {n:$('#i1').val(), p:$('#i2').val(), csrfmiddlewaretoken:c},
            success: function (res) {
                if (res.code === 0){
                    location.href = res.next_url
                }else {
                    $('#b1+span').text(res.err_msg)
                }
            }
        })
    })
</script>
</body>
</html>
  • url
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^JSAJAX/$', views.JSAJAX),
    url(r'^JQueryAJAX/$', views.JQueryAJAX),
    url(r'^register/$', views.register),
    url(r'^login1/$', views.Login1.as_view())
]
  • views
class Login1(views.View):
    def get(self, request):
        return render(request, '在请求中加csrf.html')
    def post(self, request):
        n = request.POST.get('n')
        p = request.POST.get('p')
        is_ok = User.objects.filter(name=n, pwd=p)
        res = {'code': 0}
        if is_ok:
            res['next_url'] = '/register/'
            print(res)
            return JsonResponse(res)
        else:
            res['code'] = 1
            res['err_msg'] = '用户名或密码错误'
            print(res)
            return JsonResponse(res)

AJAX如何上传文件

ajax上传文件的方式和form表单上传文件的方式不一样。

  • views
def upload(request):
    if request.method == 'POST':
        file_obj = request.FILES.get('xx')
        file_name = file_obj.name
        with open(file_name, 'wb') as f:
            for c in file_obj.chunks():
                f.write(c)
            return HttpResponse('上传成功')

    return render(request, 'AJAX上传文件.html')
  • urls
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^JSAJAX/$', views.JSAJAX),
    url(r'^JQueryAJAX/$', views.JQueryAJAX),
    url(r'^register/$', views.register),
    url(r'^login1/$', views.Login1.as_view()),
    url(r'^upload/$', views.upload)
]
  • html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>上传文件</h1>
<input type="file" id="f1">
<button id="b1">上传</button>
{% csrf_token %}
{% load static %}
<script src="{% get_static_prefix %}jquery.js"></script>
<script>
    $('#b1').click(function () {
        var f = new FormData();  // 上传文件时新建一个FormData对象
        var c = $('[name="csrfmiddlewaretoken"]').val();
        // 在新的f中添加键值
        f.append('xx', $('#f1')[0].files[0]); // 取到要上传的文件对象
        f.append('csrfmiddlewaretoken', c);
        $.ajax({
            url: '/upload/',
            type: 'post',
            data: f,
            processData: false, // 告诉jquery不要处理我上传的数据
            contentType: false, // 告诉jquery不要设置请求的内容的文件类型。就会遵循FormData中的类型设置
            success: function (res) {
                console.log(res)
            }
        })
    })
</script>
</body>
</html>

在这里插入图片描述

sweetalert

下载bootstrap_sweetalert项目
bootstrap_sweetalert官网
在这里插入图片描述
在这里插入图片描述

wendy587436
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
python后端数据发送到前端_python如何模拟前端通过JSON.stringify给后端发送数据
weixin_39801158的博客
12-04 1360
在后端有一个函数为defbefore_score(request):ifrequest.is_ajax():print(request.body)temp=json.loads(request.body.decode('utf-8'))request.session['score_stunum']=str(temp['s...在后端有一个函数为def before_score(request):i...
ajax
huangyh技术栈
09-28 3万+
1.1 什么是ajax: Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML)，是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（无刷新...
python发送ajax请求_对python脚本的ajax请求
weixin_39537680的博客
12-22 671
我刚刚测试了我写的剧本。它是用python编写的。我使用ajax发送请求并尝试获得结果。在function ajaxFunction(){var ajaxRequest;var e = document.getElementById("ktype");var ktype = e.options[e.selectedIndex].value;var acookie = document.getEle...
看这一篇就够了！-Ajax详解
Oriental_的博客
03-15 16万+
今天来聊一聊前后端交互的重要工具Ajax 结合上次跟大家分享的前后端交互基础，如果还没有看过的童鞋，以下是传送门 前后端交互详解 AJAX - 到底什么是Ajax? ajax 全名 async javascript and XML 是前后台交互的能⼒ 也就是我们`客户端给服务端发送消息的⼯具，以及接受响应的⼯具 是⼀个 默认异步执⾏机制的功能AJAX分为同步（async = false...
Ajax
C_hydar的博客
02-11 5487
Ajax Ajax 是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。 Ajax = 异步 JavaScript + XML。 Ajax 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 Ajax 用于创造动态性更强的应用程序 Ajax 可用来与数据库进行动态通...
AJAX 详解
06-19 2万+
Ajax基础知识，及常见问题详解
Ajax请求的五个步骤
热门推荐
chaopingyao的博客
06-02 17万+
Ajax请求的五个步骤 一、定义 1、什么是Ajax Ajax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。 2、同步与异步的区别 同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。 异步提交：当用户发送请
AJAX简介
xpmhhh的博客
03-20 6834
AJAX: 全称Asynchronous JavaScript And XML，即异步JS和XML。 通过AJAX可以在浏览器中向服务器发送异步请求。 最大的优势：无刷新的获取数据。 Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 XML: 可扩展标记语言，被设计用来传输和存储数据。 与HTML的区别：HTML中都是预定义的标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。 以前Ajax是用XML格式的字符串进行数据交换，现在已经被JSON取代了。
Ajax请求
weixin_45030426的博客
03-25 1万+
ajax请求简介： ajax是利用前端的技术，向服务器发送一个异步请求 原有的请求在请求后需要刷新整张页面，
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
AJAXCALL
10-31
AJAXCALL
Ajax详解
07-22
资源名称：Ajax详解内容简介：《Ajax 详解》电子书 chm格式，是《四天学会Ajax》一书扩展，更加详细的讲述Ajax的方方面面。 内容简要给大家说明一下：Ajax简介、使用Javaｓｃｒｉｐｔ和Ajax发出异步请求、Ajax中的...
ajax 检测用户名是否被占用
01-21
try { ajax = new ActiveXObject(“Msxml2.XMLHTTP”); } catch (e) { try { ajax = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (E) { ajax = false; } } if (!ajax && typeof XMLHttpRequest!=’...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
SpringBoot整合Ajax
06-01
SpringBoot整合Ajax（无坑源码） 亲测有效，最简单实例 Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况...
AJAX 实例
12-13
AJAX 实例 为了帮助您理解 AJAX 的工作原理，我们创建了一个小型的 AJAX 应用程序: 实例 使用 AJAX 修改该文本内容 修改内容 AJAX 实例解析 上面的 AJAX 应用程序包含一个 div 和一个按钮。 div 部分用于显示来自...
致远OA-ajax.do未授权文件上传漏洞1
最新发布
08-08
近日，致远OA ajaxAction 文件上传漏洞利用代码披露,由于致远OA旧版本中某些接口存在未授权访问，以及部分函数过滤不足，攻击者通过构造恶意请求，可在无
Ajax安全技术
06-14
众所周知，Ajax具备变革互联网的潜力，但危险的新安全威胁同样随之而来。《AJAX安全技术》揭示Ajax框架与生俱来的安全弱点密集区域，为开发人员创造安全应用提供指导。每一章由一个Ajax安全谬误开始，随后即将其揭穿...
Ajax笔记：Ajax基础知识和Ajax开发技巧
Ajax笔记 Ajax是一种异步的JavaScript和XML的结合体，可以在不重新加载整个网页的情况下，实现局部更新网页内容。下面是关于Ajax的详细知识点： 一、 Ajax基本概念 Ajax是Asynchronous JavaScript and XML的缩写...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值