美文网首页
12月18日晚上:Ajax数据提交和验证码处理

12月18日晚上:Ajax数据提交和验证码处理

作者: FKTX | 来源:发表于2017-12-18 20:02 被阅读0次

重点内容

验证码的添加与自动刷新

TP5官方手册中,已经很明确的表示如何添加验证码了。在杂项那一栏。所以,我需要做的事情是:

上面那个,是模板中没有插入验证码的地方,才那么写。而我的模板中,已经给了验证码地方,只是由于路径等原因,验证码无法显示。因此,将模板中插入验证码地方的src改成上图的模样即可。改好之后如下图:

验证码的大小之类的,都是可以修改的。官方手册里面也都提到了

同时,为了更加美观,模板自带的验证码提示值可以去掉,但是我看了一下模板,用的是placeholder,不是value,因此不用去掉,挺美观的。但是,login.html这个页面的底部有百度的推广脚本。把他得删掉。(忘了取消按钮了,登录页面也可以删掉。。。没必要有取消按钮。。。)

下面这幅图是百度推广信息,删除

现在用ajax提交数据是主流,因此需要修改提交按钮的type,不再是submit提交了。

先把type='submit'改成type='button'

然后,需要注意的是,登录页面有三个表格数据要提交,账号,密码,还有验证码。为了能够让控制器校验成功,需要给这三个地方都添加name属性,这点很重要!

同时,为了让用户点击登录的时候,提交数据,所以先给登录按钮一个id="login",方便后面用jquery编写提交数据的脚本

补充概念Ajax:就是点击页面上按钮的时候,不卡顿,很流畅的技术。如果用以前的提交方式,那么数据会一个一个提交,容易卡顿,用户体验差。直白地说,就是没用AJAX的网页,你点一个按钮就要刷新一下页面,尽管新页面上只有一行字和当前页面不一样,但你还是要无聊地等待页面刷新。用了AJAX之后,你点击,然后页面上的一行字就变化了,页面本身不用刷,AJAX只是一种技术,不是某种具体的东西。不同的浏览器有自己实现AJAX的组件

补充概念json:json是一种轻量级的数据交换格式

下面,在准备写jquery代码之前,需要给上面的提交button这个按钮增加id值,目的是方便jquery获取。

上面这一步完成之后,达到的效果只是页面点击一下刷新按钮,验证码才会重新生成一张。但是,为了能够点击“看不清换一张”就刷新验证码,还得做下面的事情。

接着在底部编写脚本,同时对应要给验证码图片,记住是图片,增加id,否则底部脚本获取不到

很短的代码,由于不熟悉,写了很多解析。

相关文章

  • 12月18日晚上:Ajax数据提交和验证码处理

    重点内容 验证码的添加与自动刷新 TP5官方手册中,已经很明确的表示如何添加验证码了。在杂项那一栏。所以,我需要做...

  • JQuery操作AjAx基本语法

    $.ajax({ type://提交类型 url://处理程序的URL data://提交的数据 dataType...

  • october页面ajax操作

    october处理页面上ajax请求或提交数据处理 初始化 在页面,布局、或者partials中页面增加jquer...

  • SpringMVC之数据处理

    六、数据处理 目录:处理提交数据、数据显示到前端、乱码问题 1.处理提交数据 1)提交的域名称和处理方法的参数名一...

  • 17.09 Ajax异步提交基础

    用Ajax提交数据到后台去处理,是非常常用的一种方法,其中用JQuery来写Ajax更是普遍,那么这种简单的基础,...

  • Ajax提交数据

    背景 在业务上面使用到了ajax上传图片,采用的方式是提供一个公用的api进行图片上传,然后返回图片的在服务器的u...

  • 表单防止重复提交

    逻辑思路:1.提交数据之前判断当前提交按钮是否存在lock锁2.在ajax提交之前给提交按钮上锁3.ajax成功之...

  • springMVC_06数据的处理

    一.提交数据的处理 *springmvc是单例的 1. 提交的域名称和处理方法的参数一致即可 提交的数据 处理方法...

  • 封装复杂的ajax请求

    封装复杂的 ajax 请求 ajax 传参为对象的格式,方便之后进行数据处理 注意数据格式的处理 get 和 po...

  • Ajax写法解释

    $.ajax({ //提交数据的类型 POST GET type: "post", //提交的网址 url: "x...

网友评论

      本文标题:12月18日晚上:Ajax数据提交和验证码处理

      本文链接:https://www.haomeiwen.com/subject/sqemwxtx.html