Use ajax to verify that the account is valid

1. Add jar package

To use json in springMVC, the following jar packages must be introduced, of course some other packages are essential.

<!-- Import JSON -->
    <dependency>
      <groupId>org.codehaus.jackson</groupId>
      <artifactId>jackson-mapper-asl</artifactId>
      <version>1.9.13</version>
    </dependency>
    <!--Ali fastjson package-->
      <dependency>
          <groupId>com.alibaba</groupId>
          <artifactId>fastjson</artifactId>
          <version>1.2.18</version>
      </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>2.1.0</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.1.0</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-annotations</artifactId>
      <version>2.1.0</version>
    </dependency>
    <dependency>
      <groupId>org.apache.commons</groupId>
      <artifactId>commons-lang3</artifactId>
      <version>3.4</version>
    </dependency>

Front-end page request: tags inside the form

<li><label>账户：</label><input type="text" name="userId" id="userId"
                                                      class="form-control" value=""></li>

$("#userId").change(function () {
// alert("Event triggered!");
        var userId=$("#userId").val();

            $.ajax({
// The url requested to the background
                url:'/GXDC/user/selectID.do',
// data sent to the background
				data:{userId:userId},
// Whether the request is asynchronous
				async:false,
// return data type
				dataType:"JSON",
// request method
				type:"POST",
// Process after the request is successfully responded
				success:function (data) {
                    console.log(data);
					if(data==true){

					    alert("The account already exists!");
					    flag=false;
					console.log("Account exists");
					}else if (data==false){
						if($("#userId").val().length>=5){
                            alert("The account is available!");
                            flag=true;
						}
					    console.log("Account does not exist");
					}else {
					    flag=false;
					    console.log("Account ajax verification error!!");
					}
                },
				error:function () {
					console.log("ajax request failed!")
                }
        });
    });

Receive requests in the background:

You need to add the @ResponseBody annotation before the corresponding method that accepts the request.

This annotation is used to convert the object returned by the Controller method into the specified format through the appropriate HttpMessageConverter and write it into the body data area of the Response object.

It is used when the returned data is not a page of HTML tags, but data in some other format (such as json, xml, etc.);

@ResponseBody
	@RequestMapping(value = "/selectID",method = RequestMethod.POST,produces ="test/plain;charset=UTF-8" )
	public boolean selectUserId(String userId){
		System.out.println("Start execution ========================================= ================================>>>>>>");
// Query whether there is a corresponding userId or account in the database
                String a=daoService.selectUserId(userId);
		System.out.println("return string=====================>>>>>>"+a);
		if (a!=null){
//If yes, return true, the account cannot be used
			return true;
		}else{
// does not return false, you can use the account
			return false;
		}

	}

The sql statement in the mapper.xml file:

<!--Check the corresponding user name-->
    <select id="selectUserId" parameterType="String" resultType="String">
        SELECT U_ID FROM ADMIN_USER WHERE   1=1
        <if test="_parameter !='' and _parameter !=null">
            AND BINARY U_ID=#{userId}
        </if>
    </select>

Use ajax to verify that the account is valid

Guess you like