现在位置首页 / 项目实战 /正文

Jquery+ashx 实现ajax访问服务端json数据代码示例

作者: IT小兵 | 2013年9月17日| 热度:℃ | 评论: |参与:

在上一篇文章[基于Jquery、Bootstrap的后台管理免费UI框架推荐--Charisma UI],介绍了使用jquery实现后台管理。

今天首先实现的登录功能。

上效果图:

jquery json实例

登录失败提示:

jquery json实例

实现流程比较简单:

1)、使用Charisma UI自带的登录页面,去掉了form标签,不去掉的话,一直刷新界面,还不知道怎么回事。

 我为提交按钮起了一个名字: <button   class="btn btn-primary" id="btnlogin"  >登录</button>

	<div class="row-fluid">
				<div class="well span5 center login-box">
					<div class="alert alert-info">
						请输入您的用户名和密码,点击登录.
					</div>
					 
						<fieldset>
							<div class="input-prepend" title="Username" data-rel="tooltip">
								<span class="add-on"><i class="icon-user"></i></span><input autofocus class="input-large span10" name="username" id="username" type="text"  />
							</div>
							<div class="clearfix"></div>
							<div class="input-prepend" title="Password" data-rel="tooltip">
								<span class="add-on"><i class="icon-lock"></i></span><input class="input-large span10" name="password" id="password" type="password"  />
							</div>
							<div class="clearfix"></div>
							<%--<div class="input-prepend">
							<label class="remember" for="remember"><input type="checkbox" id="remember" />Remember me</label>
							</div>--%>
							<div class="clearfix"></div>
							<p class="center span5">
							<button   class="btn btn-primary" id="btnlogin"  >登录</button>
							</p>
						</fieldset>
					 
				</div><!--/span-->
			</div><!--/row-->


2)、绑定提交事件:

    

  $(document).ready(function () {
     $("#btnlogin").bind("click", CheckGoIndex);
  });

3)、开始写服务端验证代码:

 使用ashx页面的方式,提交response返回值是json。为啥使用ashx?这里还是和aspx有区别的。

ashx是用于写web handler的,一般用来处理生成动态图片、 生成动态文本等不需要回传处理的任务。比aspx要减少一些数据的传输。

创建ashx文件,保存为:a.ashx.

<%@ WebHandler Language="C#" Class="AAA" %>
using System;
using System.Web; 
using Kaitone.PathAnalysis.Common;
using Kaitone.PathAnalysis.Contract;
public class AAA : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string name = CheckResponse.GetResponse("nm");
        string pwd = CheckResponse.GetResponse("pwd");
        bool isok = false;// aaa.CheckUser(name, pwd);
        try
        {
            IAAAService aaa = KtContainer.Instance.Resolve<IAAAService>();
            isok = false;// aaa.CheckUser(name, pwd);
        }
        catch (Exception ex)
        {
        }
       string returnvalue= CheckResponse.GetObjectJson(isok);
       context.htm = htm&(returnvalue);
       context.Response.End(); 
    }
    
 
    public bool IsReusable {
        get {
            return false;
        }
    }
}

4)、在js中使用$.ajax()方法调用a.ashx

  function CheckGoIndex() {
      var name=$("#username").val();
      var password = $("#password").val();
       var AjaxUrl = "Service/AAA.ashx?nm=" + name + "&pwd=" + password;
      $.ajax({
          type: "get",
          url: AjaxUrl,
          success: function (data, textStatus) { 
              if (data != null) {
                 
                  if (data == "true") {
                      window.location.href = 'index.aspx';
                  }
                  else {
                      alert("登录失败,请检查用户或密码是否正确。");
                      //var n = noty({
                      //    text: "登录用户名密码错误,请修改后提交",
                      //    type: 'error',
                      //    dismissQueue: true,
                      //    modal: true,
                      //    layout: 'center',
                      //    theme: 'defaultTheme'
                      //});
                  }
              }
          },
          complete: function (XMLHttpRequest, textStatus) {
               
          },
          error: function (e) {
              
          }
      }); 
  }

根据返回值,进行逻辑判断或者错误提示。


如此一个jquery+asp.net 的ashx,ajax调用demo就完成了。


转发注明:IT分享  http://www.suchso.com

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询