Ajax技

Ajax的特点

  1. 异步提交:Ajax采用异步通信方式,能够在页面无需重新加载的情况下向服务器发送请求并接收响应数据,提升了用户体验。
  2. 无需插件:Ajax是基于标准浏览器的Javascript和XMLHttpRequest对象实现的,无需安装插件或控件。
  3. 局部刷新:Ajax能够实现局部刷新,只更新需要更新的部分,而不是整个页面。
  4. 支持多种格式数据交互:Ajax不仅支持XML格式数据交互,还支持JSON、HTML、文本等多种格式的数据交互。
  5. 提高性能:因为Ajax可以在页面保留数据,只更新需要更新的部分,减少了不必要的请求和响应,从而提高了网站性能。
  6. 提供多种编程语言支持:Ajax不仅支持Javascript编程,还支持其他编程语言,如PHP、ASP、Python等。
  7. 可以实现动态效果:Ajax可以用来实现动态效果,如自动补全、搜索框提示、无限滚动等。

Ajax案列

 views

from django.shortcuts import render, HttpResponsedef a_ajax(request):if request.method == 'POST':"""接受ajax提交的数据"""print(request.POST)  # <QueryDict: {'inp1': ['1'], 'inp2': ['1']}># d1 = request.POST.get('inp1')# d2 = request.POST.get('inp2')# d3 = int(d1)+int(d2)# print(d3)l_dict = {'username': 'kk', 'password': 123}import jsonreturn HttpResponse(json.dumps(l_dict))return render(request, 'a_ajax.html')

HTML文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
{#    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>#}
</head>
<body>
<input type="text" id="inp1">+
<input type="text" id="inp2">=
<input type="text" id="inp3">
<button class="btn">提交</button>
</body>
</html><script>$('.btn').click(function() {var inp1 = $("#inp1").val();var inp2 = $("#inp2").val();//获取到的数据返回到后端,使用python来计算$.ajax({url: '',//不写默认朝当前地址传递type: 'post',//默认为getdata: {inp1: inp1, inp2: inp2},//回调函数用来压接受后端返回的数据success: function (res) {console.log(res)//获取值{#$("#inp3").val(res)#}//进行返序列化//后端返回的数据别忘记返序列化,后端记得序列化res = JSON.parse(res)console.log(res.username)console.log(res.password)}})})
</script>

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

        我们只研究post请求方式,get没有请求方式,他的格式为

get:index(地址)?a=1&b=2

参数直接在url后面

post的请求方式

form表单

Ajax

api工具

1. form表单的post请求

默认的编码格式:urlencode

数据的传输方式:title=dasdas&price=2312&date=&publish=2&authors=3,k,v形式的键值对传输

后端如何接收:把前端提交的数据封装到request.POST中,而传输的文件则在request.FILES中

提交form-data文件数据:enctype:form-data

传输方式:title=dasdas&price=2312&date=&publish=2&authors=3

2. Ajax提交POST请求

默认Ajax提交数据 还是在request,POST中接受,默认编码格式urlencode

需要修改的contype:json

3. Ajax提交json的格式数据

json格式的数据提交后

设置提交json格式:

                $.ajax({url: '',//不写默认朝当前地址传递type: 'post',//默认为getdata: JSON.stringify({inp1:inp1, inp2:inp2}),contentType: 'application/json',//回调函数用来压接受后端返回的数据success: function (res) {console.log(res)

4. Ajax提交文件数据

<script>$(".btn").click(function (ev) {console.log(123);// 要获取到文件数据,{#console.log($("#myfile")[0].files[0]) // C:\fakepath\123.png#}// 提交文件数据需要借助于formdata对象var myFormDataObj = new FormData;var username = $("#username").val();var myfile = $("#myfile")[0].files[0];myFormDataObj.append('username', username);myFormDataObj.append('myfile',myfile);$.ajax({url: '',type: 'post',{#data: JSON.stringify({a: 1, b: 2}), // 序列化的     "{"a":1, "b":2}"#}data: myFormDataObj, // 序列化的     "{"a":1, "b":2}"{#contentType: 'application/json', // json格式的#}contentType:false, // 告诉浏览器不要给我的编码格式做任何的处理processData: false, //success: function (res) {}})})
</script>

wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/201046.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

5.基于飞蛾扑火算法(MFO)优化的VMD参数(MFO-VMD)

代码的使用说明 基于飞蛾扑火算法优化的VMD参数 优化算法代码原理 飞蛾扑火优化算法&#xff08;Moth-Flame Optimization&#xff0c;MFO&#xff09;是一种新型元启发式优化算法&#xff0c;该算法是受飞蛾围绕火焰飞行启发而提出的&#xff0c;具有搜索速度快、寻优能力强的…

母婴服务预约小程序的效果如何

二胎家庭增速明显&#xff0c;占比较大&#xff0c;成为市场各母婴品牌的目标&#xff0c;而随着行业发展及市场变化&#xff0c;线上互联网深入人们生活&#xff0c;各家母婴品牌开始向“数字化”靠拢。 目前母婴门店商家主要面临服务/产品线上曝光不足、宣传度不够或扩圈无门…

Azure 机器学习 - 搜索中的检索增强 (RAG)

目录 一、Azure AI 信息检索系统介绍二、采用 Azure AI 搜索的 RAG 方法三、适合 Azure AI 搜索的自定义 RAG 模式四、Azure AI 搜索中的可搜索内容五、Azure AI 搜索中的内容检索构建查询响应按相关性排名适用于 RAG 方案的 Azure AI 搜索查询的示例代码 六、集成代码和 LLM七…

超级实用的程序员接单平台,看完少走几年弯路,强推第一个!

“前途光明我看不见&#xff0c;道路曲折我走不完。” 兜兜转转&#xff0c;心心念念&#xff0c;念念不忘&#xff0c;必有回响。终于找到了… 网络上好多人都在推荐程序员线上接单&#xff0c;有人说赚得盆满钵满&#xff0c;有的人被坑得破口大骂&#xff0c;还有的人甚至还…

PyTorch 实战之水果分类

当我们试图提高神经网络的准确性时&#xff0c;经常会遇到过拟合训练数据的情况。当我们运行测试数据的模型时&#xff0c;这会导致一个糟糕的预测。因此&#xff0c;我采取了一个数据集&#xff0c;并应用这些技术&#xff0c;不仅提高准确性&#xff0c;而且还处理过拟合的问…

十七、Linux的组管理

1、Linux组基本介绍 在linux中的每个用户必须属于一个组&#xff0c;不能独立于组外。在linux中每个文件所有者、所在组、其它组的概念 1.所有者 2.所在组 3.其他组 4.改变用户所在的组 2、文件/目录 所有者 一般为文件的创建者&#xff0c;谁创建了该文件&#xff0c;就自…

【C++】泛型编程 ⑩ ( 类模板的运算符重载 - 函数实现 写在类外部的同一个 cpp 代码中 | 类模板 的 外部友元函数二次编译问题 )

文章目录 一、类模板 - 函数声明与函数实现分离1、类模板 外部 实现 构造函数2、类模板 外部 实现 普通函数3、类模板 外部 实现 友元函数( 1 ) 错误示例及分析 - 类模板 的 外部友元函数 二次编译 问题( 2 ) 正确写法 二、代码示例 - 函数声明与函数实现分离1、代码示例2、执行…

90天,广告商单43张,小红书AI庭院风视频制作详解教程

今天给大家分享一个目前在小红书很火的AI绘画商单号案例。 首先给大家看看案例视频形态 这类视频内容非常简单&#xff0c;主要展示农家庭院的别致景色。通过AI绘画工具生成图片&#xff0c;再利用剪辑工具将画面增加动态元素&#xff0c;让整个视频逼真鲜活&#xff0c;加上…

Head、Neck、Backbone介绍

在深度学习中&#xff0c;通常将模型分为三个部分&#xff1a;backbone、neck 和 head。 Backbone&#xff1a;backbone 是模型的主要组成部分&#xff0c;通常是一个卷积神经网络&#xff08;CNN&#xff09;或残差神经网络&#xff08;ResNet&#xff09;等。backbone 负责…

使用Pytorch实现linear_regression

使用Pytorch实现线性回归 # import necessary packages import torch import torch.nn as nn import numpy as np import matplotlib.pyplot as plt# Set necessary Hyper-parameters. input_size 1 output_size 1 num_epochs 60 learning_rate 0.001# Define a Toy datas…

基于单片机仓库温湿度监测报警系统仿真设计

**单片机设计介绍&#xff0c;基于单片机仓库温湿度监测报警系统仿真设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的仓库温湿度监测报警系统可以被设计成能够实时监测仓库内的温度和湿度&#xff0c;并根据预设…

【C++】继承(上) 继承 | 子类的默认成员函数

一、继承 概念 继承(inheritance)是一种面向对象编程的概念&#xff0c;它允许一个类&#xff08;称为子类或派生类&#xff09;继承另一个类&#xff08;称为父类或基类&#xff09;的特征和行为。子类可以获得父类的成员函数和变量&#xff0c;而不需要重新编写它们。子类还…

这是一棵适合搜索二叉树

&#x1f388;个人主页:&#x1f388; :✨✨✨初阶牛✨✨✨ &#x1f43b;强烈推荐优质专栏: &#x1f354;&#x1f35f;&#x1f32f;C的世界(持续更新中) &#x1f43b;推荐专栏1: &#x1f354;&#x1f35f;&#x1f32f;C语言初阶 &#x1f43b;推荐专栏2: &#x1f354;…

宏集新闻 | 虹科传感器事业部正式更名为宏集科技

致一直支持“虹科传感器”的朋友们&#xff1a; 为进一步整合资源&#xff0c;给您带来更全面、更优质的服务&#xff0c;我们非常荣幸地宣布&#xff0c;虹科传感器事业部已正式更名为宏集科技。这一重要的改变代表了虹科持续发展进程中的新里程碑&#xff0c;也体现了我们在传…

安装gitlab

安装gitlab 环境 关闭防火墙以及selinux&#xff0c;起码4核8G 内存至少 3G 不然启动不了 下载环境 gitlab官网&#xff1a;GitLab下载安装_GitLab最新中文基础版下载安装-极狐GitLab rpm包下载地址&#xff1a; [Yum - Nexus Repository Manager (gitlab.cn)](https://pack…

Android studio run 手机或者模拟器安装失败,但是生成了debug.apk

错误信息如下&#xff1a;Error Installation did not succeed. The application could not be installed&#xff1a;List of apks 出现中文乱码&#xff1b; 我首先尝试了打包&#xff0c;能正常安装&#xff0c;再次尝试了debug的安装包&#xff0c;也正常安装&#xff1…

报错!Jupyter notebook 500 : Internal Server Error

Jupyter notebook 报错 500 : Internal Server Error 问题背景 tensorflow-gpu环境&#xff0c;为跑特定代码专门开了一个环境&#xff0c;使用conda安装了Jupyter notebook&#xff0c;能够在浏览器打开Jupyter notebook&#xff0c;但是notebook打开ipynb会报错。 问题分析…

抖音seo矩阵系统源代码部署及产品功能设计分析

一、引言 随着抖音等短视频平台的崛起&#xff0c;越来越多的企业和个人开始关注如何在这些平台上提升曝光量和用户流量。抖音SEO&#xff08;搜索引擎优化&#xff09;是一种有效的方法&#xff0c;通过优化短视频内容和关键词&#xff0c;让更多的人找到并点击你的视频。本文…

【css】Google第三方登录按钮样式修改

文章目录 场景前置准备修改样式官方属性修改样式CSS修改样式按钮的高度height和border-radiusLogo和文字布局 场景 需要用到谷歌的第三方登录&#xff0c;登录按钮有自己的样式。根据官方文档&#xff1a;概览 | Authentication | Google for Developers&#xff0c;提供两种第…

【Web】Ctfshow Nodejs刷题记录

目录 ①web334 ②web335 ③web336 ④web337 ⑤web338 ⑥web339 ⑦web340 ⑧web341 ⑨web342-343 ⑩web344 ①web334 进来是一个登录界面 下载附件&#xff0c;简单代码审计 表单传ctfshow 123456即可 ②web335 进来提示 get上传eval参数执行nodejs代码 payload: …