ASP.NET中JQuery+AJAX调用后台

做订餐系统手机端时，遇到一个问题，实现登录功能时，我要调用后台的方法进行验证和判断。我们应用的是webForm进行开发的，正常情况下只要绑定按钮的方法，前后台对应就可以实现。但是，手机端应用MUI样式之后，就不适用于这种情况了。基于这个问题，我们使用JQuery+Ajax技术，其实MUI中也自带ajax技术。

实现过程：

webForm代码：

function login() {
      var name = document.getElementById("username").value; //获取用户名
      var password = document.getElementById("userpassword").value; //获取密码
      var params = '{name:"' + name + '",password:"' + password + '"}'; //将用户名和密码作为参数传过去
      $.ajax({
        url: "LoginMobile.aspx/test", //调用后台方法
        data: params,
        type: "post",
        dataType: 'text',
        contentType: "application/json; charset=utf-8", //设置类型，注意一定不能丢
        success: function (data) {
          if (data == '{"d":true}') { //注意判断条件
            window.location = "../Order/OrderMobile.aspx";
          } else {
            mui.toast("用户名或密码错误！");
          }
        }
      }); 

    }

后台代码：

[WebMethod]
    public static bool test(string name,string password) {
      //实例化登录业务逻辑类
      CardBll cardBll = new CardBll();
      userBll user = new userBll();
      Page page = (Page)System.Web.HttpContext.Current.Handler;
      bool Flag = false; 

      //一般用户
      if (name.Length > 5)
      {
        Flag = cardBll.isExist(name, password);
        if (Flag == true)
        {
          System.Web.HttpContext.Current.Session["Admin"] = name;
          //Session["Admin"] = name;
          //Session["Username"] = cardBll.username(TxtName .Text .Trim (),TxtPassword.Text .Trim ());
          System.Web.HttpContext.Current.Session["Username"] = cardBll.username(name);
          System.Web.HttpContext.Current.Session["cardLevel"] = cardBll.cardLevel(name);
          if (System.Web.HttpContext.Current.Session["cardLevel"].ToString() == "普通用户")
          {
           Flag = true;
          }
        }        

      }
      return Flag;
    }

特别注意：

1、在webForm页面试用Ajax技术调用后台方法时，一定要加上contentType: "application/json; charset=utf-8"。否则，就无法调用后台方法。type类型为“Post”。

2、后台方法中

第一，后台的方法必须是静态的；

第二，方法声明要加上特性[System.Web.Services.WebMethod()]；

第三，传递的参数个数也应该和方法的参数相同。

当然，也可以使用mui中自由的ajax技术，其使用方法跟平常的ajax没有多大的区别，只是书写的形式有点不一样，使用MUI实现的界面形式如下：

mui.ajax('LoginMobile.aspx/test', {
        data: params,
        dataType: 'text',
        type: 'post',
        contentType: "application/json; charset=utf-8",
        success: function (data) {
           if (data == '{"d":true}') {
            window.location = "../Order/OrderMobile.aspx";
          } else {
            mui.toast("用户名或密码错误！");
          }
        }
      })

ajax技术对于前后台之间的交互也是一种不错的方式，灵活运用会给我们带来巨大的帮助。当然也要根据不同的环境进行不同的设置与使用。

赞 (0)

