ajax调用[WebMethod]方法

ajax无刷新调用,有多种方法如(webservice(.asmx),ashx页面,还有的是调用[WebMethod]方法)

现在说的是ajax调用[WebMethod]方法

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="test2.WebForm3" %>



<!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 runat="server">

    <title>前台调用后台方法</title>

    <script src="jquery-1.7.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        function ADD() {

            //WebForm3.aspx/add表示页面里面add方法 这里的num1,num2 必须和方法里面的参数名称一样!

            var result = Invoke("WebForm3.aspx/add", { "num1": 4, "num2": 5 }); 

            alert(result.toString());

        }

        //把字符串转化成json

        function json2str(o) {

            var arr = [];

            var fmt = function (s) {

                if (typeof s == 'object' && s != null) return json2str(s);

                return /^(string|number)$/.test(typeof s) ? "'" + s + "'" : s;

            }

            for (var i in o) arr.push("'" + i + "':" + fmt(o[i]));

            return '{' + arr.join(',') + '}';

        }

        //type:请求的类型,这里必须用post 。WebMethod方法只接受post类型的请求。

        //contentType:发送信息至服务器时内容编码类型。我们这里一定要用 application/json 。

        //url:请求的服务器端处理程序的路径,格式为"文件名(含后缀)/方法名"

        //data:参 数列表。注意,这里的参数一定要是json格式的字符串,记住是字符串格式,如:"{aa:11,bb:22,cc:33 , ...}"。如果你写的不是字符串,那jquery会把它实序列化成字符串,

        //那么在服务器端接受到的就不是json格式了,且不能为空,即使没有参数也要 写成"{}",如上例。很多人不成功,原因就在这里。

        //dataType:服务器返回的数据类型。必须是json,其他的都无效。因为 webservice 是一json格式返回数据的,其形式为:{"d":"......."}。

        //success:请求成功后的回调函数。你可以在这里对返回的数据做任意处理。

        //error:请求失败后的回调函数。你可以在这里对返回的数据做任意处理。

        function Invoke(url, param) {

            var result;

            $.ajax({

                type: "POST",

                url: url,

                async: false,

                data: json2str(param),

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function (msg) {

                    result = msg.d;

                },

                error: function (r, s, e) {

                    alert(s);

                }

            });

            return result;

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <input type="button" onclick="ADD()" value="调用函数">

    </div>

    </form>

</body>

</html>
using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Xml;

using System.Web.Services;



namespace test2

{

    public partial class WebForm3 : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

                

        }

        //必须为static静态方法

        [WebMethod]

        public static int add(int num1,int num2)

        {

            return num1 + num2;

        }

    }

}

运行结果:

ajax调用[WebMethod]方法

具体的原理,我会再说完3种交互的方法再做一个总结!

你可能感兴趣的:(method)