黑马程序员技术交流社区

标题: Asp.NET中如何通过Ajax跳转到后台 [打印本页]

作者: ☜⑦圊⑥慾➹沼 时间: 2013-9-21 14:46
标题: Asp.NET中如何通过Ajax跳转到后台
本帖最后由 ☜⑦圊⑥慾➹沼于 2013-9-23 10:31 编辑

我现在做一个注册页面，然后我前台用js，或jQuery验证后我要跳转到后台，要把我填写的信息传到后台进行处理，用Ajax如何处理，还望各位哥哥，姐姐前辈们指点一下。

作者: 0和1，编程世界 时间: 2013-9-21 22:51

1、有参数的方法调用
示例代码如下：
前台jQuery代码：
$(function() { 
这个当然不用说大家都知道的一种就是ajax调后台的方法。
1、有参数的方法调用
示例代码如下：

前台jQuery代码：

$(function() {
  var browers = browersEstimate();
  var params = '{browersType:"' + browers + '"}';
  $.ajax({
   type: "POST",                //提交方式
   url: "Default.aspx/RecordData", //提交的页面/方法名
   data: params,                //参数（如果没有参数：null）
   dataType: "json",                //类型
   contentType: "application/json; charset=utf-8",
   success: function(data) {
            //返回的数据用data.d获取内容
            alert(data.d);
      },
      error: function(err) {
            alert(err);
      });
   });

这个是jquery下Ajax方法调用后台方法。

这个方法有几点需要说明：

type方式必须是post，再有就是后台的方法必须是静态的，方法声明要加上特性[System.Web.Services.WebMethod()]，传递的参数个数也应该和方法的参数相同。

asp.net后台方法：

[System.Web.Services.WebMethod()]
public static void RecordData(string browersType)
{
      if (BrowserControl.Counters == null)
      {
         BrowserControl.InitData(0);
      }

      if (browersType == "")
      {
         browersType = "Other";
      }

      BrowserControl.AddOneByBrowserType(browersType);
      if (BrowserControl.WriteInDataBase())
      {
         BrowserControl.OldTotalCount = BrowserControl.Counters.Count;
      }
      else
      {
         BrowserControl.OldTotalCount = 0;
      }
}

2、无参数的方法调用

示例代码：

前台jQuery代码

$(function() {
$("#btnOK").click(function() {
      $.ajax({
         //要用post方式
         type: "Post",
         //方法所在页面和方法名
         url: "data.aspx/SayHello",
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         success: function(data) {
            //返回的数据用data.d获取内容
            alert(data.d);
         },
         error: function(err) {
            alert(err);
         }
      });
      //禁用按钮的提交
      return false;
});
});

asp.net后台方法

[System.Web.Services.WebMethod()]
public static string SayHello()
{
return "Hello Ajax!";
}

3、返回数组方法的调用

示例代码：

asp.net 后台代码：

[System.Web.Services.WebMethod()]
public static List GetArray()
{
  List li = new List();
for (int i = 0; i < 10; i++)
      li.Add(i + "");
return li;
}

前台JQuery代码：

/**/
$(function() {
$("#btnOK").click(function() {
      $.ajax({
         type: "Post",
         url: "data.aspx/GetArray",
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         success: function(data) {
            //插入前先清空ul
            $("#list").html("");
            //递归获取数据
            $(data.d).each(function() {
                  //插入结果到li里面
                  $("#list").append("" + this + "");
            });
            alert(data.d);
         },
         error: function(err) {
            alert(err);
         }
      });
      //禁用按钮的提交
      return false;
});
});

4、返回Hashtable方法的调用

using System.Collections;
[System.Web.Services.WebMethod()]
public static Hashtable GetHash(string key,string value)
{
Hashtable hs = new Hashtable();
hs.Add("www", "yahooooooo");
hs.Add(key, value);
return hs;
}

前台JQuery代码：

$(function() {
$("#btnOK").click(function() {
      $.ajax({
         type: "Post",
         url: "data.aspx/GetHash",
         //记得加双引号
         data: "{ 'key': 'haha', 'value': '哈哈！' }",
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         success: function(data) {
            alert("key: haha ==> "+data.d["haha"]+" key: www ==> "+data.d["www"]);
         },
         error: function(err) {
            alert(err + "err");
         }
      });
      //禁用按钮的提交
      return false;
});
});

5、操作xml

xnl文件示例：
<?xml version="1.0" encoding="utf-8" ?>
<data>
  <item>
<id>1</id>
<name>qwe</name>
  </item>
  <item>
<id>2</id>
<name>asd</name>
  </item>
</data>

Jquery代码：

$(function() {
$("#btnOK").click(function() {
      $.ajax({
         url: "XMLtest.xml",
         dataType: 'xml', //返回的类型为XML ，和前面的Json，不一样了
         success: function(xml) {
            //清空list
            $("#list").html("");
            //查找xml元素
            $(xml).find("data>item").each(function() {

                  $("#list").append("id:" + $(this).find("id").text() +"");

                  $("#list").append("Name:"+ $(this).find("name").text() + "");
            })
         },
         error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数
            alert(status);
         }
      });
      //禁用按钮的提交
      return false;
});
});

6、调后台的另外一种方法：

js代码示例：

function test() {
      var browers = browersEstimate();
   __doPostBack("CE_RecordData", browers);
}

后台页面代码示例：

protected override void OnLoad(EventArgs e)
{
      base.OnLoad(e);
      if (this.IsPostBack)
      {
         if ((Request.Form["__EVENTTARGET"] != null) && (Request.Form["__EVENTTARGET"] != ""))
         {
            if (Request.Form["__EVENTTARGET"].Substring(0, 3) == "CE_")
            {
                  String strEventArgument = Request.Form["__EVENTARGUMENT"];
                  Type type = this.GetType();
                  MethodInfo mi = type.GetMethod(Request.Form["__EVENTTARGET"], BindingFlags.Instance | BindingFlags.NonPublic);
                  if (mi != null)
                  {
                     mi.Invoke(this, new object[] { strEventArgument });
                  }
            }
         }
      }
}

protected void CE_RecordData(string browersType)
{ -----你需要做的操作----- }

如上代码解释：主要是js代码里面的方法名要与后台一致，方法参数个数也要一致，最重要的是页面的OnLoad事件的重写。在这里面调用的父类的OnLoad事件，重要是利用反射获取要调用的方法，和传递过来的参数。

type.GetMethod(Request.Form["__EVENTTARGET"], BindingFlags.Instance | BindingFlags.NonPublic);这一句里面的参数设置不能变更。必须是实例Instance和不公开的方法。可以看到对应的 CE_RecordData方法是受保护的。

作者: SunshineGirl 时间: 2013-9-22 11:20
亲，有人给你回答了，设置成"已解决"，这样才能加分。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2