相关推荐

  • jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码

    ws.aspx 代码 复制代码 代码如下: <!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 id="Head1&q

  • asp.net中js和jquery调用ashx的不同方法分享

    =============js================ 复制代码 代码如下: var xhr = new XMLHttpRequest();            xhr.open("get", 'Controls/gengCart.ashx?CartID=' + input + '&count=' + inp, true);            xhr.setRequestHeader("If-Modified-Since", "0&q

  • jquery.Ajax()方法调用Asp.Net后台的方法解析

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法.先来个简单的实例热热身吧. 1.无参数的方法调用asp.net code: 复制代码 代码如下: using System.Web.Script.Services; [WebMethod]   public static string SayHello()   {        return "Hello Ajax!";   }  using System.Web.Script.Services; [WebMe

  • jquery调用asp.net 页面后台的实现代码

    先创建一个aspx页面编写一个客户端控件<input type="button" id="AjaxDemo" value="AjaxDemo"> 再aspx后台的页面编写一个简单的方法,代码如下: 复制代码 代码如下: [WebMethod] public static string ABC(string ABC) { return ABC; } 必须声明为静态方法,并且它们必须使用 [WebMethod] 特性标注.但是在webse

  • jQuery调用WebMethod(PageMethod) NET2.0的方法

    本文实例讲述了jQuery调用WebMethod(PageMethod) NET2.0的方法.分享给大家供大家参考,具体如下: 首先必须在WebConfig下的system.web节点加入此配置信息 <httpModules> <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=

  • jquery异步调用页面后台方法&#8207;(asp.net)

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryCSMethodForm.aspx.cs" Inherits="JQuerWeb.JqueryCSMethodForm" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&

  • jQuery AJax调用asp.net webservers的实现代码

    aspx页面代码 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> <script src="JQUERY.JS" type="text/javascript"></script> <style type=&quo

  • Jquery + Ajax调用webService实例代码(asp.net)

    webService中要实现ajax调用,则要加这句代码: // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释. [System.Web.Script.Services.ScriptService] 代码下载 /201008/yuanma/WebService2.rar 复制代码 代码如下: //无参数调用 $(document).ready(function() { $('#btn1').click(function() { $.ajax({ typ

  • ASP.NET中JQuery+AJAX调用后台

    做订餐系统手机端时,遇到一个问题,实现登录功能时,我要调用后台的方法进行验证和判断.我们应用的是webForm进行开发的,正常情况下只要绑定按钮的方法,前后台对应就可以实现.但是,手机端应用MUI样式之后,就不适用于这种情况了.基于这个问题,我们使用JQuery+Ajax技术,其实MUI中也自带ajax技术. 实现过程: webForm代码: function login() { var name = document.getElementById("username").value;

  • jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)

    在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. (1)通过aspx.cs的静态方法+WebMethod进行处理 简单的介绍下WebMethod方法的用法 1.修饰符主要用public static修饰 2.方法前面加上[WebMethod]属性表明这是WebMethod方法 3.前台html页面(Client端)访问时要使用post方法,和后台.cs文件进行数据交互,否则会返回整个html页面. 4.当后台页面返回数据后

  • 前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例

    前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 CasMenu.aspx页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr

  • jQuery中通过ajax调用webservice传递数组参数的问题实例详解

    下面通过实例给大家说明比较直观些,更方便大家了解. 本人的项目中通过jquery.ajax调用webservice. 客户端代码如下: $.ajax({ url: "test/xxx.asmx", type: 'POST', dataType: 'xml', timeout: , data: { name: "zhangsan", tags: ["aa", "bb", "cc"] }, error: fun

  • 基于JavaScript如何实现ajax调用后台定义的方法

    由于ajax的独特优势,使得它在当前大量网站得到了广泛的应用,下面就介绍一下ajax如何调用后台定义的函数,虽然比较简单,不过希望能够给初学者带来一定的帮助,代码如下: 1.首先我们先创建一个antzone.aspx页面. 2.在它的cs文件中创建如下函数: public static string mytest(string first, string second) { return return first+second; } 2.html代码如下: <form id="myform

  • jQuery ajax调用webservice注意事项

    jquery ajax调用webservice(C#)要注意的几个事项: 1.web.config里需要配置2个地方 <httpHandlers> <remove verb="*" path="*.asmx"/> <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.

  • jQuery.ajax向后台传递数组问题的解决方法

    jQuery.ajax向后台传递数组问题的解决方法

    今天重温了一个问题,jQuery.ajax向后台传递一个数组,而在后台接收不到该值. 前台js方法部分代码如下: //创建一个测试数组 var boxIds = new Array(); boxIds.push(12182); boxIds.push(12183); boxIds.push(12184); //向后台交互 $.ajax({ url: "/xxx", type: "GET", data: { "boxIds": boxIds, &q

  • ASP.NET中实现获取调用方法名

    本文实例讲述了ASP.NET中实现获取调用方法名的技巧.分享给大家供大家参考.具体实现方法如下: 在写记录日志功能时,需要记录日志调用方所在的模块名.命名空间名.类名以及方法名,想到使用的是反射(涉及到反射请注意性能),但具体是哪一块儿还不了解,于是搜索,整理如下: 需要添加相应的命名空间: 复制代码 代码如下: using System; using System.Diagnostics; using System.Reflection; 如果仅是获取当前方法名,可以使用如下代码: 复制代码

  • ASP开发中数据库文件调用的捷径

    引言  本文针对ASP程序设计中最基础.也是最关键的部分"数据库文件的调用"进行说明,同时谈谈ASP程序设计中数据库文件调用的一些技巧. ASP简介 ASP(Active Server Pages)是微软于1996年推出的Web应用程序开发技术,它是一种脚本语言.ActiveX组件及HTML语言等的综合,微软把它描述为"一个服务器的脚本环境,在这里可以生成和运行动态的.交互的.高性能的Web服务器应用程序".其主要功能是为生成动态的.交互式的Web服务器应用程序提供

  • jQuery Ajax请求后台数据并在前台接收

    1.前台使用jQuery ajax请求 $.ajax({ url: "r_getRolePer.action", dataType:'json', data: {userId:"1"}, //请求的附加参数,用json对象 method:'POST', success: function(data){ $.messager.alert('消息',data.add,''); //这里使用的时easyui的格式 }, }); 2.在action里面使用response.

随机推荐