jQuery - Ajax的使用详解(主要简单试做了两个案例)

最新推荐文章于 2024-05-01 18:46:44 发布

半离岛

最新推荐文章于 2024-05-01 18:46:44 发布

阅读量914

点赞数

分类专栏：全栈开发学习记录文章标签： jquery ajax 前端 html5 python css3 django

本文链接：https://blog.csdn.net/m0_52336378/article/details/131348227

版权

全栈开发学习记录专栏收录该内容

10 篇文章 4 订阅

订阅专栏

文章目录

前言
一. Ajax入门案例（计算器）
- 代码示例：
二. Ajax登录验证案例
- 代码实现：
三. 前后端数据传输的编码格式

前言

首先学习前提出几个问题进行对Ajax的了解

什么是Ajax？
Ajax怎样进行使用
Ajax的功能？
同步与异步的区别？
前端向后端发起请求的方式有哪些？

1. Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指⼀种创建交互式⽹⻚应⽤的⽹⻚开发技术。
  Ajax 是⼀种⽤于创建快速动态⽹⻚的技术。
  Ajax 是⼀种在⽆需重新加载整个⽹⻚的情况下，能够更新部分⽹⻚的技术。
  通过在后台与服务器进⾏少量数据交换，Ajax 可以使⽹⻚实现异步更新。这意味着可以在不重新加载整个⽹⻚的情况下，对⽹⻚的某部分进⾏更新。
  传统的⽹⻚（不使⽤ Ajax）如果需要更新内容，必须重载整个⽹⻚⻚⾯。
1. Ajax的使用分为原生和jQuery两种，需要掌握的jq的，原生的了解就行。（因为原生使用很麻烦，一般不建议使用）
1. 异步加载，可以在不重载整个网页的前提下，进行局部刷新。
  这一特点给用户的感受是在不知不觉中完成请求和响应过程
1. 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求
  异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求
1. 地址栏输入url回车 : GET
  a标签href属性指定的url : GET
  form表单中的submit与button类型 : GET/POST（一般多数为POST请求）
  ajax请求 : GET/POST
  注意 : 如果不想触发form表单提交,
  1.按钮可以不写在form表单中,
  2.使用input,类型为button

一. Ajax入门案例（计算器）

需求
页面三个输入框和一个’‘计算’'按钮
在前两个输入框内输入数字, 点击计算按钮, 在第三个输入框内动态展示前两数字乘积
使用Ajax向后端提交请求, 页面不能进行刷新
计算必须在后端进行

代码示例：

1. 路由层 urls.py文件

from django.contrib import admin
from django.urls import path
from ajax_app.views import index, product

urlpatterns = [
    path('', index),
    # 取别名
    path('pro/', product, name='pro')
]

2. 视图层views.py文件

from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.
# 视图函数
# request参数其实就是jQuery中一个内置参数，这个参数专门用来接受浏览器发送过来的信息，就比如说请求头（headers）
def index(request):
    return render(request, 'index.html')

# 配置网站地址

# 实现功能
def product(request):
    if request.method == "POST":
        a1 = request.POST.get('a1')
        a2 = request.POST.get('a2')
        number = int(a1) * int(a2)
        return HttpResponse(number)

3. 模板层ajax.html文件

