首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么,如果我离开这么长表单页面,ajax就不能在页面中发送我的请求

当用户在一个长表单页面中填写信息时,如果离开页面,浏览器会中断当前页面的请求,包括通过ajax发送的请求。这是因为浏览器的安全机制限制了跨页面的请求。

浏览器为了保护用户的隐私和安全,限制了页面在后台发送请求的能力。当用户离开页面时,浏览器会认为用户不再需要当前页面的请求,因此会中断这些请求,以防止恶意网站通过发送请求获取用户的敏感信息。

这种限制可以防止一些潜在的安全风险,比如CSRF(跨站请求伪造)攻击。如果允许页面在用户离开后继续发送请求,那么攻击者可以通过诱使用户点击恶意链接或访问恶意网站,来执行未经用户授权的操作。

解决这个问题的一种常见方法是使用前端技术来保存用户填写的表单数据,以便用户返回时可以继续填写。可以使用浏览器的本地存储(如localStorage或sessionStorage)来保存表单数据,或者将数据存储在服务器端,通过会话或其他方式与用户关联。

另外,如果需要在用户离开页面时继续发送请求,可以考虑使用WebSocket等技术来建立持久连接,以实现实时通信和数据传输。

总结起来,如果用户离开一个长表单页面,ajax不能在页面中发送请求是由于浏览器的安全机制限制了跨页面的请求。为了解决这个问题,可以使用前端技术保存表单数据,或者考虑使用WebSocket等技术建立持久连接。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JQuery 入门学习(三)

如果只是基础,我们这样理解ajax好了:利用ajax可以动态地以javascript方式向服务器请求数据,并接受服务器发回数据,这个过程浏览器可以做其他任何工作,可以不离开页面,不刷新。    ...如果不用ajax,大家可以想象,点击了链接,浏览器势必要打开新页面,给用户带来不便。...甚至我们做一个网站,放上背景音乐,网站中一切链接都由ajax完成(比如点击了一片文章,ajax向服务器请求文章内容,然后用上次说Jquery html操作将网页中一部分进行修改,这样文章就放入了页面而并不刷新页面...并没有刷新页面,我们填写内容依旧在表单中。这就是向服务器请求了html,返回“用户名...已存在”就是一个html文本,最后体现在用户面前。     我们看Jquery代码。...类似于get方式,post()方法参数都与get相同,就不举例子了。

8.7K20

安全开发之 token 那些事

https://jwt.io/introduction/ 单页应用为了维护其良好用户体验,发送请求方式由传统 form 表单提交改为了使用 AJAX/Fetch 传输数据,实现页面无刷。...每次发送请求时将 base64 编码后 token 添加到 header 里 Authorization 中发送给服务器: //ajax $.ajax({ type: 'POST', url...大家可以想想为什么前两种方案都需要验证两个 token 是否相等来判断 token 合法性而这里不需要。...这是因为攻击者如果要利用 CSRF,构造一个包含恶意请求页面,无论 GET 还是 POST 还是别的请求类型,由于同源策略限制,请求只能由构造 form 表单发出,AJAX 是不支持跨域发送请求(...除非服务器开启跨域支持,如果服务器开启跨域,开发者需要严格限制请求来源,对不信任来源不予响应),而通过表单发送请求是没法添加自定义 header 头,也就是说攻击者是发不出 header 中带有

1.7K00

ajax跨域问题以及解决方案_js跨域请求三种方法

大家好,又见面了,是你们朋友全栈君。 ajax跨域 AJAX跨域请求 GetJson实现跨域请求 CrossOrigin注解实现跨域 出于浏览器同源策略限制。...所谓同源(即指在同一个域)就是两个页面具有相同协议(protocol),主机(host)和端口号(port) AJAX跨域请求 下面简单模拟一个场景—–>> 前端有一个页面 鼠标离开用户名输入框时...,检查是否符合要求,如果为空,则给提示,如果不为空,则异步查询数据库,后返回结果; 本次请求页面是8082端口,而响应ajax路径却是8080端口 前端代码—> <!...如果服务器在您控制之下,请将请求站点源添加到允许访问域集,方法是将其添加到Access-Control-Allow-Origin头值。 为什么会有跨域呢?...答案是生效了; Web页面上调用js文件时可以跨域,也就是后拥有”src”这个属性标签都却拥有跨域能力 那么我们转变思路,如果将异步请求转到js文件身上 比如我们可以这么做 后端可以接收到前端数据

3.1K20

JS页面生命周期事件

DOMContentLoaded DOMContentLoaded 事件发生在 document 对象上, 必须使用document对象上 2. window.onload 当包括样式、图像和其他资源页面被全部加载时...,window 对象上 load 事件就会被触发 3. window.onunload 当访问者离开页面时,window 对象上 unload 事件就会被触发。...我们可以在那里做一些不涉及延迟事件,比如关闭相关弹出窗口 可以在用户离开时, 使用unload事件发送我们想要保存在服务器上数据 参考https://w3c.github.io/beacon/,...我们不仅能发送字符串,还能发送表单以及其他格式数据,在 文章 "fetch-basics" 未找到 章节我们已有说明,但是通常情况下它是一个字符串化对象。 数据大小限制在 64kb。...当 sendBeacon 请求完成时候,浏览器可能已经离开了文档,所以就没办法获取服务器响应数据 4. window.onbeforeunload 如果访问中触发了离开页面的导航或试图关闭窗口,beforeunload

3.3K30

轻松掌握ajax底层实现原理

原生ajax虽然在实际开发中很少编写,但如果想将js高级框架底层学明白,那ajax原理是必须要求精通。 ...1、页面全部刷新比如说在百度网站上,搜了一个信息,展示出下面一些很多信息,其中有一个东西叫超链接。一点超链接跳转到下一个页面,这就不页面局部刷新,这叫页面全部刷新。...举个例子:现在这是一个浏览器,这边是爱奇艺正在播放视频,假如说已经缓冲完了播放到一半了,右边有一个登录一个表单,我们通过用户名密码点登录,那么这个登录请求它是一个页面全部刷新,这样操作会有什么问题?...一旦我们点击登录那整个页面全部重新加载,我们爱奇艺视频就要从零开始重新缓冲,也就是说如果页面全部刷新的话,这个视频一定是从零开始播放,用户体验中断了。但是现在大部分请求是什么?...超详细跨域解决方案视频中有Ajax跨域这部分内容,在我们整个软件界来说,跨域是很有名一个单词,但市面上还没有像本套视频一样将跨域讲这么详细,能讲这么底层

71110

ajax异步提交数据到数据库

很多时候我们提交数据到服务器端数据库都是用form表单,这样子是最普通最简单提交数据方法,你填写完表单后,post提交到后台文件.php,处理完后返回到指定页面,最后,页面就重新刷新了一遍,显示预想页面...举个简单例子:你用form表单,直接post提交数据到数据库,那是同步;你用ajax异步提交post,那是异步操作;就相当于,你有一样东西要给A,你直接放给他,然后他用完直接还给你,这就叫同步,而,你可以通过快递...那什么是ajax呢? Ajax 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量信息,而不是整个页面。...好,说了这么多啦,咱们来看看具体代码:登录界面(form表单提交很简单,就不举对比例子了,不懂可以百度或者自己操作下) 先引入必要文件:jquery.js,【layer.js弹出框框架可选用...依次四个红框解释为: 1、session和引入数据库连接文件(这里不扩展了,不会下方评论,教你php pdo扩展连接数据库) 2、获取从前端页面post过来数据 3、mysql数据库操作语句和

4.5K40

laravel ajax 解决报错419 csrf 问题

CSRF是”cross site request forgery”意思,简单来说就是防止恶意页面中一个简单form提交,就向你保持了登陆状态了网站里请求做一些你不想做事情……言尽于此,我们之间看Laravel...在Laravel表单中,埋入一个就可以在表单请求时候发出正确token,这样就不会有问题了,而在ajax请求时候呢,方法多多~ 1....如果你是用ajax submit一个已经存在form,那么就和平常一样,把csrf藏在表单里就好了,万事大吉。 2....如果你不是提交表单,那么就要考虑将token值放在一个什么地方,比如还是一个input中,然后ajax提交时候去读取这个input,附在提交值中。 3....因为你总是要在页面的什么地方调用csrf_token()输出这个值,然后用js脚本获得这个值~ 看Laravel源码时候发现,Laravel默认会把CSRF_TOKEN值写在一个叫XCRF-TOKEN

1.1K10

Echo 发帖操作是怎么做

因为在进行提交时,页面会发生跳转或刷新,给帖子点了个赞你页面还需要刷新一下?显然这样用户体验不好。 为此,Ajax 应运而生。...这个对象为向服务器发送请求和解析服务器返回响应提供了流畅接口,使得浏览器可以发出 HTTP 请求与接收 HTTP 响应,实现在页面不刷新(局部刷新)情况下和服务端进行数据交互。...不过,jQuery 团队解决了这个难题,我们只需要一行简单代码,就可以实现 Ajax 功能,这里就不再详细赘述了。...Echo 中当然也使用了 jQuery,我们来看看在 Echo 中发帖操作是如何发送异步请求: ?...function(data) 就是回调函数,是 Ajax请求成功后自动调用,参数 data 就是服务端返回这个异步请求值。

1.2K21

Web 应用架构下一个转变

AJAX 作为一个术语在 2005 年流行起来,很多人开始在浏览器中发出 HTTP 请求。 业务建立在这样一个理念上,即我们不必回到服务器去获取更多数据来更新适当 UI。...SPA 优缺点 有趣是,在上面的架构行为中,与 PEMPA 唯一区别是文档请求体验更差了! 那么我们为什么还要这么做呢? 到目前为止,最大优点就是开发者体验。...通过使用一个既能在服务器渲染又能在客户端上进行交互/处理更新UI库,我们就不存在代码重复问题。 PESPA 您会注意到有一些用于数据获取、变更和渲染小框。这些是用来增强。...对于习惯于只在客户端上运行代码的人来说,这绝对是一种不同模型,但如果我们使用工具考虑到了这一点,这就不是什么挑战了。...还应该提到,尽管我们已经在相当一段时间内使用现有工具实现了 PESPA 体系结构功能,但在共享渲染逻辑代码同时关注渐进增强还是新

1.2K10

Web 应用架构下一个转变

AJAX 作为一个术语在 2005 年流行起来,很多人开始在浏览器中发出 HTTP 请求。 业务建立在这样一个理念上,即我们不必回到服务器去获取更多数据来更新适当 UI。...SPA 优缺点 有趣是,在上面的架构行为中,与 PEMPA 唯一区别是文档请求体验更差了! 那么我们为什么还要这么做呢? 到目前为止,最大优点就是开发者体验。...通过使用一个既能在服务器渲染又能在客户端上进行交互/处理更新UI库,我们就不存在代码重复问题。 PESPA 您会注意到有一些用于数据获取、变更和渲染小框。这些是用来增强。...对于习惯于只在客户端上运行代码的人来说,这绝对是一种不同模型,但如果我们使用工具考虑到了这一点,这就不是什么挑战了。...还应该提到,尽管我们已经在相当一段时间内使用现有工具实现了 PESPA 体系结构功能,但在共享渲染逻辑代码同时关注渐进增强还是新

1.1K30

Django之视图层与模板层

会对它做进一步处理与封装以便我们更为方便地提取数据,比如 对于form表单来说,提交数据常用方法为GET与POST 1:如果表单属性method='GET',那么在提交表单时,表单内数据不会存放于请求体中...2:如果表单属性method='POST',那么在提交表单时,表单所有数据都会存放于请求体中,在发送给django 后会封装到request.body里,此时django为了方便我们提取数据,会...1,如果无需上传文件,还是推荐使用更为精简编码格式1 我们除了可以采用form表单向django提交数据外,还可以采用ajax技术,ajax可以提交数据格式有:1、编码 格式1 2、编码格式2...1.5CBV源码 为什么CBV能够根据不同请求方式自动执行不同代码呢?...这里需要说明是别名只能在with标签内部使用,如果在外部还是要用原名

9.2K10

前后端交互弯弯绕绕

前后端交互:,收拾一下心情让我们来聊一聊AJax吧,随着前端飞速发展,前后交互也发生了天翻地覆变化:前后端交互方式有很多: AJAX表单提交、WebSocket、RESTful API、......,Ajax能够让页面无刷新请求数据;在旧浏览器页面在向服务器请求数据时,因为返回是整个页面的数据,页面都会强制刷新一下,这对于用户来讲并不是很友好;我们只是需要修改页面的部分数据,但是从服务器端发送却是整个页面的数据...区别|优缺点草稿区:黑马程序员前端AJAX入门到实战 ✅黑马官方文档确实细致,细致到都不用在补充都能看懂了,是不是技术提升原因呢?...也用做一个类似的: Get请求表单+Get请求表单+Post请求AJax|Axios+Post+JSON请求 请求数据格式: string、int、double、时间date、map{k,v...-Ajax详解_ajax解析 不懂哪里来这么多观看Axios3分钟让你学会axios在vue项目中基本用法Axios使用方法详解,从入门到进阶 当作进阶观看:ajax与XHR理解和使用原生ajax

7420

ASP.Net WebForm温故知新学习笔记:二、ViewState与UpdatePanel探秘

①首先,如果页面上有一个runat="server"form,当用户请求这个页面时,服务器会自动添加一个_ViewState隐藏域返回给浏览器。...这里就涉及到网站性能问题探讨了:由于ViewState存储在页本身,因此如果存储较大值,用户请求显示页面的速度会减慢(这对于互联网系统来说,就是一个噩梦。...PS:为什么禁用ViewState之后,页面源代码中仍然有_VIEWSTATE隐藏域?...妈妈再也不用担心页面了!...但是,我们也不由发出感叹:本来可以很简单地使用XmlHttpRequest来实现东西,为什么使用UpdatePanel会引入这么多js,并且为我们返回东西还是那么多(比如上面的例子,只需要数据是一个结果

1.7K30

中级JAVA:简单介绍下Ajax「建议收藏」

大家好,又见面了,是你们朋友全栈君。 首先Ajax是Asynchronous JavaScript and XML全称,Asynchronous是异步意思,这跟传统web不同。...用了AJAX之后,你点击,然后页面一行字就变化了,页面本身不用刷。 Ajax只是一种技术,不是某种具体东西。不同浏览器有自己实现AJAX组件。...我们传统web应用,当我们提交一个表单请求给服务器,服务器接收到请求之后,返回一个新页面给浏览器,这种做法浪费了很多带宽,因为我们发送请求之前和获得页面两者中很多html代码是相同,由于每次用户交互都需要向服务器发送请求...而我们使用Ajax就不同了,Ajax只取回一些必须数据,它使用SOAP、XML或者支持json Web Service接口,我们在客户端利用JavaScript处理来自服务器响应,这样客户端和服务器之间数据交互就减少了...Ajax是多种技术组合,包括我们JavaScript异步数据获取技 发布者:全栈程序员栈,转载请注明出处:https://javaforall.cn/175180.html原文链接:https://

29620

Java 动静分离_如何做前后端动静分离

补充说明 题主在问这个问题之前,有必要对 HTTP 协议有一定了解,这样你就不会在一些细枝末节无限纠结。因为本质上前后端区别就在于一个是请求方、一个是响应方。...以往不分离开发,前端请求往往是通过点击某个超链接,然后由浏览器接管后续,浏览器自行发出请求获取数据并刷新整个页面,后端则是收到请求后,由 PHP 这类后端脚本直接输出一个完整 HTML 页面。...,但是对于 POST,PUT 则需要通过请求体传递数据,比如表单提交、比如文件上传。...后端利用请求中大大小小数据,完全可以构建一个层次分明(利用中间件实现)过滤流程,配合合理路由模块和控制器,就很容易实现后端分离。 前端玩法也很多,就拿 ajax 这种最简单实用来说。...无论你是否使用了前端框架,ajax 是不会变,它是一种请求渠道。 说了上面这么多,你必须要明白要分离,就要分清职责。

1.6K30

论如何反击用AWVS黑客

为什么不直接做CSRF? 因为我们需要进行POST请求。大部分EXP都需要POST来触发。而因为浏览器跨域限制,AJAXPOST只能在同域名下。...如果强行POST请求,将会整个页面都会跳转过去。就算是一个普通用户,发现页面突然跳转到自己路由器管理页面,都会发现不对,何况师傅们。 为什么要用AWVS来完成这个CSRF?...AWVS是典型扫描器,大部分扫描器都是通过内置浏览器,来请求目标网站,然后各种发POC各种爬链接。扫描器不像人那样会变通,如果扫描器遇到上面情况,它会内心毫无波动继续扫描。...上面是用来模拟藏在某个页面的陷阱链接。 ? 当点击上面的链接,就会跳到这个自动发出post请求页面。然后向同目录hello.php发出一个测试请求。 ?...事实上,awvs确实不会对不在扫描范围内域名或者ip进行测试,所以没有像之前那样找到sql注入漏洞,但是经过试验,可能因为内置浏览器原因,会去发送我们预定好字符串。

1.5K90

从零开始写项目第二篇【登陆注册、聊天、收藏夹模块】

这就令我感到非常惊奇了,于是乎,一直在搜索“为什么ajax不调用、success方法却回调了”、”sucess回调方法返回一个页面“、”ajax常见错误“。...直到后来就在想:为什么有的时候JSON返回一个页面的内容呢???此时想起Shiro认证流程了。...:重写自定义表单过滤器方法,判断是否为ajax请求来进行处理 期间找了很多相关资料,每个人实现都参差不齐。...相关源码,基本能知道shiro认证流程了,下面是一张流程图: 根据流程可以判断在验证码失败时如果ajax请求返回JSON数据。...那么会返回到该方法中,也就是会返回登陆页面 * b:如果url是登陆页面地址,是post请求的话,那么去realm中对比,如果成功了那么跳转到在表单过滤器中配置url中

2.5K80

使用 WEB API Beacon 记录行为日志 (译)

我们可以编写一些JavaScript来跟踪页面中发事情(可能是用户如何与组件交互,他们滚动到多远,或者在他们遵循CTA之前显示了哪些文章)。但我们需要在用户离开页面时发送该数据到服务器。...如果它是你希望服务器知道浏览器中发事情,那么Beacon可能是实现这些方案一个有力竞争者。 我们还不能做到这一点吗? 知道你在想什么。 这些都不是新,是吗?...我们代码可能会计算用户在页面上花费时间,因此在最后一刻将数据发送回服务器变得至关重要。 当用户离开页面时,我们想要停止计时并将数据发回服务器。...当用户执行类似跟踪页面链接导航离开时,会触发这些操作。 这里麻烦在于运行代码中一个unload事件将会阻止脚本执行并延迟卸载页面。...如果页面的卸载被延迟,那么加载下一页也会延迟,因此体验感觉非常缓慢。 请记住HTTP请求速度能有多慢就会有多慢。

1.6K21

Django学习笔记之Ajax入门

当文件框发生了输入变化时,使用AJAX技术向服务器发送一个请求,然后服务器会把查询到结果响应给浏览器,最后再把后端返回结果展示出来。 整个过程中页面没有刷新,只是刷新页面局部位置而已!...请求无须刷新整个页面; 因为服务器响应内容不再是整个页面,而是页面部分内容,所以AJAX性能高; jQuery实现AJAX 最基本jQuery发送AJAX请求示例: <!...请求如何设置csrf_token 方式1 通过获取隐藏input标签中csrfmiddlewaretoken值,放置在data中发送。...放置在请求中发送。...当input标签失去焦点后获取 username表单字段值,向服务端发送AJAX请求; django视图函数中处理该请求,获取username值,判断该用户在数据库中是否被注册,如果被注册了就返回“

1.3K50
领券