ajax无刷新用户登录

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>prototype例子--ajax无刷新用户登录</title>
<style type="text/css">
body{font-size:13px;}
#msg{color:red;text-align:left;font-size:14px;}
.txt{width:120px;border:1px solid #000;}
</style>
<script src="prototype.js" type="text/javascript"></script>
<script type="text/javascript">
/*
  标题:简单的prototype.js例子
  功能:ajax无刷新用户登录
  来自:www.111cn.net
  作者:wangsdong
  转载请保留此信息,谢谢
*/
function chkfrom(obj)
{
$("msg").innerHTML="";
var opt = {
 method: 'get',
 onSuccess: function(t)
 {
  m=t.responseText;
  switch(m)
  {
     case "1":
     {
         $("msg").innerHTML="用户名和密码不能为空!";
      return false;
      break;
     }
     case "2":
     {
        $("msg").innerHTML="错误的用户名和密码。";
     return false;
     break;
     }
     case "3":$("content").innerHTML="恭喜你,登录成功!";break;
  }        
 },
 on404: function(t)
 {
  $("msg").innerHTML='错误:找不到提交页!';
  return false;
 },
 onFailure: function(t)
 {
  $("msg").innerHTML='错误:' + t.status  + t.statusText;
  return false;
 },
 asynchronous:true
}
var ajax=new Ajax.Request('login.asp?'+getRequestBody(obj), opt);
}

function getRequestBody(oForm)
{
 var aParams = new Array();
 for (var i=0 ; i < oForm.elements.length; i++) {
 var sParam = encodeURIComponent(oForm.elements[i].name);
 sParam += "=";
 sParam += encodeURIComponent(oForm.elements[i].value);
 aParams.push(sParam);
 } 
 return aParams.join("&");
}

</script>
</head>

<body>
<div id="content">
   <form action="#" name="form1" id="form1">
       <table>
      <tr>
         <th colspan="2">登录</th>
      </tr>
      <tr>
         <td width="72">用户名:</td>
      <td width="168"><input type="text" name="username" id="username" class="txt">
         </td>
      </tr>
      <tr>
         <td>密码:</td>
      <td><input type="password" name="password" id="password" class="txt">
         </td>
      </tr>
      <tr>
         <td> </td>
      <td><input type="button" name="submit" id="submit" value="登录" onclick="javascript:chkfrom(this.form)"></td></tr>
       </table>
    </form>
</div>
<div id="msg"></div>
</body>
</html>

时间: 2024-10-31 06:41:19

ajax无刷新用户登录的相关文章

基于Ajax技术实现无刷新用户登录功能

代码如下: // JScript 文件 function usersLogon() { var userName = document.getElementById("txtuserName").value; var password = document.getElementById("txtpassword").value; var checkCode = document.getElementById("txtCheckCode").val

无刷新用户登录验证源码

这套源码能实现AJAX的功能,可是要比AJAX简单多了,只需要两个文件就可以实现 大家有什么意见或建议,或对代码有疑问请提出, default.asp <html> <head> <meta http-equiv="Content-Type" c /> <link rel="STYLESHEET" type="text/css" href="inc/Style.css"> <

ajax无刷新保存用户提交数据

们继续我们的修改用户资料,修改用户资料,首先第一个需要我们做的就是,先显示出所有的用户信息. 最新的网站结构,下面用箭头标注的就是今天新增加了几个文件. ShowStudent.htm增加如下代码. <link href="Style/BaseStyle.css教程" rel="stylesheet" type="text/css" /> <script src="Js/BaseJs.js" type=&qu

jQuery实现form表单基于ajax无刷新提交方法详解_jquery

本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

.net Ajax无刷新技术

ajax|刷新|无刷新 [导读]Ajax技术了,号称无刷新,其实是在web上通过javascript,使用异步的xmlhttp请求,实现无刷新的web界面.本文通过一个实例带大家体验.net Ajax无刷新技术-- 下载一个.net Ajax开发包,该开发包包括ASP2.0和目前ASP1.1版使用的Ajax,详细地址参见http://ajax.schwarz-interactive.de/,接下来,开始. 1. 新建一个项目,在引用中添加引用Ajax.dll,Ajax.dll位于下载的压缩包里面

Ajax无刷新分页的性能优化方法_AJAX相关

Ajax无刷新分页,已经是一个大家比较熟悉的事物了,大概就是web前端页面上有一个js的方法,通过Ajax去请求服务器端的分页数据接口,拿到数据后再在页面上创建html结构,展现给用户,类似于下面这样: <script type="text/javascript"> function getPage(pageIndex){ ajax({ url:" RemoteInterface.cgi", method:"get", data:{p

ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传

先上几张图更直观展示一下要实现的功能,本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2.0实现数据读取.这个功能在实际工作种经常用到,希望能给需要做这方面的人有些帮助. 一.功能页面布局及介绍 1.上传页面布局及input file上传功能 2.上传页面文件正在上传效果 3.上传完成效果,多文件展示区 二.功能代码实现及资源引用 1.js资源文件引用 html页面js引用,需要引用j

pushState实现Ajax无刷新页面切换_AJAX相关

前言 这样的需求很常见:点击页码局部更新页面(非整体刷新),并且产生历史管理.局部刷新很容易实现,ajax可以满足我们的需要,但是这并不会产生历史管理,好在html5给我们提供了几个好用的api方便解决这个问题,见下文. 正文 一.API 1.pushState pushState()有三个参数:一个状态对象.一个标题(现在会被忽略),一个可选的URL地址. state:与要跳转到的URL对应的状态信息. title:空字符串(以后可能有用). url:要跳转到的URL地址,不能跨域. 作用:将

localResizeIMG先压缩后使用ajax无刷新上传(移动端)_javascript技巧

下面通过文字说明和代码分析的方式给大家分享移动端图片上传之localResizeIMG先压缩后ajax无刷新上传,具体实现过程请看下文. 现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片压缩,然后再把压缩后的图片上传到服务器. 一翻google之后,发现了localResizeIMG,它会对图片进行压缩成你指定宽度及质量度并转换成base64图片