{#django内置的模板语言#}
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="{% static 'jquery.js' %}"></script>
</head>
<body>
<input type="number" class="form-control text-center" id="a1">
<p class="text-center">x</p>
<input type="number" class="form-control text-center" id="a2">
<p class="text-center">=</p>
<input type="number" class="form-control text-center" id="a3">
<button class="btn btn-warning btn-block">计算</button>

<script>
    // 设置点击事件
    $('.btn').click(function (){
        // 朝后端发送ajax请求
        $.ajax({
            // 指定后端地址,不指定则提交到当前地址
            url: "{% url 'pro' %}",
            // 指定请求方式,不指定默认get
            method: 'post',
            // 需要发送的数据
            data:{
                'a1': $('#a1').val(),
                'a2': $('#a2').val()
            },
            // 回调函数:后端返回结果的时候自动触发,并将结果传给args
            success:function(args){
                // 通过DOM操作渲染到第三个input内
                $('#a3').val(args)
            }
        })
    })
</script>
</html>

补充解释

{#django框架：#}
{# 三层框架#}
{# 1.view.py 视图层—功能：显示页面，实现功能（视图控制器）#}
{# 2.models.py 控制数据库#}
{# 3.templates 存放HTML文件#}

传入args的结果就是视图层中的number值

注意

django 在运行时会检测csrf_token令牌，引起报错。该令牌为保护网站的安全性，防止跨域攻击
解决方法：
对setting部分中间件进行注释
MIDDLEWARE = [
‘django.middleware.security.SecurityMiddleware’,
‘django.contrib.sessions.middleware.SessionMiddleware’,
‘django.middleware.common.CommonMiddleware’,
#‘django.middleware.csrf.CsrfViewMiddleware’,
‘django.contrib.auth.middleware.AuthenticationMiddleware’,
‘django.contrib.messages.middleware.MessageMiddleware’,
‘django.middleware.clickjacking.XFrameOptionsMiddleware’,
]

二. Ajax登录验证案例

需求
用户输入用户名和密码, 点击登入朝后端进行提交
后端从数据库拿到数据进行校验, 返回状态码和登入信息
登入成功通过前端进行跳转网站 http://www.baidu.com
登入失败显示错误提示信息
使用ajax向后端提交请求

ps : request.is_ajax( ) 判断是否是Ajax请求

代码实现：

1. 路由层urls.py文件

from django.contrib import admin
from django.urls import path
from users import views

  urlpatterns = [
      path('admin/', admin.site.urls),
      path('login/', views.login, name='login'),
  ]

2. 模型层models.py文件

from django.db import models

class User(models.Model):
    name = models.CharField(max_length=16, verbose_name='用户名')
    pwd = models.CharField(max_length=16, verbose_name='密码')

    def __str__(self):
        return self.name

3. 视图层 views.py 文件

from django.shortcuts import render,HttpResponse,redirect
from users import models
from django.http import JsonResponse

def login(request):
    dic = {'status':None,'msg':None}  # 设置dic保存状态码及登入状态信息
    # 如果是ajax请求
    if request.is_ajax():
        name = request.POST.get('name')  # 获取用户名
        pwd = request.POST.get('pwd')    # 获取密码
        user_obj = models.User.objects.filter(name=name,pwd=pwd).first()  # 拿到对象
        if user_obj:
            dic['status'] = 200  # 存在状态码设置成200
        else:
            dic['status'] = 201
            dic['msg'] = '用户名或密码错误'
        # 方式一 : 直接使用JsonResponse
        return JsonResponse(dic)  # 将登入状态dic返回给前端ajax
        # 方式二 : 手动转json格式
        # import json
        # return HttpResponse(json.dumps(dic))
    return render(request,'login.html')  # get请求展示login页面

'''
上面可以使用方式一和方式二向后端返回响应 :
    方式一返回的是json格式, 那么ajax接收到数据后会自动转成对象, 然后前端直接可以拿对象进行操作
    方式二是以字符串的方式返回了json格式的字符串(html/text格式), ajax接收后需要我们自己去反序列化成对象
    总结 : 后端返回数据我们统一使用JsonResponse就可以了
    
ps : 如果使用了ajax, 后端就不要再使用redirect、render、HttpResponse了, 直接使用JsonReponse
'''

4. 模板层 login.html 文件

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script scr={% static 'jquery.js' %}></script>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-info">
                  <div class="panel-heading">用户登入</div>
                      <div class="panel-body">
                          <form action="">
                              用户名:
                              <input type="text" class="form-control" id="a1">
                               密码:
                              <input type="password" class="form-control" id="a2">
                              <br>
                              <input type="button" class="btn btn-warning btn-block" value="登入">
                              <p class="msg_error" style="color: red"></p>{# 设置一个标签用来展示用户登入状态信息 #}
                          </form>
                      </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    $('.btn').click(function () {
        $.ajax({
            url:'/login/',
            method:'post',
            data:{
                'name':$('#a1').val(),
                'pwd':$('#a2').val(),
            },
            success:function (data) {
                // 状态码为200则表示登入成功
                if (data.status === 200){
                    // 前端进行网页跳转
                    location.href = 'http://www.baidu.com'
                }else {
                    // 登入失败则使用DOM操作渲染msg
                    $('.msg_error').html(data.msg)
                }
            }
        })
    })
</script>
</html>

三. 前后端数据传输的编码格式

前端中可以向后端发起post请求的方式
form 表单
ajax 请求
基于post请求, 前后端数据传输的主流编码格式有三种
- urlencoded :
  默认的编码格式, 提交的数据从request.POST中提取
- form-data :
  上传文件时使用的编码格式, 提交的数据从request.POST中提取, 上传的文件从request.FILES中提取
- json :
  ajax发送的json格式数据, 在request.POST中取不到数据, 需要在request.body中提取数据
基于post请求, form表单传输数据默认的编码格式
- 默认编码格式为 :
  urlencoded
- 如果要上传文件需要在标签中指定 :
  enctype=“multipart/form-data” 编码格式
- 数据格式 :
  username=poppies&password=123456
- 提交位置 :
  django后端针对符合urlencoded编码格式的数据都会自动帮你解析封装到request.POST中, 文件提交到request.FILES中
基于post请求, ajax传输数据默认编码格式
- 默认编码格式 :
  urlencoded
- 如果要上传文件需要使用 Formdata 对象
  数据格式 :
  username=poppies&password=123456
- 提交位置 :
  django后端会自动帮你解析封装到request.POST中, 文件提交到request.FILES中
json.loads()是否可以转Bytes格式
- 3.5之前不行, 需要我们手动将 Bytes 格式转成 str 类型, 然后再进行转换
  3.6以后可以, Bytes无需手动转 str 类型, 它内部会自动帮你转成 str, 再转成 json
  查看 json.loads( ) 的源码可以得到验证

半离岛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery - Ajax的使用详解(主要简单试做了两个案例)

首先学习前提出几个问题进行对Ajax的了解什么是Ajax？Ajax怎样进行使用Ajax的功能？同步与异步的区别？前端向后端发起请求的方式有哪些？Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指⼀种创建交互式⽹⻚应⽤的⽹⻚开发技术。Ajax 是⼀种⽤于创建快速动态⽹⻚的技术。Ajax 是⼀种在⽆需重新加载整个⽹⻚的情况下，能够更新部分⽹⻚的技术。
复制链接

扫一扫