首頁 > 開發者 > PHP

ajax php使用者登入執行個體 jQuey_Login

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title>ajax php使用者登入執行個體 jquey_login by http://www.111cn.net</title>
 <meta http-equiv="content-type" content="text/html; charset=gbk" />
 <script type="text/網頁特效" src="js/jquery-1.3.1.min.js"></script>
 <script type="text/javascript">
 /*<![cdata[*/
 
 $(document).ready(function () {

  var value = $('#button input').val();
  var name = $('#button input').attr('name');
  
  $('#button input').remove();
  $('#button').html('<a href="#" class="css教程submitbutton" rel=' + name + '>' + value + '</a>'); 
  
  $('#button a').live('click', function () {   
 
   
   var link = $(this);
   
   $.ajax({
    url : 'load.php',
    data: '',
    type: 'get',
    cache: 'false',
    beforesend: function () {
     link.addclass('loading');     
    },
    success: function () {
     link.removeclass('loading');  
     alert('submitted');
    }   
   });
   
  });
  
 });
 
 /*]]>*/
 </script>
 
 <style type="text/css"> 
  body {
   font-family: arial;
   font-size:12px;
   margin:10px; 
   text-align:center;
  }
  
  form {
   margin:0 auto;
   text-align:left;
   width:270px;
   border:1px solid #ccc;
   padding:15px;
   background:#fff;
   border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   box-shadow: 0 0 4px #ccc;
   -webkit-box-shadow: 0 0 4px #ccc;
   -moz-box-shadow: 0 0 4px #ccc;
  }
  
  fieldset {
   overflow:hidden;
   border:0;
   height:30px; 
   margin:3px 0;
  }
  
  fieldset label {
   display:block;
   width:50px;
   float:left;
   font-weight:700;
   color:#666; 
   line-height:2.2em;
  }
  
  fieldset input {
   float:left;
   border:1px solid #ccc; 
   height: 20px;
   padding:3px;
   width:190px;
   font-size:12px;
  }
  
  #button {
   margin-top:10px;
   padding-right:20px;
   text-align:right; 
  }

  #button input {
   margin:0 auto;
  }  

  a.csssubmitbutton {   
   font-size: 12px;
   background: #fff no-repeat 4px 5px;
   display: inline-block;
   padding: 5px 20px 6px;
   color: #333;
   border:1px solid #ccc;
   text-decoration: none;
   font-weight: bold;
   line-height: 1.2em;
   border-radius: 15px;
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   -moz-box-shadow: 0 1px 3px #999;
   -webkit-box-shadow: 0 1px 3px #999;
   position: relative;
   cursor: pointer;
   outline:none;
  }
  
  a.csssubmitbutton:visited {}
  
  a.csssubmitbutton:hover {
   border:1px solid #333;
  }
  
  .loading {
   background-image:url('load.gif') !important;
   color:#ccc !important; 
   -moz-box-shadow: 0 0 0 #fff !important;
   -webkit-box-shadow: 0 0 0 #fff !important;
  }

  .effect {
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px; 
  }

 </style>
</head>
<body>

<form method="post" action="" name="subscribeform">
 <fieldset>
  <label>name: </label><input type="text" class="effect" name="name">
 </fieldset>

 <fieldset>
  <label>email: </label><input type="text" class="effect" name="email">
 </fieldset>

 <div id="button">
  <input type="submit" value="subscribe" name="subscribeform"/>
 </div>
</form>


</body>
</html>

執行個體下載
http://down.111cn.net/down/code/jquery/2010/0830/20529.html

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More