A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 ☜⑦圊⑥慾➹沼 于 2013-9-23 10:31 编辑

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

2 个回复

倒序浏览

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方法是受保护的。
回复 使用道具 举报 1 0
亲,有人给你回答了,设置成"已解决",这样才能加分。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马