精华内容
下载资源
问答
  • 通过ajax方式从后台获取验证码,并且通过ajax方式进行后台验证,提高验证码的安全性。
  • 验证码的 生成的例子很多,这里就不再写...开始尝试着在jsp页面获取 Session 里面的验证码的值,因为验证码是一张图片,所以得把值赋给一个隐藏的文本框内,取得验证码的值之后, 再和用户输入的验证码的值进行比较. 但第

     

    验证码的 生成的例子很多,这里就不再写了..

    以下是 用Ajax 对用户输入的验证码和 随机的验证码进行比较. 注册、登陆的时候,往往会用验证码进行验证才能进行操作。

    我的验证码的是放在Session里面。

    开始尝试着在jsp页面获取 Session 里面的验证码的值,因为验证码是一张图片,所以得把值赋给一个隐藏的文本框内,取得验证码的值之后, 再和用户输入的验证码的值进行比较. 但第一次加载的页面,  隐藏的文本框里面获取的验证码的值第一次总是null,

    刷新页面就是第一次验证码的值, 原因是:因为页面先加载,验证码后生成的, 为了解决这个问题,所以用Ajax实现验证码的验证。

     

    Ajax : 后台方法

    //返回Boolean 值

    public boolean checkverifyCode(HttpServletRequest request, String seccode)
     {
           if(seccode==null){
            return false;
       }
      return seccode.equals( request.getSession().getAttribute("rand"));
       }

     

    会用ajax的都知道 ,需要对这个方法进行配置.这里就不写了

     

    登陆页面 index.jsp

    //ajax验证验证码
     <script type="text/javascript">
     var t=new Boolean();

     function checkCode(){

    //设置成同步
      DWREngine.setAsync(false);
      var s=DWRUtil.getValue("verifyCode");
      if(s=="") {
      document.getElementById("fst").innerHTML="请输入附加码";
      return false;
      } else {

    // 调用后台的方法,传用户输入的验证码的值到后台进行验证
      ajaxService.checkverifyCode(s,dealcode);

    //设置成异步
       DWREngine.setAsync(true);
       return t;
      }
     }
     //回调函数
     function dealcode(datacode){
      if(datacode==true){
         t=datacode;
       return  t;
       } else {
       DWRUtil.setValue("fst","验证码错误");
       t=datacode;
     return  t;

      }
     }

     

    //提交表单时验证验证码

    function login(){

    checkCode();

    var theForm = document.forms["userloginform"];

    if(checkCode()==false)  {
        document.getElementById("user.userpwd").focus();
        return false;
      }    else {

    //表单提交
      theForm.submit();
      return true;
      }

    }

    </script>

     

     

    <form name="userloginform" id="userloginform"     action="<%=request.getContextPath()%>/jsp/common/login.do"
          method="post" οnsubmit="return login();">
               <p>
            帐号         <input name="user.userid" id="user.userid"     />
            密码        <input name="user.userpwd" id="user.userpwd" type="password"    />
            附加码   <input name="verifyCode" type="text" class="verifyinput"     id="verifyCode" size="15" maxlength="4"  />    

                            <img id="viewverifypic" src="<%=request.getContextPath()%>/jsp/common/image.do" />
                            <input name="ulbutton" id="ulbutton" type="image"       src="../../images/common/ulbutton.jpg" align="bottom"    />
         
                            <div id="erdivcode" >
                        <span id="fst" style="color: red;font-weight: bold;"></span>
                          </div>
          </form>

     

    展开全文
  • ajax表单验证

    2013-08-22 13:51:07
    上面,我们完成了在Validation类型中增加nameAvailable()方法,它通过发送异步Ajax请求来检查用户名是否可用,在检查的过程中,在输入框右边动态地加载图片来表示检查中,当检查结束加载相应的图片表示用户是否可用...

    很多时候在网站上注册时,我们会发现,注册表单通常需要检查用户名和电子邮件地址的可用性;从而确保用户之间不拥有相同的用户名和电子邮件地址;一些网站喜欢在用户提交填写的用户信息时,做信息可用性的检查,而一些网站会做实时的用户名和电子邮件地址可用性检查,例如:“用户名”文本框失去焦点时;就用户体验来说,实时的用户信息检查用户体验效果更好,而不是在表单提交后,告诉用户信息不符合系统要求。

    下面截图是新浪微博的注册界面,它采用的是实时的用户信息检查,如:手机号码和用户名等信息。

    ajaxform0

    图1新浪微博注册表单

    本文目录

    1.1.2 正文

    假设,现在要求我们实现一个注册界面并且它采用实时方式检查用户信息是否符合系统的要求。

    其中,注册界面包含:用户名,邮件地址,密码和微博地址等信息;实时检查:当文本框失去焦点时对信息进行实时检查,例如:“用户名”文本框失去焦点时,触发页面发送Ajax请求,到数据库中用户是否可用,接着把查询结果返回到前端页面中。

    对于表单输入检查,我们将使用前一博文《自定义jQuery插件Step by Step》中,自定义表单信息检查插件对输入信息进行检查。

    ajaxform6

    图2注册验证过程

    注册表单设计

    现在,让我们定义注册表单,它包含:用户名,邮件地址,密码和微博地址等信息,由于时间的关系,我们已经把注册表单界面的定义好了,具体实现代码如下:

    <body>
        <div id="Div1">
            <!-- Start Sign Up Form -->
            <form action="#signup-form" id="Form1">
            <h2>
                Sign Up</h2>
            <fieldset>
                <div class="fieldgroup">
                    <label for="name">
                        Name</label>
                    <input class="form_element" type="text" name="name" validation="required nameAvailable" />
                    <span class='availability_status'></span>
                </div>
                <div class="fieldgroup">
                    <label for="email">
                        Email</label>
                    <input class="form_element" type="text" name="email" validation="email" />
                    <span></span>
                </div>
                <div class="fieldgroup">
                    <label for="password">
                        Password</label>
                    <input class="form_element" type="password" name="password" validation="password" />
                    <span></span>
                </div>
                <div class="fieldgroup">
                    <label for="weibo">
                        Weibo</label>
                    <input class="form_element" type="text" name="weibo" validation="url" />
                    <span></span>
                </div>
                <div class="fieldgroup">
                    <input type="submit" class="submit" value="Sign up">
                    <span></span>
                </div>
            </fieldset>
            <div class="fieldgroup">
                <p>
                    Already registered? <a href="http://www.cnblogs.com/rush">Sign in</a>.</p>
            </div>
            </form>
            <!-- End Sign Up Form -->
        </div>
    </body>

    上面,我们实现了注册表单,它包含:用户名,邮件地址,密码和微博地址文本框,当“用户名”失去焦点时,发送Ajax请求实时检查用户名是否可用,并且动态地加载图片表示检查中和相应的检查结果。

    ajaxform1

    图3注册表单

    jQuery Validation插件

    现在,我们需要修改一下前一博文中定义的表单检查控件,需要增加用户名检查和文本框失去焦点事件(blur event)。

    首先,我们在Validation类型中,增加用户名检查方法,由于用户检查是通过发送Ajax请求,然后到数据库中查询是否存在该用户名来确定该用户名是否可用。

    nameAvailable: {
        check: function(value) {
    
            if (value) {
                var dataString = 'username=' + value;
                var result;
    
                //&nbsp;Checking availability...
                // Loads checking image.
                $(".availability_status").html('<img src="loader.gif" align="absmiddle">');
                
                // Sends ajax request to check the name is available or not.
                $.ajax({
                    type: "GET",
                    url: "UserService.ashx",
                    data: dataString,
                    success: function(data) {
                        
                        // When the checking completed, then loaded corresponding css style.
                        $('.availability_status').ajaxComplete(function(event, request, settings) {
                            if (data == false) {
                                $('.availability_status').html('');
                                $('.availability_status').removeClass('tick');
                                $('.availability_status').addClass('error');
                                return true;
                            }
                            else {
                                $('.availability_status').html('');
                                $('.availability_status').removeClass('error');
                                $('.availability_status').addClass('tick');
    
                                return false;
                            }
                        });
    
                    }
                });
    
                // Sends a asyn reqeust, return false temporary.
                return false;
                                        e.preventDefault();
            }
            else {
                $('.availability_status').removeClass('tick');
                $('.availability_status').removeClass('error');
                return false;
            }
        },
        msg: "",
        tip: "Should enter 4-30 characters, support letter, figures and _ or -"
    }

    上面,我们完成了在Validation类型中增加nameAvailable()方法,它通过发送异步Ajax请求来检查用户名是否可用,在检查的过程中,在输入框右边动态地加载图片来表示检查中,当检查结束加载相应的图片表示用户是否可用。

    接下来,我们将添加focus和blur事件,当文本框得到焦点时触发focus事件,提示输入信息的要求,当文本框失去焦点时触发blur事件,发生实时Ajax请求,例如:检查用户名是否可用。

    由于,事件方法应该是Field类型公开的方法,确实我们也不想为每个Field对象都定义自己事件方法,所以我们通过原型链的方式公开事件方法focus()和blur(),具体实现如下:

    // The prototype of Field type.
    Field.prototype = {
    
        // Public method.
        attach: function(event) {
    
            // The object refers to Field object.
            var obj = this;
            // When field lost focus, then invoked the validate method.
            if (event == "blur") {
                obj.field.bind("blur", function() {
                    return obj.validate();
                });
            }
    
            // When field got focus, then invoked the hint method.
            if (event == "focus") {
                obj.field.bind("focus", function() {
                    return obj.hint();
                });
            }
        }
    }

    我们给Field的原型链添加了事件响应事件blur和focus,当失去焦点时触发Field的vlidate()方法,获得焦点时触发Field的hint()方法。

    数据表设计

    前面,我们提到注册表单的用户名可用性检查设计是通过发送Ajax请求,然后到数据库中查询用户名是否存在来确定用户名的可用性。

    接下来,我们添加数据库表jk_user用来存储用户信息,它包括用户名、密码(注意:这里没有考虑隐私信息的加密存储)、显示名称和注册日期等,具体设计如下:

    -- =============================================
    -- Author:        JKhuang
    -- Create date: 7/8/2012
    -- Description:    A table stores the user information.
    -- =============================================
    CREATE TABLE [dbo].[jk_users](
         -- This is the reference to Users table, it is primary key.
        [ID] [bigint] IDENTITY(1,1) NOT NULL,
        [user_login] [varchar](60) NOT NULL,
        [user_pass] [varchar](64) NOT NULL,
        [user_nicename] [varchar](50) NOT NULL,
        [user_email] [varchar](100) NOT NULL,
        [user_url] [varchar](100) NOT NULL,
    
        -- This field get the default from function GETDATE().
        [user_registered] [datetime] NOT NULL CONSTRAINT [DF_jk_users_user_registered]  DEFAULT (getdate()),
        [user_activation_key] [varchar](60) NOT NULL,
        [user_status] [int] NOT NULL CONSTRAINT [DF_jk_users_user_status]  DEFAULT ((0)),
        [display_name] [varchar](250) NOT NULL
    )
    

    ajaxform2

    图4数据表设计

    服务端设计

    前面,我们实现了用户表的设计,由于注册表单通过发送Ajax请求访问服务器端公开的方法,然后通过该公开方法访问数据库。

    接下来,我们定义用户表(jk_user)的数据库访问对象(DAO),它包含方法IsAvailableUser()用来检查用户名是否可用,具体的实现如下:

    /// <summary>
    /// The user dao manager.
    /// </summary>
    public class UserManager
    {
        private const string Query = "SELECT user_login, user_email, user_url FROM jk_users WHERE (user_login = @user_login)";
    
        /// <summary>
        /// Initializes a new instance of the <see cref="UserManager"/> class.
        /// </summary>
        public UserManager()
        {
        }
    
        /// <summary>
        /// Determines whether the user is available or not, with specified username.
        /// </summary>
        /// <param name="userName">Name of the user.</param>
        /// <returns>
        ///   <c>true</c> if is available user; otherwise, <c>false</c>.
        /// </returns>
        public bool IsAvailableUser(string userName)
        {
            using (var con = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLCONN2"].ToString()))
            using (var com = new SqlCommand(Query, con))
            {
                // Pass user_login parameter to sql statement. 
                com.Parameters.Add("@user_login", SqlDbType.VarChar).Value = userName;
                com.Connection.Open();
                return !com.ExecuteReader().HasRows;
            }
        }
    }

    现在,我们完成了数据库访问对象UserManager,它包含方法IsAvailableUser()来检查用户是否可用,如果该用户名已经存在返回false,反之返回true。

    接下来,我们需要实现服务器端类UserService,让客户端通过它来调用UserManager中的IsAvailableUser()方法,首先我们创建一般处理程序(ASHX文件),实现ProcessRequest()方法,具体实现如下:

    /// <summary>
    /// The user availability check service.
    /// </summary>
    public class UserService : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            // Response json type.
            context.Response.ContentType = "application/json";
            context.Response.Charset = "utf-8";
    
            var manager = new UserManager();
    
            string userName = context.Request.QueryString["username"];
    
            // Checks the username empty or not.
            if (string.IsNullOrEmpty(userName))
            {
                throw new Exception("Username can't be empty");
            }
    
            // Invokes the IsAvailableUser method.
            var result = manager.IsAvailableUser(userName);
    
            // Serializes data to json format.     
            var json = new DataContractJsonSerializer(result.GetType());
            json.WriteObject(context.Response.OutputStream, result);
        }
    
        // Whether can resuable by other handler or not.
        public bool IsReusable
        {
            get
            {
                return true;
            }
        }
    }

    大家注意到UserService类实现了IHttpHandler接口,该接口包含一个方法ProcessRequest()方法和一个属性IsReusable;ProcessRequest()方法用于处理入站的Http请求,在默认情况下,UserService类把Response内容类型定义为application/json,这样我们就可以把数据通过JSON格式进行传输;IsReusable属性表示相同的处理程序是否可以用于多个请求,这里我们设置为true,那么处理程序可以用于多个请求。

    前端实现

    注册表单在检查用户名时会在输入框的右边动态地加载图片,这里我们使用CSS Sprite技巧实现图片的动态加载。

    当页面加载时,不是加载每个单独图片,而是一次加载整个组合图片。这是一个了不起的改进,因为我们只需发送一个HTTP请求获取组合图片就OK了,它大大减少了HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。

    这里,我们使用可以一个在线的工具SpritePad设计组合图片和生成相应的CSS代码。

    ajaxform3

    图5组合图片

    上面,我们已经准备好组合图片了,接下来我们添加CSS代码动态加载“正确”和“出错”图片,具体实现如下:

    /*CSS Sprite*/
    /*Loads tick picture*/
    .tick
    {
        width: 17px;
        height: 17px;
        margin: 6px 0 0;
        float: right;
        background: url(../images/tipicon.png);
        background-position: 0px -32px;
        display: block;
        /*text-decoration: none;
        vertical-align:middle;*/
    }
    
    /*Loads error picture*/
    span.error
    {
        width: 17px;
        height: 17px;
        margin: 6px 0 0;
        float: right;
        background: url(../images/tipicon.png);
        background-position: 0px -15px;
        display: block;
        /*text-decoration: none;
        vertical-align:middle;*/
    }

    接着,我们在nameAvailable()方法中的Ajax方法添加文件“UserService.ashx”请求,并传递用户名给服务器;在数据库中查询用户名是否已经存在,存在返回“false”,否则返回“true”。

    // Sends ajax request to check the name is available or not.
    $.ajax({
        type: "GET",
        url: "UserService.ashx",
        data: dataString,
        success: function(data) {
    
            // When the checking completed, then loaded corresponding css style.
            $('.availability_status').ajaxComplete(function(event, request, settings) {
                if (data == false) {
                    $('.availability_status').html('');
                    $('.availability_status').removeClass('tick');
                    $('.availability_status').addClass('error');
                    return true;
                }
                else {
                    $('.availability_status').html('');
                    $('.availability_status').removeClass('error');
                    $('.availability_status').addClass('tick');
                    return false;
                }
            });
    
        }
    });

    最后,我们在注册表单中添加调用自定义验证控件的jQuery代码,具体实现如下:

    <script type="text/javascript">
    
        // Sets display image size.
        pic = new Image(16, 16);
        pic.src = "loader.gif";
    
        $(function() { // jQuery DOM ready function.
    
            // Get the form object.
            var signUpForm = $("#signup-form");
    
            // Invokes the validation method.
            signUpForm.validation();
    
        });
    </script>
    image图6用户注册界面

    1.1.3 总结

    本文主要介绍了Ajax注册表单的设计,通过发送Ajax请求方式实时地检查用户名的可用性,并且使用了自定义的表单验证插件检查输入信息的正确性。

    注册验证过程的前端和后端设计,前端使用了表单验证插件,CSS Sprites技巧和Ajax;后端通过提供一般处理程序让客户端调用用户名可用性的检查方法IsAvailableUser()。

    参考

    展开全文
  • -- 上传文件拦截,设置最大上传文件大小 10M=10*1024*1024(B)=10485760 bytes 和编码,如果这里设置过小会导致图片可能无法上传--> < bean id = "multipartResolver" class = "org.springframework.web....

    前端部分在这里(亲测可用)

    http://blog.csdn.net/woyidingshijingcheng/article/details/72461561

    相关知识点的网址

    https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
    
    https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
    
    http://m.blog.csdn.net/article/details?id=52330280

    后端部分
    首先是主要的jar,基于maven的

     <dependency>
          <groupId>commons-fileupload</groupId>
          <artifactId>commons-fileupload</artifactId>
          <version>1.3.1</version>
     </dependency>

    在Spring配置中添加配置文件

        <!-- 上传文件拦截,设置最大上传文件大小   10M=10*1024*1024(B)=10485760 bytes 和编码,如果这里设置过小会导致图片可能无法上传-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
            <property name="maxUploadSize" value="10485760" />
            <property name="defaultEncoding" value="UTF-8" />
    </bean>

    最后Controller(接收端的代码)

     @ResponseBody
        @RequestMapping(value = "/addGoods", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
        public Response addGoods( @RequestParam("barterCommodityname") String barterCommodityname,@RequestParam("barterSellingprice") BigDecimal barterSellingprice,@RequestParam("barterContactinformation") String barterContactinformation,     @RequestParam("barterCommodityquantity") Short barterCommodityquantity,                      @RequestParam("barterCommodityaddress") String barterCommodityaddress,                          @RequestParam("barterDescriptioninform") String barterDescriptioninform,
    @RequestParam("barterCategoryid") String barterCategoryid,
    @RequestParam("file") MultipartFile[] multipartFiles) {
    
            BarterGoodsVo barterGoodsVo = new BarterGoodsVo(barterCommodityname, barterSellingprice, barterContactinformation,
                    barterCommodityquantity, barterCommodityaddress, barterDescriptioninform, barterCategoryid);
    
            String fileName = "";
            String realpath = getRealPath();
            //保存图片
            try {
                for (MultipartFile multipartFile : multipartFiles) {
             String ext = StringUtils.substring(multipartFile.getOriginalFilename(), multipartFile.getOriginalFilename().lastIndexOf("."));
                        fileName = UUID.randomUUID().toString() + ext;
                        saveFile(realpath, fileName, multipartFile);
                }
            } catch (Exception e) {
                logger.error(e + "图片保存错误或者MD5保存错误");
                return Response.failure(BarterGoodsStatusEnum.GOODS_SAVE_ERROR.value(), BarterGoodsStatusEnum.GOODS_SAVE_ERROR.reasonPhrase());
            }
    
            barterGoodsService.addBarterGoods(barterGoodsVo, realpath);//保存商品
            return Response.success(HttpStatus.OK.value(), HttpStatus.OK.getReasonPhrase());
        }

    这样就可以完成图片上传了

    展开全文
  • xhr和直接设置src的形式成功了,并且在调试过程中注意到了直接设置src请求是会带着身份一起传,因为之后验证图片验证码的时候,必须要带着身份传(后台是使用session存储的请求)。 最后一种ajax的代码是错误的,...

    使用3中方式尝试获取图片,图片由后端动态生成,后端地址跨域

    先上源码:

    // 获取图片验证码
    function getCaptcha() {
        // 使用xhr实现 ===START===
        /*var xhr = new XMLHttpRequest();
        xhr.open("GET", "http://xxx/captcha/get", true);
        xhr.responseType = "blob";
        // console.log(xhr);
        xhr.withCredentials = true;
        xhr.onload = function() {
            if (this.status == 200) {
                var blob = this.response;
                var img = document.createElement("img");
                img.onload = function(e) {
                    window.URL.revokeObjectURL(img.src); 
                };
                img.src = window.URL.createObjectURL(blob);
                $('#verifyCodeImg').attr('src', img.src);
            }
        }
        xhr.onreadystatechange = function() {
            // console.log('>>', xhr.readyState, ',', xhr.status);
        }
        xhr.send();*/
        // 使用xhr实现 ====END====
    
        // 使用请求静态文件的方式,证明普通请求会带着身份信息(withCredential) ===START===
        $('#verifyCodeImg').attr('src', 'http://xxx/captcha/get?_=' + Math.random());
        // 使用请求静态文件的方式,证明普通请求会带着身份信息(withCredential) ====END====
    
        // 使用ajax方法,失败了,原因没有加上“Access-Control-Allow-Origin”(猜想后台OPTIONS请求被拦截)===START===
        /*$.ajax({
            url: 'http://xxx/captcha/get',
            type: 'GET',
            dataType: 'binary',
            contentType: 'image/jpeg',
            headers: {
                // 'Content-Type': 'image/jpeg',
                // 'X-Requested-With': 'XMLHttpRequest',
                'Access-Control-Allow-Origin': '*'
            },
            processData: false,
            crossDomain: true,
            xhrFields: {
                withCredentials: true,
                responseType: "blob"
            },
            beforeSend: function(xhr) {
                // xhr.setRequestHeader('Content-Type', 'image/jpeg');
                xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
            },
            success: function(result) {
                var blob = result;
                var img = document.createElement("img");
                img.onload = function(e) {
                    window.URL.revokeObjectURL(img.src); 
                };
                img.src = window.URL.createObjectURL(blob);
                $('#verifyCodeImg').attr('src', img.src);
                // if (result.Status != 1) {
                //     myApp.alert(result.Message + '<br/>请检查数据并重试', '失败');
                //     getCaptcha();
                //     window.verifyCodeCD = 0;
                // }
                // // 成功的时候
                // else {
                //     myApp.addNotification({
                //         title: '成功',
                //         message: '已发送短信到手机,请查收'
                //     });
                // }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest, textStatus, errorThrown);
                errorMsg = "获取图片验证码失败!<br/>错误信息:" + textStatus + "错误码:" + XMLHttpRequest.status + '<br/>请点击图片验证码位置重试';
                myApp.alert(errorMsg, '网络错误');
            }
        });*/
        // 使用ajax方法,失败了,原因没有加上“Access-Control-Allow-Origin”(猜想后台OPTIONS请求被拦截)====END====
    }
    

    xhr和直接设置src的形式成功了,并且在调试过程中注意到了直接设置src请求是会带着身份一起传,因为之后验证图片验证码的时候,必须要带着身份传(后台是使用session存储的请求)。

    最后一种ajax的代码是错误的,这里的代码我尝试了很多次,之前会报出parseerror的错误,这块儿没仔细看,现在是上边写出的状态。报错:

    Failed to load http://xxx/captcha/get: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:9292' is therefore not allowed access.
    

    大概翻译是:

    加载url失败:
        预检(preflight)请求的响应未通过访问控制检查:
            被请求资源的头部没有发现'Access-Control-Allow-Origin'。
        所以本地origin不允许访问。
    

    请求的响应截图:

    注意红框响应头部确实没有Access-Control-Allow-Origin

    后端跟我说,他那边已经针对几种请求加了处理了:

    所以现在很奇怪,为什么OPTIONS请求返回的相应头部中不带着允许跨域的标志呢?是被Apache拦截了什么的么……?是我之前对报错理解的不到位么?

    有人了解的话,还请不吝赐教 m(_ _)m

    哦对了,另一个人写的是这样的

    // 先设置了全局的ajax跨域且带cookie
    $.ajaxSetup({
    	crossDomain: true,
    	xhrFields: {
    		withCredentials: true
    	}
    });
    
    // 然后这么做的……
    $.ajax({
    	type: "GET",
    	url: "http://xxx/captcha/get",
    	success:function(data){
    		$("#imgPic").attr("src", "http://xxx/captcha/get");
    	}
    })
    

    我的直接给img标签设置src就是受这个启发,才发现原来直接请求就可以,而且还带着身份信息,不过因为要可以手动刷新,所以我加了随机变量在请求上。emmm总觉的这个小哥的代码会请求两次而且由于浏览器缓存的原因不会刷新图片内容呢……不过也米有验证过,有机会再说吧哈哈

    转载于:https://my.oschina.net/kidou/blog/2253453

    展开全文
  • django-simple-captcha 使用以及添加动态ajax刷新、验证django-simple-captcha是常用的添加验证码的package,但是使用起来会遇到一些问题,比如ajax动态刷新和验证的问题,官网并没有给出详细的说明,这里做个简单的...
  • 最近在工作中需要用到ajax异步上传图片功能, 然而ajax原生不支持, 所以我在网上也查阅了很多资料, 最后成功实现 网上类似的文章肯定很多, 在这之前我也参考了参考了好多资料 ,最终才完成这个功能 ,.这篇文章的方法...
  • 采用ajax技术实现的图形验证码,在前端进行验证。验证码信息为图片。每一行代码均有注释,通俗易懂。 实现步骤: 1、创建web工程 2、在jsp页面,编写一个请求servlet的名称"> 3、编写一个servlet,在servlet中产生...
  • Ajax+Struts2实现验证码验证功能

    千次阅读 2016-06-24 20:34:24
    通过ajax来动态的验证验证码输入是否正确。我们这里采用的是ajax+struts2来做的这个验证。 我们新建一个web工程。然后需要导入struts的相应包。之后我们需要写一个类来生成验证码。这里命名为01_image.jsp,这类的...
  • 图片验证

    2019-08-13 08:59:51
    图片验证 前提: 熟悉django 熟悉html 了解ajax 思路 通过PIL绘制图片(可定义字符,北京大小,辨别障碍…) 前端展示图片 用户提交验证码,通过ajax将信息发送至前台进行对比 点击图片刷新(通过传递不同的数据来展示...
  • 话说: 登录Ajax验证
  • 本篇文章可能跟上一篇有点像 只是换了个页面 然后搞定他的ajax 通过直接访问ajax的接口来实现图片的下载 因为再源代码中已经没有办法显示他的url链接了 这样的访问也称为异步访问 同步的话 是在网页中直接看到...
  • 但是在加入以后,自定义登录页面登录成功以后,并不会走继承于UserDetails的自定义类方法,那么security也就获取不到申请者的账号密码信息,也就没法进行身份权限的验证。所以每次自定义的控制层登录验证成功以后...
  • Ajax图片上传后的回显问题

    千次阅读 2018-12-21 00:20:06
    js 获取图片js 获取图片3. ajax上传图片提交的表单里要加上```enctype=&quot;multipart/form-data&quot;```,method要用```POST```等,还有需要用到```new FormData(form)``` 问题描述 在很多时候...
  • 使用Ajax异步加载图片

    2017-03-02 13:58:08
    这里也可以用来验证用户名是否已经存在,只需要连接数据库即可,前面数据库连接已经发过 jsp页面: 第一张 第二张 第三张 第四张 第五张 第六张 层叠样式表...
  • Ajax注册表单用户名实时验证

    千次阅读 2018-07-26 12:21:05
    上面,我们完成了在Validation类型中增加nameAvailable()方法,它通过发送异步Ajax请求来检查用户名是否可用,在检查的过程中,在输入框右边动态地加载图片来表示检查中,当检查结束加载相应的图片表示用户是否可用...
  • 写在前面 写web 的人,我想最先要解决的就是注册...2.JQuery ajax验证用户名 3.两次密码输入要一致 4.后台密码验证 5.点击图片刷新 代码 前台 test.html &lt;!DOCTYPE html&gt; &lt;html la...
  • 异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用JQuery框架实现的AJAX 验证用户名是否存在jQuery.ajax概述HTTP 请求加载远程数据。 通过jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post ...
  • jquery ajax验证登录名存在

    千次阅读 2012-10-23 09:51:27
    $.ajax({ type:"Get", url:"AjaxUserInfoModify.aspx", dataType:"html", data:"userName="+$("#txtLoginName").val(), beforeSend:function(XMLHttpRequest) { }, success:function(msg) { ...
  • 提示:本文使用的是原生的ajax和js 案例1:用户注册 前端 <form th:method="post" name="fm" th:action="@{../cusRegPath/regi}" onsubmit="return checkForm()"> <div class="content2"> &...
  • 使用struts2 框架 中的文件上传,然后使用ajax上传图片以及form表单的数据
  • 利用jQuery实现的Ajax 验证用户名是否存在 异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用jQuery框架实现的AJAX 验证用户名是否存在 jQuery.ajax概述 HTTP 请求加载远程数据。 通过jQuery ...
  • C是方法随机生成的验证码 pohe是前台获取的验证码 均可获取到值 想在方法里面比较后 返回页面输出 ajax代码![图片说明](https://img-ask.csdn.net/upload/201810/31/1540964536_856243.png) 页面代码![图片...
  • 一、大概思路 ...利用ajax连接前端和后台,进行图片的动态生成和验证 实际效果图:具体实现1.验证码控制类VerifyCodeControllerpackage com.bill.controller;import com.alibaba.fastjson.JSONObject; i
  • Ajax 和 PHP 实现验证码的实时验证

    千次阅读 2015-11-08 06:37:36
    PHP的图像处理功能强大,做一张验证码图片也是非常简单的,但是,在实现实时验证时,确遇到了一个难题: 我用nat123对我的电脑上的网站进行端口映射,实现了在外网访问,本来是采用cookie的方式用js对验证码进行...
  • 问题描述:同事反应问题:向后台请求json文件,完了在前台渲染一个表格,但是始终渲染不出来... $.ajax({  url: ".../**.json",  type: "get",  dataType: "json",  success: f...
  • 近来学习tp5的过程中,项目中有个发帖功能,选择主题图片。如下: ...使用ajax技术,实现选择性删除所选图片功能,并不会有兼容问题。 表单文件form: <form method="post" enctype="multipart/fo...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,892
精华内容 9,556
关键字:

ajax获取验证图片