首页 > 其他分享 >Ajax

Ajax

时间:2022-09-07 23:22:56浏览次数:71  
标签:function args request Ajax json ajax 数据

Ajax

Ajax基本操作

1.Ajax不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术,使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面

2.基础语法
<script>
$.ajax({
    url:'',  // 朝那个地址发送数据,等价于form表单action
    type:'post',  // 提交数据的方式,等价于method参数(默认get请求)
    data:{},  // 发送给后端的数据的数据
    success:function (形参) {
        异步回调函数
    }
})
</script>

3.例子
<input type="text" id="d1">+
<input type="text" id="d2">=
<input type="text" id="d3">
<script>
    $('#d2').blur(function (){
        // 使用ajax朝后端发送数据
        $.ajax({
            url:'',  // 朝那个地址发送数据
            type:'post',  // 提交数据的方式
            data:{'i1':$('#d1').val(), 'i2':$('#d2').val()},  // 发送给后端的数据的数据
            success:function (args) {  // 形参args是用于接收后端返回的数据
                $('#d3').val(args)
            }
        })
    })
</script>

数据编码格式

Content-Type
1.格式1:urlencoded
数据格式: name=barry&pwd=123&hobby=read
django后端统一处理到request.POST中

2.格式2:formdata
数据格式: 无法查阅
django后端自动将文件数据处理到request.FILES 普通数据request.POST

3.格式3:application/json
数据格式: json格式
django后端不会处理 在request.body中存储(bytes类型) 自己处理

4.语法注意事项
$('#d2').blur(function (){
    // 使用ajax朝后端发送数据
    $.ajax({
        url:'',  // 朝那个地址发送数据
        type:'post',  // 提交数据的方式
        data:JSON.stringify({'name':'barry','pwd':123}),
contentType:'application/json',
        success:function (args) {
             $('#d3').val(args)
        }
    })
})
data: JSON.stringify({'name':'barry','pwd':123}),
contentType:'application/json',
    
5.后端处理json格式
if request.method == 'POST':
    json_bytes = request.body
    json_dict = json.loads(json_bytes)
    print(json_dict)

ajax携带文件数据

1.ajax携带文件数据
<input type="text" id="d1">
<input type="file" id="d2">
<button id="d3">上传</button>
<script>
    $('#d2').blur(function () {
        // 产生一个内置对象
        let formData = new FormData();
        // 添加普通数据
        formData.append('username', $('#d1').val())
        // 添加文件数据
        formData.append('file', $('#d2')[0].files[0])
        // 发送ajax请求
        $.ajax({
            url:'',  // 朝那个地址发送数据
            type:'post',  // 提交数据的方式
            data:formData,  // 发送给后端的数据的数据
            contentType:false,  // 不使用任何编码
            processData: false,  // 不处理数据
            success:function (args) {  // 形参args是用于接收后端返回的数据
            }
        })
    })
</script>

回调函数

1.后端与ajax交互,不应该返回页面,通常情况都是返回json格式数据
2.前端对HttpResponse和JsonResponse返回的json格式数据处理方式不同
2.1对HttpResponse不会自动反序列化
2.2对JsonResponse会自动反序列化
2.3如果想要让HttpResponse也自动反序列化可以添加一个固定的参数(在ajax内)
dataType:'JSON'

序列化

def ser(request):
    # 拿到用户表里面的所有的用户对象
    user_list = models.User1.objects.all()
    # 导入内置序列化模块
    from django.core import serializers
    # 调用该模块下的方法,第一个参数是你想以什么样的方式序列化你的数据
    ret = serializers.serialize('json', user_list)
    return HttpResponse(ret)

标签:function,args,request,Ajax,json,ajax,数据
From: https://www.cnblogs.com/riuqi/p/16667694.html

相关文章

  • Ajax
    目录Ajax一、特点二、Ajax和form表单的区别form表单:Ajax:三、基础语法四、数据编码格式五、Ajax携带文件数据六、回调函数七、序列化Ajax一、特点异步提交,局部刷新Ajax......
  • 什么是Ajax?全面了解?
    目录1.什么是Ajax?2.Ajex的优点3.Ajax工作原理4.基本语法5.数据编码格式6.ajax携带文件数据7.回调函数我们知道,前端页面想要和后端进行数据交互,可以通过以下方式将参数添......
  • ajax
    一、Ajax'''页面不刷新的情况下可以与后端进行数据交互异步提交局部刷新eg:码云用户注册无序点击按钮内部也可以完成数据交互ajax不是一门全新知识本质......
  • ajax实现发送邮件验证码倒计时功能
    1.实现的效果:   2.前台页面+js1<!DOCTYPEhtml>2<html>3<head>4<metacharset="utf-8">5<title></title>6</head>7......
  • 前端不缓存,ajax不缓存,js操作cookie
    前端不缓存,ajax不缓存,js操作cookie 今天实现网站注销功能时,需要清除cookie缓存,开始在网上搜索的是“js清除缓存”,发现很多都是预先防患缓存存储的内容,千篇一律,不过也......
  • SpringMVC响应Ajax请求
    在分享今天的这个知识点之前先回顾一下使用ajax的目的:实现异步请求,客户端发送的请求携带数据到达服务器,服务器接收到请求后进行处理,然后返回处理后的数据。客户端接收到返......
  • Python3项目初始化10-->前端基础jquery、ajax,sweetalert--更新用户改造
    33、JS基础-ajax_post截止目前,完成了登录,创建和删除,“编辑”这块还是老的信息。打开a、点击编辑=>(内容)=>dialogb、内容=>后端ajax 页面上遍历用户时......
  • Python3项目初始化10-->前端基础jquery、ajax,sweetalert--创建用户删除用户改造
    32、JS基础-dmodal点击“创建”,不调整新页面操作,直接弹出框操作。modals弹框指示页面:https://v3.bootcss.com/javascript/#modals拷贝代码,父节点在body里面。<aclass=......
  • 介绍下 ajax
    Ajax能够实现和服务器交换数据并让页面局部更新ajax相比于传统的方式是相当于在服务器和客户端之间多了一层中间层ajax引擎,使用户和服务器操作异步化  传统方式中用......
  • vue中Promise的使用方法详情 vue中 ajax 同步执行
    vue中Promise的使用方法详情目录一、使用1.promise是一种异步解决方案2.asyncawait简介:promise是什么,它可以说是异步编程的一种解决方法,就拿传统的ajax发请求来说,单个......