Ajaxを使用してポップアップログインを実装する方法

今回は、ajaxを使用してポップアップウィンドウログインを実現する方法と、ajaxを使用してポップアップウィンドウログインを実現する際の注意事項について説明します。以下は実際のケースです。

以下では、AJAX ポップアップ ログインの実装方法について説明します。

ECSHOPのuser.PHPで

ユーザーログインを処理するリクエストがあります。

/* 处理 ajax 的登录请求 */ 
elseif ($action == 'signin') 
{ 
 include_once('includes/cls_json.php'); 
 $json = new JSON; 
 $username = !empty($_POST['username']) ? json_str_iconv(trim($_POST['username'])) : ''; 
 $password = !empty($_POST['password']) ? trim($_POST['password']) : ''; 
 $captcha = !empty($_POST['captcha']) ? json_str_iconv(trim($_POST['captcha'])) : ''; 
 $result = array('error' => 0, 'content' => ''); 
 $captcha = intval($_CFG['captcha']); 
 if (($captcha & CAPTCHA_LOGIN) && (!($captcha & CAPTCHA_LOGIN_FAIL) || (($captcha & CAPTCHA_LOGIN_FAIL) && $_SESSION['login_fail'] > 2)) && gd_version() > 0) 
 { 
  if (empty($captcha)) 
  { 
   $result['error'] = 1; 
   $result['content'] = $_LANG['invalid_captcha']; 
   die($json->encode($result)); 
  } 
  /* 检查验证码 */ 
  include_once('includes/cls_captcha.php'); 
  $validator = new captcha(); 
  $validator->session_word = 'captcha_login'; 
  if (!$validator->check_word($_POST['captcha'])) 
  { 
   $result['error'] = 1; 
   $result['content'] = $_LANG['invalid_captcha']; 
   die($json->encode($result)); 
  } 
 } 
 if ($user->login($username, $password)) 
 { 
  update_user_info(); //更新用户信息 
  recalculate_price(); // 重新计算购物车中的商品价格 
  $smarty->assign('user_info', get_user_info()); 
  $ucdata = empty($user->ucdata)? "" : $user->ucdata; 
  $result['ucdata'] = $ucdata; 
  $result['content'] = $smarty->fetch('library/member_info.lbi'); 
 } 
 else 
 { 
  $_SESSION['login_fail']++; 
  if ($_SESSION['login_fail'] > 2) 
  { 
   $smarty->assign('enabled_captcha', 1); 
   $result['html'] = $smarty->fetch('library/member_info.lbi'); 
  } 
  $result['error'] = 1; 
  $result['content'] = $_LANG['login_failure']; 
 } 
 die($json->encode($result)); 
}

上記のコードを修正し、検証コード

が必要な部分を削除して

/* 处理 ajax弹窗登录请求 */ 
elseif ($action == 'ajax_login') 
{ 
 include_once('includes/cls_json.php'); 
 $json = new JSON; 
 $username = !empty($_POST['username']) ? json_str_iconv(trim($_POST['username'])) : ''; 
 $password = !empty($_POST['password']) ? trim($_POST['password']) : ''; 
 $result = array('error' => 0, 'content' => ''); 
 $captcha = intval($_CFG['captcha']); 
 if ($user->login($username, $password)) 
 { 
  update_user_info(); //更新用户信息 
  recalculate_price(); // 重新计算购物车中的商品价格 
  $smarty->assign('user_info', get_user_info()); 
  $ucdata = empty($user->ucdata)? "" : $user->ucdata; 
  $result['ucdata'] = $ucdata; 
  $result['content'] = $smarty->fetch('library/member_info.lbi'); 
 } 
 else 
 { 
  $result['error'] = 1; 
  $result['content'] = $_LANG['login_failure']; 
 } 
 die($json->encode($result)); 
}

に変更します

// 不需要登录的操作或自己验证是否登录（如ajax处理）的act 
$not_login_arr = 
array('login','act_login','register','act_register','act_edit_password','get_password','send_pwd_email','password', 'signin', 'add_tag', 'collect', 'return_to_cart', 'logout', 'email_list', 'validate_email', 'send_hash_mail', 'order_query', 'is_registered', 'check_email','clear_history','qpassword_name', 'get_passwd_question', 'check_answer');

を

// 不需要登录的操作或自己验证是否登录（如ajax处理）的act 
$not_login_arr = 
array('ajax_login','login','act_login','register','act_register','act_edit_password','get_password','send_pwd_email','password', 'signin', 'add_tag', 'collect', 'return_to_cart', 'logout', 'email_list', 'validate_email', 'send_hash_mail', 'order_query', 'is_registered', 'check_email','clear_history','qpassword_name', 'get_passwd_question', 'check_answer');

common.jsファイルの下で、openLginp()メソッドの

を変更しますnewp.innerHTML の HTML コードを編集し、ログイン ボックスのラベルに ajaxLoginSubmit() メソッドを追加します。

//生成层内内容 
 newp.innerHTML = '<form id="ajax_loginForm">用户名：<br><input type="text" name="username" id="ajax_username"/>密码：<br><input type="password" name="password" id="ajax_password"/><br><br><button type="button" onclick="ajaxLoginSubmit()">登录</button> <button type="button" onclick="closeLoginForm()">关闭</button></form>';

あと 2 つのメソッドを自分で書くだけです

function ajaxLoginSubmit(){ 
 var username = document.getElementById('ajax_username').value; 
 var password = document.getElementById('ajax_password').value; 
 Ajax.call('user.php?act=ajax_login','username='+username+'&password='+password,ajaxLoginResponse,'POST','JSON'); 
} 
function ajaxLoginResponse(result){ 
 if(result.error == 0){ 
  alert('登录成功'); 
 }else{ 
  alert('登录失败'); 
 } 
 return false; 
}

この記事の事例を読んだ後は、このメソッドを習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

Ajax 3 レベル連携のグラフィックとテキストの詳細な説明 (コード付き)

Ajax の基本とログイン手順の詳細な説明

以上がAjaxを使用してポップアップログインを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。