Web框架开发-Ajax(formData)

最新推荐文章于 2024-04-26 16:06:24 发布
VIP文章 最新推荐文章于 2024-04-26 16:06:24 发布
阅读量1.3k 收藏 22
点赞数 14
分类专栏： Web框架开发 文章标签： 前端 ajax okhttp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liudefang/article/details/136965237
版权

一、回顾上节知识点

1、什么是json字符串？

　　轻量级的数据交换格式

2、定时器：关于setTimeout

setTimeout(foo,3000)  # 3000表示3秒，foo表示一个函数，3秒后执行foo函数

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style>

        .login_error{

            color: red;

        }

    </style>

</head>

<body>

<a href="/get_OK/">点击</a><span class="error"></span>

<hr>

{% csrf_token %}

<p>姓名<input type="text"></p>

<p>密码<input type="password"></p>

<p><button class="Ajax_send">Ajax_send</button><span class="login_error"></span></p>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>

<script>

    $(".Ajax_send").click(function () {

        function foo() {

             $(".login_error").html("");  //3秒后清空

        }

        //方式一

        $.ajaxSetup({

            data:{csrfmiddlewaretoken:'{ { csrf_token }}'}

        });

        // ajax请求

        $.ajax({

            url:"/get_ajax/",  //请求路径

            type:"POST",      //请求方式

            //吧js对象转成json字符串

            data:{

{#                    方式三#}

{#                 csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),#}

                 name:$(":text").val(),

                 pwd:$(":password").val()

            },

            success:function (data) {

                var data=JSON.parse(data);  //js中的反序列化

                console.log(data);

                console.log(typeof data);

                if(!data["flag"]){   //为False的情况

                    $(".login_error").html("用户名或者密码错误");

                    setTimeout(foo,3000)

                }

            }

        })

    })

</script>

</body>

</html>

　　

3、ajax的参数补充

　　 - type不写的话默认是GET

　　- dataType和ContentType：

　　　　dataType: 浏览器发给服务器希望返回的数据类型 。。如果我们明确地指定目标类型，就可以使用data Type。

　　　　ContentType:
　　　　　　请求头里有：浏览器告诉服务器内容的类型
　　　　　　响应头里也有：服务器响应浏览器的内容

4、JS和JQuery对象之间的转换

　　jQuery对象加[0]就转换成了dom对象
　　dom对象加$符就转换成了jquery对象

5、processDate 默认为True ，预处理；     如果改为False，不做预处理

二、csrf跨站请求伪造</

最低0.47元/天 解锁文章
芳姐聊互联网职场
关注
  • 14
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AJAX 上传文件.txt
11-07
C# MVC ajax formData 上传文件 processData: false, // 不处理数据 contentType: false, // 不设置内容类型
jQuery的ajax发送FormData的方式
01-23
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form id="form"> <input type="text" name="username"> <input type="file" name="file"> <input type="button" id="btn" value="提交"> </form> [removed][removed] [removed] var form = $('#form')[0]; // 获取到表单的DOM对象形式 $('#btn').on('click', function () { // 1 使用FormData进行表单的数据处理 var fd = new FormData(form); // 2 使用$.ajax发送fd // 需要指定两个属性 // - processData : false // - contentType : false $.ajax({ method : 'POST', url : '/ajax_Day5/datas03.php', data : fd, success : function (data) { console.log(data); }, processData : false, contentType : false }); }); [removed] </body> </html>
object-to-formdata:方便JavaScript函数，可将对象序列化为FormData实例
05-02
对象到表单数据 方便JavaScript函数，可将对象序列化为FormData实例。 安装 npm install object-to-formdata 用法 注意：从版本4.0.0开始，已更改命名的出口！ 注意：从版本3.0.0开始，没有默认导出！ import { serialize } from 'object-to-formdata' ; const object = { /** * key-value mapping * values can be primitives or objects */ } ; const options = { /** * include array indices in FormData keys * defaults to false */ indices : false , /**
js-cfw-formdata-polyfill
05-12
TL; DR 为cloudflare工作者提供Request.prototype.formData的polyfill，因为尽管，但不符合。 安装 npm install @ssttevee/cfw-formdata-polyfill 用法 import `@ssttevee/cfw-formdata-polyfill` ; // get req from handler const fd = await req . formData ( ) ; 或者，如果更 import FormDataFromRequest from '@ssttevee/cfw-formdata-polyfill/ponyfill' ; // get req from handler const fd = await FormDataFromRequest . call ( req ) ; 例子 在有一些完整的
jQuery Ajax使用FormData对象上传文件的方法
10-21
主要介绍了jQuery Ajax使用FormData对象上传文件的方法，非常不错，具有参考借鉴价值，需要的朋友可以参考下
【前端】数组的常用处理函数
lcukyNwa的博客
04-22 388
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
【解决NodeJS项目无法在IDEA中调试的问题】使用JetBrains IDEA 2023 调试nodejs项目
宅斗士的博客
04-23 340
项目采用Ant Design Pro + React，使用前后端分离开发方式，后端可以很容易的打断点调试，但是前端用到了React脚手架，在IDEA中加了调试断点，但是没有什么用处。
C++ WebServer的细节理解
我的博客
04-22 590
在非阻塞模式下，如果 I/O 操作不能立即完成（例如，因为没有数据可读 或 写缓冲区满），系统不会让调用进程阻塞等待，而是立即返回一个错误（通常为 EAGAIN 或 EWOULDBLOCK）。先查询文件描述符 fd 当前的标志，然后将 O_NONBLOCK 标志加入其中，并通过 F_SETFL 来更新文件描述符，最终实现将该文件描述符切换为非阻塞模式。这意味着，如果没有待处理的连接请求（即没有客户端尝试连接到服务器），accept() 会一直阻塞，直到有新的连接请求到达或发生其他特定条件（如超时）为止。
SpringBoot项目打包分离高阶操作
Record Little
04-23 572
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
webman 事务回滚失效问题记录
juan9872的博客
04-21 706
webman是一款基于workerman开发的高性能HTTP服务框架。webman用于替代传统的php-fpm架构，提供超高性能可扩展的HTTP服务。你可以用webman开发网站，也可以开发HTTP接口或者微服务。除此之外，webman还支持自定义进程，可以做workerman能做的任何事情，例如websocket服务、物联网、游戏、TCP服务、UDP服务、unix socket服务等等。
vue实现录音并转文字功能，包括PC端web，手机端web
最新发布
byebukesi的博客
04-26 178
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
web server apache tomcat11-17-default-servlet
04-23 768
整理这个官方翻译的系列，原因是网上大部分的 tomcat 版本比较旧，此版本为 v11 最新的版本。您可以使用或，DefaultServlet 将创建一个 XML 文档，并根据 XSLT 文件中提供的值运行它进行 XSL 转换。首先检查，然后是，最后是。如果没有配置 XSLT 文件，则使用默认行为。
css flex布局两个元素水平居中垂直居中
xiaohua616的博客
04-23 369
使用flex布局，让两个元素水平居中垂直居中，具体实现效果如下：
前端实现将二进制文件流，并下载为excel文件
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
04-23 465
介绍了前端如何实现将二进制文件流解析并下载为excel文件，以及解决容易遇到的问题。
docker部署前端项目（二）遇到的问题
weixin_45379180的博客
04-25 290
原因： 安装docker的时候使用的是 yum -y install docker 命令，这个命令安装的是老版本。报错四：conflicts with file from package docker-common。因为使用 sudo yum install docker （下载到的是旧版）missing signature key 缺少秘钥。yum remove docker 删除docker。1、docker版本号 只有1.13.1。解决：可能是docker 未启用。
后台管理系统加水印（react）
m0_63788547的博客
04-19 720
后台管理系统加水印（react）
有状态和无状态登录
Java后端技术栈
04-26 106
传统上用户登陆状态会以 Session 的形式保存在服务器上，而 Session ID 则保存在前端的 Cookie 中；而使用 JWT 以后，用户的认证信息将会以 Token 的形式保存在前端，服务器不需要保存任何的用户状态，这也就是为什么 JWT 被称为无状态登陆的原因，无状态登陆最大的优势就是完美支持分布式部署，可以使用一个 Token 发送给不同的服务器，而所有的服务器都会返回同样的结果。有状态和无状态最大的区别就是服务端会不会保存客户端的信息。
js初步理解
2303_81631620的博客
04-22 183
js和java没有关系，只是名字这样叫，他们是完全不同的两种语言。
业务逻辑中的“红绿灯”：jvs-logic如何通过提示消息节点控制流程？
04-22 166
gitee地址：https://gitee.com/software-minister/jvs-logic。设置参数，选择具体的参数值、字段、公式或为空，提示消息内容返回至前端同时节点执行结果返回设置的参数。提示消息是指将业务消息返回给前端进行展示，失败消息提示将终止程序的运行。②：参数值，可以选择具体的值、字段、按公式取值或为空。②：消息样式，可以选择失败提示和成功提示。①：提示消息，返回给前端展示的消息内容。④：返回数据，消息节点执行后返回的参数。①：参数名，返回数据的参数名。
ajax上传 webapi
06-03
3. 在后端 Web API 中，使用 C# 的 ASP.NET Web API 框架来处理上传的文件，例如： ``` [HttpPost] [Route("api/upload")] public async Task<IHttpActionResult> Upload() { var file = HttpContext.Current....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值