首页
学习
活动
专区
圈层
工具
发布

JavaScript 编程精解 中文第三版 十八、HTTP 和表单

通信在实质上必须是无状态的,从客户端到服务器的每个请求都必须包含理解请求所需的所有信息,并且不能利用服务器上存储的任何上下文。...HTML页面可能包含表单,用户可以在表单中填入一些信息然后由浏览器将其发送到服务器。如下是一个表单的例子。...当点击发送按钮时,表单就提交了,这意味着其字段的内容被打包到 HTTP 请求中,并且浏览器跳转到该请求的结果。...在一个form拥有焦点时,点击enter键也会有同样的效果。 通常在提交一个表单时,浏览器会将页面导航到form的action属性指明的页面,使用GET或POST请求。...页面也可能包含表单,这些表单允许在提交表单时,用户输入的信息发送为新页面的请求。 HTML可以表示多种表单字段,例如文本字段、选择框、多选字段和文件选取。

5.2K20

Ajax(二)

注意:每个表单域必须包含 name 属性,否则用户填写的信息无法被采集到 表单按钮 当表单数据填写完毕后,用户点击表单按钮,会触发表单的提交操作,从而把采集到的数据提交给服务器。...接口的url值 把表单采集到的数据,提交到那个接口中 method GET或POST 数据提交的方式(默认为GET,传GET时可以不写这个属性) enctype 1. application/x-www-form-urlencoded...提交表单数据 在提交数据时,页面会自动跳转,导致用户体验感差。因为表单身兼数职: 负责采集数据 负责把数据提交到服务器 表单的默认提交行为会导致页面的跳转。 1....步骤 给form注册submit事件 ==> 该事件会在表单提交的时候会触发 阻止表单的默认跳转行为 ==> 事件对象e.preventDefault() 收集表单中数据 发送ajax请求提交给服务器...对象 例如: const fd = new FormData() // 创建一个空白的 FormData 对象,里面没有包含任何数据 调用 FormData 对象的 append(键, 值) 方法,可以向空白的

2.2K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Asp.net_Study学习笔记

    选择浏览器:选择浏览器安装目录;更方便的改代码测试:哪怕停止调试,只要web服务器还在运行,那么修改CS代码之后只要点击“生成” 表单提交 Html表单可以自动给服务器提交参数(get是 通过url,post...浏览器向服务器端提交数据,被提交数据的表单(input. selecttextarea等)放到form中,form中 通过action属性设定表单被提交给哪个页面,为了在服务端取出表单项的值,需要在HTML...Cookie是和站点相关的,并且每次向服务器请求的时候除了发送表单参数外,还会将和站点相关的所有Cookie都提交给服务器。...同时http协议没有记忆性,不会记录上一次与该客户端连接时状态,这些都保证了服务器能购高效率的运行。 因此,如果需要服务器先向浏览器发送数据,从http协议的层面上讲是不能实现的。...一定意义上,浏览器没有再次主动请求服务器,但服务器主动向浏览器返回数据。

    1K10

    React19 她来了,她来了,他带着礼物走来了

    在React19没发布之前,从各种小道消息中知晓了React在新版本中新增了很多特性,并且优化了编译流程。因为,本着没有调查就没有发言权的态度,我就迟迟没有下笔。...初始页面加载和首次内容渲染(FCP): 在服务器端,我们可以生成HTML,允许用户立即查看页面,而无需等待客户端下载、解析和执行渲染页面所需的JavaScript。...在使用Action之前 在下面的代码片段中,我们将利用 onSubmit事件,在表单提交时触发搜索操作。...,并基于一些状态渲染一些辅助信息 formAction是执行异步提交的处理 在上面的代码中,当表单提交时,从 useFormStatus hook 我们将获得一个 pending 状态。...); fn:表单提交或按钮按下时要调用的函数。 initialState:我们希望状态初始值是什么。它可以是任何可序列化的值。在首次调用操作后,此参数将被忽略。 permalink:这是可选的。

    1.1K20

    web常见安全问题

    防范 HTML转义 防范XSS攻击最主要的方法是对用户输入的内容进行HTML转义,转义后可以确保用户输入的内容在浏览器中作为文本显示,而不是作为代码解析。...> 这个链接打开其实是一片空白,它却会发起了一个表单请求,发起了一个post请求:http://localhost:3000/edit,并且将password的值设为了999,然后submit提交,而且提交是弹出一个...后端验证HTTP的Referer 和Origin字段 referer属性 记录了该http请求的来源地址,但有些场景不适合将来源URL暴露给服务器,所以可以设置不用上传,并且referer属性是可以修改的...,所以在服务器端校验referer属性并没有那么可靠 origin属性 通过XMLHttpRequest、Fetch发起的跨站请求或者Post方法发送请求时,都会带上origin,所以服务器可以优先判断...csrfToken 在浏览器向服务器发起请求时,服务器生成一个CSRF Token(字符串)发送给浏览器,然后将该字符串放入页面中 浏览器请求时(如表单提交)需要带上这个CSRF Token。

    1.9K40

    【jquery Ajax 】form表单教学+评论案例

    当表单未指定action属性值的情况下,action的默认值为当前页面的URL地址。 当表单提交后,页面会跳转到action属性指向的地址。                ...在实际开发中,表单的post提交方式用的最多,很少用get,例如登录,注册,添加数据等表单操作,都需要使用post方式来提交表单。         ...表单的同步提交以及缺点                 什么是表单的同步提交 通过点击submit按钮,触发表单提交的操作,从而使页面跳转到action URL的行为,叫做表单的同步提交。                ...表单提交的缺点 表单同步提交后,整个页面会发生跳转,跳转到action URL所指向的地址,用户体验很差。 表单同步提交后,页面之前的状态和数据会丢失。...console.log($(this).serialize()); })  结果是一个键值对字符串,键名是name,键值是输入的值,不同的键值对之间用&连接 所以  在使用这个函数时,

    2.6K20

    Nodejs学习笔记(六)--- Node.js + Express 构建网站预备知识

    运行界面如下: image.png   点击各链接都能正常跳转到对应的页面!这样第一步的目录就算达到了! 如何提取页面中的公共部分?   在上一步创建的网站中每个页面都几乎一样,现在都只有导航部分?...中出现了我表单中输入并要提交的值!   ...get方式提交一样在url中出现了表单中输入并要提交的值!...服务器端不会记录状态,因此服务器端想   要确定是哪个客户端提交过来的请求,那就必须要借助一些东西去完成,就是session和cookies,现在我们先说说session,以及在nodejs下使用session...,在usecookies部分登录同时记录cookies,来自动登录       1.在上面session示例的基础上修改一下usecookies.js var express = require('express

    3.5K70

    GhostFrame钓鱼框架一年发动超百万次攻击:看不见的iframe,正在吞噬你的账号安全

    她点开链接,跳转到一个看似无害的HTML页面——白底、简洁标题、加载动画,甚至没有登录框。几秒后,页面自动跳转至一个与微软官方几乎一模一样的登录界面。她输入账号密码,点击“下一步”,一切顺利。...第二阶段:iframe中的“真实战场”当iframe加载后,真正的钓鱼内容才登场。...“我们看到很多SOC团队只监控主页面的网络请求,却忽略了iframe可能发起的独立POST请求,”芦笛指出,“GhostFrame的凭证正是通过iframe内的独立XHR发送至C2服务器,完全绕过主页面的日志记录...“当攻击者用‘您的电子发票已生成’诱导点击,跳转到一个看似空白的页面时,我们的防线是否准备好了?”此外,国内移动生态的特殊性也带来新挑战。...当一个看似静态的页面突然加载跨域iframe,且该iframe发起凭证提交请求时,系统应标记为高风险。

    12410

    React 支持 form action 是在作妖?不,它是一种重磅回归

    当 type='submit' 的按钮点击提交时,onsubmit 就会触发,我们可以在这个回调函数里执行自己的提交逻辑。...不过它的表现会不太一样。 action 接收一个 URL 作为参数,可以是绝对路径,也是可以相对路径。它表示携带表单数据向该地址发送请求。默认情况下页面会跳转到指定的 URL 地址。...✓先用最基础的知识内容铺垫一下 在 HTML 的表单元素中,我们可以通过监听 form 对象的 onsubmit 来回调函数的执行。也可以通过 action 属性来直接向服务端发送请求。...我们在表单中输入信息,并把信息记录展示在一个列表中。...后来我才意识到,这对于服务端渲染有着巨大的划时代的重要意义。 在评估网页性能中,有一个重要的性能指标:TTI:可交互时间。页面加载完成,并且首屏显示,并且页面可以交互。

    1.4K10

    Web安全之CSRF实例解析

    ,直接运行想要的js代码; nodemon[2]: nodemon是一种工具,通过在检测到目录中的文件更改时自动重新启动节点应用程序来帮助开发基于node.js的应用程序 前端页面:client.html...,表单的内容就是自动发起支付的接口请求。...当用户打开该页面时,这个表单会被自动执行提交。当表单被提交之后,服务器就会执行转账操作。因此使用构建自动提交表单这种方式,就可以自动实现跨站点 POST 数据提交。...相对宽松一些,在跨站点的情况下,从第三方站点链接打开和从第三方站点提交 Get方式的表单这两种方式都会携带Cookie。...CSRF Token其实就是服务器生成的字符串,然后将该字符串种植到返回的页面中(可以通过Cookie) 浏览器之后再发起请求的时候,需要带上页面中的 CSRF Token(在request中要带上之前获取到的

    1.7K20

    2. RequestMapping注解

    后端要求前端必须发送一个get请求,后端可以通过重写doGet方法来实现。当重写的方法是doPost时,前端就必须发送post请求,当重写doGet方法时,前端就必须发送get请求。...当然,如果后端要求前端必须发送post请求,而前端发送了get请求,则会出现405错误,将index.html中form表单提交方式修改为get: 服务器提交资源,可能还会改变数据的状态和功能。通过表单等方式提交请求体,服务器接收请求体后,进行数据处理。 PUT:更新资源,用于更新指定的资源上所有可编辑内容。...get请求在W3C中是这样说的:get请求比较适合从服务器端获取数据。 post请求在W3C中是这样说的:post请求比较适合向服务器端传送数据。 get请求是安全的。...也就是说当第二次发送get请求时,会走浏览器上次的缓存结果,不再真正的请求服务器。(有时需要避免,怎么避免:在get请求路径后添加时间戳) post请求不支持缓存。

    46610

    一个合格的初级前端工程师需要掌握的模块笔记

    有部分标签是没有结束标签的,为单标签,单标签必须使用/结尾。 页面所有的内容,都在html标签中。 html标签分为三部分:标签名称,标签内容,标签属性。...) form表单事件,onblur,当元素失去焦点时触发,onchange,在元素的值被改变时触发,onfocus,当元素获得焦点时触发,onreset,当表单中的重置按钮被点击时触发,onselect...autofocus 当为某个表单控件增加该属性后,当浏览器打开这个页面, 这个表单控件会自动获得焦点 list 为文本框指定一个可用的选项列表,当用户在文本框中输 入信息时,会根据输入的字符...,加上 pattern 属性后, 验证会更加高效 novalidate 当提交表单时不对其进行验证 required 必需在提交之前填写输入字段 spellcheck 拼写检查,为<input...JavaScript 和 XML 在浏览器中输入url地址请求服务器时,是通过Ajax发送http请求给服务器,服务的响应结果也是先返回给Ajax,先Ajax处理之后在返回给浏览器显示在页面。

    4.4K10

    CSRF攻击与防御

    加入验证信息一般有两种方案,一种是使用图形验证码,在提交信息之前,需要先输入图像验证码,验证码是随机生成的,因此在恶意网站是不能知道当前验证码的内容的;另一种方案是在页面中放入一个 Token,在提交内容时...当客户端发起请求时就会带上输入框中的 token,服务端拿到表单中的 token,然后解析出 cookie 中的 token,两者作比较,如果相等则认为是合法的。...当两者都有时,攻击者无法获知表单中的 token,也无法改变 cookie 中的 token。当两者一致时才认为合法。...如果一个用户打开几个相同的页面同时操作,当某个页面消耗掉 Token 后,其他页面的表单内保存的还是被消耗掉的那个 Token,因此其他页面的表单再次提交时,会出现 Token 错误。...通过调整 iframe 页面的位置,可以诱使用户恰好点击在 iframe 页面的一些功能性按钮上,比如提交表单。点击劫持需要对页面布局,调整按钮的位置,引导用户点击。

    2.3K40

    前端安全编码规范

    或者浏览器的Cookie中 尽量把Token放在表单中,把敏感操作由GET改为POST,以form表单的形式提交,可以避免Token泄露(比如一个页面:http://host/path/manage?...和CSRF漏洞时,XSS可以模拟客户端浏览器执行任意操作,在XSS攻击下,攻击者完全可以请求页面后,读取页面内容中的Token值,然后再构造出一个合法的请求 3....比如,程序员小王在访问A网页时,点击空白区域,浏览器却意外打开了xx新葡京赌场的页面,于是他在A网页打开控制台,在空白区域发现了一个透明的iframe,该iframe嵌入了一个第三方网页的URL 3.1...并且这个功能不受同源策略限制。 必要时,在接受窗口验证 Domain,甚至验证URL,以防止来自非法页面的消息。实际上是在代码上实现一次同源策略的验证过程。接受窗口对接口的信息进行安全检查。...总结 谨慎用户输入信息,进行输入检查(客户端和服务端同时检查) 在变量输出到HTML页面时,都应该进行编码或转义来预防XSS攻击 该用验证码的时候一定要添上 尽量在重要请求上添加Token参数,注意Token

    1.7K12

    前端面经(2)

    因为事件在冒泡过程中会上传到父节点,并且父节点可以通过事件对象获取到目标节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件,这种方式称为事件代理。...`HTTP`无需证书,而HTTPS 需要CA的SSL证书GET和POST区别(高频)1.GET在浏览器回退不会再次请求,POST会再次提交请求2.GET请求会被浏览器主动缓存,POST不会,要手动设置3....GET请求参数会被完整保留在浏览器历史记录里,POST中的参数不会4.GET请求在URL中传送的参数是有长度限制的,而POST没有限制5.GET参数通过URL传递,POST放在Request body...强缓存策略和协商缓存策略在缓存命中时都会直接使用本地的缓存副本,区别只在于协商缓存会向服务器发送一次请求。它们缓存不命中时,都会向服务器发送请求来获取资源。...Form表单:最原始的跨域通信的几种方式解决方案:1. jsonp(利用script标签没有跨域限制的漏洞实现。缺点:只支持GET请求)2.

    1.6K60

    前端 50 道面试题与答案邀你轻松拿到Offer

    主要原理: 通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令 防止: 1、使用预编译,绑定变量,避免出现执行拼接字符的情况; 2、过滤特殊字符和语句...同步:提交请求 -> 等待服务器处理 -> 处理完毕返回,这个期间客户端浏览器不能干任何事 2....POST: 向指定资源提交数据进行处理请求,数据被包含在请求体中;POST 请求可能会导致新的资源的建立或已有资源的修改。 PUT: 从客户端向服务器传送的数据取代指定的文档的内容。...区别: em与rem的重要区别:它们计算的规则一个是依赖父元素另一个是依赖根元素计算。 四十三、表单提交中Get和Post方式的区别?...2. get 是把参数数据队列加到提交表单的 ACTION 属性所指的 URL 中,值和表单内各个字段一一对应,在 URL 中可以看到。

    2K20

    「学习笔记」HTML基础

    通过form表单域 目的: 在HTML中,form标签被用于定义表单域,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。...GET 和 POST 的区别 GET在浏览器回退时是无害的,而POST会再次提交请求。 GET请求会被浏览器主动cache,而POST不会,除非手动设置。...GET请求只能进行url编码,而POST支持多种编码方式。 GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。...GET请求大小一般是(1024字节),http协议并没有限制,而与服务器,操作系统有关,POST理论上来说没有大小限制,http协议规范也没有进行大小限制,但实际上post所能传递的数据量根据取决于服务器的设置和内存大小...注:当浏览器刚开始加载一个地址之后,标签页上的图标便进入了加载状态。但此时图中页面显示的依然是之前打开的页面内容,并没立即替换为百度首页的页面。因为需要等待提交文档阶段,页面内容才会被替换。

    5.8K20

    Ajax教程_ajax是服务器端动态网页技术

    Ajax教程 Ajax能做什么 Ajax是一种异步请求数据的web开发技术,目前主要用于异步,大家都知道,浏览器主线程是单线程的,也就是一次只能干一件事,以Ajax就是让浏览器当主线程完成后去干别的事情...Ajax的应用 以前我们在开发的时候,没有ajax,想要看另一个内容,只能让浏览器跳转到另一个页面,重新加载.导致用户体验很不好,并且由于同一个网站很多内容都一样,导致相同的内容被请求了多次,也浪费了宝贵的时间....有了Ajax,就是可以让数据在需要时候在加载,比如我有一个展示数据的表格和提交数据的表单,我们可以在提交的时候利用Ajax在不刷新页面的情况下提交到后台,之后让后台给我们一个响应结果,我们可以直接替换到原始的标签...这里引用一下掘金大佬ZHero88311的文章,大家可以看看,这种方式看起来就比jquery的ajax要清爽,并且基本上和vue配合起来效果更佳,也不需要转换json,可以使用.then来处理响应,并且也可以编辑配置文件.../默认与允许的文本格式json和编码格式 代理跨域 代理跨域就是讲浏览器的请求让本站点的服务器去请求,因为服务器没有跨域概念,所有可以直接拿到 这个是vue的代码 devServer: {

    1.7K30

    域名怎样实现自动跳转网页_域名

    自动跳转,指当访问用户登陆到某网站时,自动将用户转向其它网页地址的一种技术。转向的网页地址可以是网站内的其它网页,也可以是其它网站。...这种方法常可以在论坛中见到。如果在论坛上发信息,先会看到一个确认页面,几秒后会自动重新跳转回当前的论坛页面中。   从搜索引擎优化的角度出发,一般不希望自动转向有延迟。...javascript自动重定向脚本可以放在网页的任何位置上,如果要求立即跳转,则可以将其放入网页源码的区内的最上面。...对于表单,人们往往很少意识到:表单的Action参数中包含的URL地址其实正是浏览器向服务器所请求的URL。浏览器将会通过向请求的URL地址增加一些格式为name=value的参数给予它以特殊的对待。...在什么都没有的情况下,浏览器仍旧会为该URL安排请求至服务器。   用javascript脚本可让页面开始加载时即提交表单。

    14.5K30
    领券