Example of User Name Existence Checking Based on ajax in jQuery

  • 2021-07-18 07:09:16
  • OfStack

This article describes the example of jQuery based on ajax way to achieve the user name existence check function. Share it for your reference, as follows:

For websites with membership functions, especially websites where members can leave messages or comments after logging in, 1 generally requires that there should be no two or more identical user names. Therefore, when the user registers, it is necessary to check whether the user name has been registered to prevent the same user name from appearing. Here is a solution for me to implement this function.

1. Principle of the scheme: The asynchronous request of ajax does not refresh the registered page to send the request to the backend, and the backend processes the request data and returns the result of whether the user name already exists.

2. Details of the scheme

(1) html code part, using input tag onblur event call the corresponding js function.


<div class="pull-left">
  <input id="username" name="username" type="text" class="form-control isUsername" onblur = "CheckUserName()">
</div>

(2) In Jquery, ajax technology is adopted


function CheckUserName()
{
  var userName = $("#username").val();
  var Option =
  {
    url: encodeURI('/Handler/AuthAccounts.ashx?action=checkusername&userName='+userName),
    type: "get",
    dataType: 'text',
    cache: false, // Set to  false  Request information will not be loaded from the browser cache. 
    async: true, //( Default : true) All requests are asynchronous. To send a synchronization request, set this option to  false . Synchronizing requests will lock the browser, and other actions of users must wait for the request to complete before they can be performed. 
    timeout: 150000, // Sets the request timeout (in milliseconds). This setting overrides the global settings. 
    error: function ()
    {
    },
    success: function (data, textStatus)
    {
      if (data == null || data == undefined)
      {
        return false;
      }
      jsondata = eval('(' + data + ')');
      if (jsondata.state == "success")
      {
        alert(jsondata.message);
        return false;
      }
    },
    beforeSend: function () // Is format validation passed before checking 
    {
      var text = $("#username-error").text();
      if (text != ""&&text!=undefined&&text!=null)
      {
        return false;
      }
    }
  };
  jQuery.ajax(Option);
  return false;
}

(3) Backend 1 generic application handler


/// <summary>
///  Check whether the user name already exists 
/// </summary>
/// <param name="context"></param>
protected void CheckUserName(string userName)
{
   CommonStruct commonStruct = new CommonStruct();
   if (userName != "" && userName!=string.Empty)
   {
     QingCi.Model.ExecResultData result = QingCi.BLL.AuthAccounts.CheckUserNameExist(userName);
     if (result.State == stateSuccess)
     {
       commonStruct.state = stateSuccess;
       commonStruct.message = result.Message;
      HttpContext.Current.Response.Write(serializer.Serialize(commonStruct));
      HttpContext.Current.Response.End();
     }
   }
}

For more readers interested in jQuery related contents, please check the topics on this site: "Summary of Ajax Usage in jquery", "Summary of jQuery Operating json Data Skills", "Summary of jQuery form Operation Skills", "Summary of jQuery Common Plugins and Usage", "Summary of jQuery Extension Skills", "Summary of jQuery Form (table) Operation Skills" and "Summary of jquery Selector Usage"

I hope this article is helpful to everyone's jQuery programming.


Related articles: