Method of checking user login status after page loading based on ajax in jQuery

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

In this paper, an example of jQuery based on ajax to check the user login status after the page is loaded. Share it for your reference, as follows:

Websites with membership functions, If the member has logged in, Then the corresponding login status should be displayed, and the demand for this display is available on every page of the website (at present, domestic websites seem to do this, and other forms of status display have not been seen yet). In this way, when opening a new page, it is necessary to know whether this member has logged in, and it is necessary to judge the login status.

1. Solution.

In order to realize the function of judging the login status of members on every page, I use ajax to pass parameters to judge the login status results returned by the back end. Of course, the premise of this way is that the login status can be maintained or queried at the back end and no special parameters are sent to the back end by using the page.

2. Code part.

(1) html Part


<div id="state_content"></div>

(2) jquery Part


jQuery(document).ready(function ()
{
  getUserData();
});
function getUserData()
{
  var Option =
   {
    url: encodeURI('/Handler/AuthAccounts.ashx?action=getloginstate'),
    type: "post",
    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")
     {
      var weburl = '<a class="username"> You are welcome ,' + jsondata.message.split('|')[1] + '</a><a class="go_out" onclick="ExitLoginState()"> Quit </a>';
      $("#state_content").html(weburl); // Content 
     }
     else
     {
      var textList = '<a href="/Login/index.shtml" rel="external nofollow" rel="external nofollow" > "Login" </a><a href="/Register/index.shtml" rel="external nofollow" rel="external nofollow" > "Registration" </a>';
      $("#state_content").html(textList); // Content 
     }
    },
    beforeSend: function ()
    {
    }
   };
  jQuery.ajax(Option);
  return false;
}
function ExitLoginState()
{
  var Option =
   {
    url: encodeURI('/Handler/AuthAccounts.ashx?action=exitloginstate'),
    type: "post",
    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(" Has quit ");
      var textList = '<a href="/Login/index.shtml" rel="external nofollow" rel="external nofollow" > "Login" </a><a href="/Register/index.shtml" rel="external nofollow" rel="external nofollow" > "Registration" </a>';
      $("#state_content").html(textList); // Content 
     }
    },
    beforeSend: function ()
    {
    }
   };
  jQuery.ajax(Option);
  return false;
}

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 Operating Skills", "Summary of jQuery Common Plug-ins and Usage", "Summary of jQuery Extension Skills", "Summary of jQuery Form (table) Operating Skills" and "Summary of jquery Selector Usage"

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


Related articles: