首页
学习
活动
专区
工具
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.8K00
  • ajax跨域问题以及解决方案_js跨域请求的三种方法

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

    3.5K20

    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.4K30

    轻松掌握ajax底层实现原理

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

    73710

    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.6K40

    Web 应用架构的下一个转变

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

    1.2K10

    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.1K30

    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.2K10

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

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

    1.8K30

    前后端交互的弯弯绕绕

    前后端交互:,收拾一下心情让我们来聊一聊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

    11220

    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

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

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

    1.6K30

    论如何反击用AWVS的黑客

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

    1.6K90

    中级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://

    30720

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

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

    2.6K80

    【JavaWeb】95:同步和异步

    ②请求时会携带所有的信息 比如说一个form表单,需要填入用户名,密码,手机号,等多个信息。 如果其中有一个信息填写错了,请求失败,又要全部重新填写,会很麻烦繁琐。 我只填写我填错了的不就好了么?...但是异步请求是局部页面更新。 比如上述的手机号、密码,邮箱名,在填写时就会发送一个异步请求。 若是格式不正确,会提醒修改,而其它已经填写的正确信息不受影响。 二、原生的Ajax 什么叫Ajax呢?...②onreadystatechange事件 不要看这一大串这么长,翻译过来就是当前数据源的数据将要发生变化时,就可以理解成监听。 这个事件就是实现异步请求的核心关键。...如果不是XML数据,都使用responseText。 以上就是原生的Ajax,当然实际使用过程中不会这样用,但是面试时可能会被问到。 并且这是基础,学一下也是有必要的。...JSON数据的value值:任意类型,如果是字符串则必须加双引号。 时间有限,其中关于json还有一些api就不做专门讲解了,今后使用到了边记边学就好了。 最后 谢谢你的观看。

    87340

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

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

    1.6K21
    领券