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

jQuery进阶前言

前言: 在《jQuery入门》一文中,记录了jQuery选择器、属性与样式和DOM操作等内容,本文将对jQuery的事件以及Ajax相关知识点进行讲解。接下来就一起来学习一下。...比如有一个输入框,要在该输入框输入文字,我们首先得用鼠标点一下该输入框,这就叫获取焦点。...五、Ajax的应用: Ajax是一种无需重新加载整个网页的情况下,能够更新部分网页的技术,也就是异步更新。...比如一般的网站登录的时候要输验证码,当你输完验证码,就会立即提示验证码正确还是错误,而不需要点击“登录”按钮后再去判断,这就用到了Ajax。接下来就看看如何使用。...三个参数还是和上面的load一样,不过url必须是为请求加载json格式文件的服务器地址,也就是说,请求的url必须返回json格式的数据。

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

    ajax异步提交数据到数据库

    当然,这个逻辑操作没一点毛病,但有一点,那就是给用户不好的体验:重新刷新了页面。假如,用户没按要求输错了某个值,然后弹出一个框框告诉你“亲爱的,你刚刚花了半个小时注册的内容得重新输入了!!”...,这时候,你肯定的mmp的,所以,咱们今天要推举的ajax异步post提交数据到数据库来解决这个问题。 先理解个概念吧:同步与异步。...举个简单的例子:你用form表单,直接post提交数据到数据库,那是同步;你用ajax异步提交post,那是异步操作;就相当于,你有一样东西要给A,你直接放给他,然后他用完直接还给你,这就叫同步,而,你可以通过快递...分析: 1、js获取input中的数据 2、判断数据是否满足要求(这里提一下layer,它是一个很好用很好看的前端弹出框框架,简单易学,可以去官网上看开发文档) 3、请求post的url地址 4、要传递到...url地址的相关数据(参数案例:{name:"wzc",sno:"001"}) 5、数据处理后返回函数 好,接下来,我们看看ajaxCheckLogin.php文件: ?

    5.3K40

    XSS攻击,这次一定会!

    开启本文前,先提出两个我在面试时被问到的题: 为了预防XSS攻击,我们会对用户的输入内容进行过滤,转义的时机应该是a.输入时前端处理 b.落库时后端处理 c.拼接HTML时 ?...攻击者拼接出包含恶意代码的受害网站URL,诱导用户点击; 用户点击该URL,目标网站的服务器取出恶意代码,拼接到HTML返回; 恶意代码在其他用户的浏览器端运行; 这类攻击需要用户主动点击受害网站的URL...比如一个恶意URL可以长这样:http://xxx/search?...纯前端渲染 纯前端渲染是指,浏览器首先加载一个空白的HTML,然后执行该HTML引入的JS文件,JS通过AJAX获取业务数据,调用DOM API,更新到页面上。...其他通用策略 使用CSP:CSP即Content Security Policy内容安全策略,限制加载其他域下的资源,这样即使黑客插入了一个 Javascript文件,它也是无法被加载的; 开启HTTP

    73820

    某气网js逆向解密

    3、使用chrome内核的浏览器即可。” 得到url打开某气网:     在网页中,选择大气环境选项。     这就是我们需要的数据,输入开始结束日期能获得一张数据图。     ...好了,接下来开始尝试抓包!!     在时间框选好起始结束时间后,点击确定,抓到N个ajax数据包。到底哪一个是呢??猜一个??     ...继续分析,我是点击确定才发起ajax请求的,所以应该是最后一个获得的数据包(waterfall最靠后的包)。     点击,看看返回的响应数据:     ???一堆乱码,还是加长版的???...找到五个比较符合规则的param。 从上图分析,param参数是一个getParam的js函数生成的,然后发起了ajax请求。但是,我选定的开始和结束的日期呢???...接下来我们需要去偷网站的js代码,因为我们选择走js逆向最简单的路——靠Pyexecjs模块,用python去执行js代码。

    4.4K20

    【网络原理】从零开始深入理解HTTP的报文格式(二)

    这是一个最常见的状态码, 表示访问成功. 抓包抓到的大部分结果都是 200 ② 404 Not Found 表示没有找到资源. 浏览器输入一个 URL, 目的就是为了访问对方服务器上的一个资源....如果这个 URL 标识的资源不存在,那么就会出现 404.例如, 在浏览器中输入 https://www.sogou.com/index.html 此时就在尝试访问 sogou 上的 /index.html...比如我本来的手机号是 1314, 后来换了个新号码 520, 那么不需要让我的朋友知道新号码,只要我去办理一个呼叫转移业务, 其他人拨打 1314 , 就会自动转移到 520 上....• name: 表示构造出的 HTTP 请求的 query string 的 key. query string 的 value 就是输⼊框的用户输入的内容....特点是可以不需要 刷新页面/页面跳转 就能进行数据传输. Ⅰ 利用 ajax 发送 GET 请求 浏览器原生提供了 ajax 的 api 特别难用, 但好在有一些第三方库封装了 ajax.

    87400

    ajax的再次封装!

    js的动态加载、缓存、更新以及复用 系列有点卡文,放心会继续的。先来点更基础的,为js的加载做点铺垫。   jQuery的ajax本来就很方便了,为啥还要在进一步的封装呢?...项目现状:     做ajax请求的时候,会有一个加载的动画,在ajax发起的时候要自动开始,加载完毕之后要自动停止。出错了也要自动停止,并且给出错误提示。请求的URL比较固定,按照增删改查来分类。...这个似乎挺好,但是在post的时候,我需要明确的把一些参数放在URL里面,一些参数放在form里面。这个就不能都放在data里面,我还得自己去拼接URL。麻烦还爱出错。...在这里首先会根据title属性给出一个提示,告诉用户,访问出错了。然后会把加载的动画提示给停掉。一开始在出错的时候没有去停止加载动画,好多用户就更我说,你那个页面,转呀转呀,转了n就都没反应。...总之,当变化发生的时候,我只需要改一个地方就ok了,我不需要到处去改,还容易漏掉某某。 ps: 这里跳过了一个步骤,就是“缓存”。

    1.4K80

    jQuery中的常用内容总结(二)

    (上一节) Ajax同步与异步(本节) 事件(本节) 弹窗(本节) 参数序列化(第三节) 遍历(第三节) 其他(第三节) ajax在实际开发中用的特别多,尤其是前后端分离的今天甚是~,接下来所说的ajax...,一般用户点击输入框进行输入时候使用此事件 keydown():按键按下事件,一般用于输入框输入时绑定此事件 keypress():按键松开事件,一般用于输入框输入时绑定此事件 load():dom...加载完毕事件,一般用于页面加载后自动执行此事件 mousedown():鼠标指针移动到dom上方事件 mouseenter():鼠标指针穿过dom事件 mouseleave():鼠标指针离开dom...(val)来区别弹窗类别,其:     第一种弹窗使用alert,是最简单最通用也是最不堪大用的弹框     第二种弹窗使用的是原生的prompt,同时需要把这个对象赋给一个变量,通过参数可以即可获取到用户输入的内容哦...~     第三种弹框是一种单选性质的弹框,使用的是confirm,同样也是需要将这个对象赋给一个变量才可获取到true 或 false 嘿~     第四种弹框使用的是一个完整的html页面(需要window.open

    2K110

    Django评论库

    评论的功能打算用Django的评论库,添加引用却报错。 查了一下,Django原本会自带一个评论库组件,而从1.6版本以后就没有自带了,需要自己安装。...django的评论库是一个站点,所以需要添加sites的应用并设置当前django工程的站点id=1 记得在urls.py添加django_comments的路由设置,url中加入如下代码: url(...这些需要使用django_comments的模版标签,在使用标签之前导入加载: {# 导入评论库模块的模版标签 #} {% load comments %} 评论列表可以通过django_comments...变量得到的评论加载即可。 而评论提交表单,最主要的是提交的url和表单字段。...虽然现在可以提交评论了,但提交评论之后会跳转到一个很简陋的页面。 接下来用ajax写评论提交事件避免避免跳转到独立的评论页面,修正时间戳等Bug。

    1.3K21

    jQuery中的常用内容总结(二)

    ),恍惚之间时间已经从身边流走~,好难过≡(▔﹏▔)≡;所以,我决定这次不管熬夜到几点都要把本节和第三节内容全部写完~ ajax在实际开发中用的特别多,尤其是前后端分离的今天甚是~,接下来所说的ajax...都是经过jQuery封装过的,至于写法大致有ajax标准写法和jQuery简写两种,下面先给出这两种写法的样式-> $.ajax({ type : "post",...,一般用户点击输入框进行输入时候使用此事件 keydown():按键按下事件,一般用于输入框输入时绑定此事件 keypress():按键松开事件,一般用于输入框输入时绑定此事件 load():dom...(val)来区别弹窗类别,其:     第一种弹窗使用alert,是最简单最通用也是最不堪大用的弹框     第二种弹窗使用的是原生的prompt,同时需要把这个对象赋给一个变量,通过参数可以即可获取到用户输入的内容哦...~     第三种弹框是一种单选性质的弹框,使用的是confirm,同样也是需要将这个对象赋给一个变量才可获取到true 或 false 嘿~     第四种弹框使用的是一个完整的html页面(需要window.open

    3.4K40

    jQuery中的常用内容总结(二)

    ),恍惚之间时间已经从身边流走~,好难过≡(▔﹏▔)≡;所以,我决定这次不管熬夜到几点都要把本节和第三节内容全部写完~ 内容提要---- ajax在实际开发中用的特别多,尤其是前后端分离的今天甚是~...,接下来所说的ajax都是经过jQuery封装过的,至于写法大致有ajax标准写法和jQuery简写两种,下面先给出这两种写法的样式-> $.ajax({ type : "post...,一般用户点击输入框进行输入时候使用此事件 keydown():按键按下事件,一般用于输入框输入时绑定此事件 keypress():按键松开事件,一般用于输入框输入时绑定此事件 load():dom...(val)来区别弹窗类别,其:     第一种弹窗使用alert,是最简单最通用也是最不堪大用的弹框     第二种弹窗使用的是原生的prompt,同时需要把这个对象赋给一个变量,通过参数可以即可获取到用户输入的内容哦...~     第三种弹框是一种单选性质的弹框,使用的是confirm,同样也是需要将这个对象赋给一个变量才可获取到true 或 false 嘿~     第四种弹框使用的是一个完整的html页面(需要window.open

    1.7K30

    emlog评论ajax提交的几种方法

    这些天我在做FYS模板的时候发现评论ajax这个确实存在了很大的问题,之前我是参考的大前端的ajax 谁知道前几天我发现有这个BUG的时候还以为是我写法的问题,然后我就研究了1天多发现现在很多emlog...然后我所幸就不在看他们的,然后本来想研究下FLY的,他的也是有一种规律并不怎么是ajax,第一下回复是无刷新,第二下回复就刷新了网页!...评论提交修改的,其中也遇到很多问题,下面罗列一下 1、myJson函数返回的是json格式的代码,但是ajax还是识别不了     答:因为json需要header头设置为json编码,所以myJson...函数还需要加一个 header('Content-type: application/json'); 才能被ajax识别 2、按钮提交form表单会跳转的问题...4、关于重复提交问题     答:因为原版js没有加同步操作,所以只需要在ajax操作中加入async:false同步操作即可,本文已加 上面就是小杰在替换ajax评论提交时遇到的一些复杂问题。

    1.3K11

    JavaEE-- 网络编程 http请求报头

    Body 里你提交的密码、个人信息 服务器拿到请求后,会对比: URL 中写的路径(明文可见) Header 中的 Host 字段(加密传输,只有服务器能解密看到) 如果两者不一致(比如 URL 是...浏览器输入⼀个URL,目的就是为了访问对方服务器上的⼀个资源.如果这个URL标识的资源不存在, 那么就会出现404 例如,在浏览器中输⼊ www.sogou.com/index.html ,此时就在尝试访问...如果输⼊正确,则可以正确访问到.但是如果输⼊错误,比如 会看到404这样的响应 403Forbidden 表⽰访问被拒绝.有的⻚⾯通常需要⽤⼾具有⼀定的权限才能访问(登陆后才能访问).如果⽤⼾没有登陆...比如我本来的⼿机号是186-1234-5678,后来换了个新号码135-1234-5678,那么不需要让我的朋友知 道新号码, 只要我去办理⼀个呼叫转移业务,其他⼈拨打186-1234-5678,就会...特点是可以不需要刷新页面/页面跳转就能进行数据传输. 在JavaScript 中可以通过ajax的方式构造HTTP请求 发送GET请求 <!

    27110

    通过DVWA学习XSS

    接下来是利用xss获取用户cookie,由于script标签可以加载远程服务器的javascript代码并且执行,所以我们在win7的服务器下编写cookie.js。...data="+documenT.cookie)> 注意观察我们所插入的代码,我表明的大写部分,竟然构成了一个script,所以符合代码的正则,从而过滤掉了,这实在是坑啊……那我们将插入代码中的i进行...dvwa存储型xss 存储型xss的不同之处在于它可以将用户构造的有害输入直接存储起来,不需要攻击者构造链接诱使受害人点击触发,而是目标网站的用户只要访问插入恶意代码的网站就能触发,相比较反射型...'' ); //mysql_close(); } 可以看出对有害输入没有任何过滤,直接将用户提交的内容插入数据库,输入点在两个输入框都有,但是后面的几种难度都对Message域的输入内容进行了...参数发送给steal.php 然后提交我们的输入 可见页面加载了我们的cookie.js ?

    6.3K50

    爬虫进阶(二)

    我们需要这四百条数据的销量、价格,发货地,书店名。...老规矩,我们先用预演一遍如果人工去实现这个过程会怎么做: 打开淘宝——找到输入框并输入《用Python写网络爬虫》——点击搜索——出现商品页——把第一页中的所有商品信息记录下来——然后进行翻页到下一页—...除了修改参数,我们在上一篇推文中还用到另一种知识,基于AJAX请求的网页,我们去看看淘宝的页与页之间是否也是采用AJAX请求的,如果是的话可以通过AJAX去或获取每一页的url,然后去进行下一步。...打开淘宝——找到输入框并输入《用Python写网络爬虫》——点击搜索——出现商品页——把第一页中的所有商品信息记录下来——然后进行翻页到下一页——重复记录信息的动作——直至最后。...browser = webdriver.Chrome()#创建一个浏览器对象 browser.get('https://www.taobao.com')#给浏览器传入一个url参数 input=WebDriverWait

    1.7K80

    JavaWeb核心篇(6)——Ajax

    接下来我们会逐步介绍Ajax以及Ajax的封装包Axios和新的数据格式JSON等内容 Ajax 首先我们先了解一下Ajax: 异步的JavaScript和XML Ajax作用 AJAX 作用有以下两方面...} }; 由于我们发送的是 GET 请求,所以需要在 URL 后拼接从输入框获取的用户名数据。...肯定不用,可以提前定义一个 js 对象,用来封装需要提交的参数,然后使用 JSON.stringify(js对象) 转换为 JSON 串,再将该 JSON 串作为 axios 的 data 属性值进行请求参数的提交...我们只需要将需要提交的参数封装成 js 对象,并将该 js 对象作为 axios 的 data 属性值进行,它会自动将 js 对象转换为 JSON 串进行提交。...具体的前后端交互的流程如下: 说明: 前端需要将用户输入的数据提交到后端,这部分数据需要以 json 格式进行提交,数据格式如下: 后端实现 在 com.itheima.web 包下创建名为 AddServlet

    9.5K30

    节流防抖的使用_监听滚动节流

    大家好,又见面了,我是你们的朋友全栈君。 什么是防抖 当事件被触发后,延迟几秒后再执行回调,如果在这几秒内事件又被触发,则重新计时。如:游戏中的回城机制,中途打断后必须要重新回城,重新读条。...例如:实现输入框的防抖 //模拟ajax请求 function ajax(content) { console.log('ajax request ' + content); } let..., 500) inputb.addEventListener('keyup', function (e) { debounceAjax(e.target.value) }) 加入了防抖后,在频繁的输入时不会发送请求...,只有当在指定间隔内没有输入时,才会执行函数。...应用场景 1 滚动加载,加载更多或滚到底部监听 2 谷歌搜索框,搜索联想功能 3 高频点击提交,表单重复提交 函数防抖与节流的比较 都可以通过使用 setTimeout 实现。

    1.2K20

    JavaWeb全栈开发前后端交互通用标准

    若后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数(即URL请求的参数)。...然而,在以下情况中,请使用 POST 请求: 不使用缓存文件(更新服务器上的文件或数据库) 向服务器发送大量数据(POST 没有数据量限制) 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠...后端从数据库里面去查询相应的数据表以获得相应的内容或者图片地址信息。 URL中的参数主要是根据后台需要,若后台需要一个参数作为查询的辅助条件,前端在URL数据请求时就传递参数。 请求格式:URL?...语法:$(selector).load(URL, data, callback); 必需的 URL 参数规定希望加载数据的URL。...例子:使用 .get() 方法从服务器上的一个文件中取回数据: /* $.get() 的第一个参数是我们希望请求的 URL("demo_test.asp")。 第二个参数是回调函数。

    8.6K20
    领券