使用Jquery的Ajax调用后台方法

使用Jquery的Ajax调用后台方法具体有三种方式:
1.在后台定义一般处理程序ashx,响应前端的请求。
2.在页面的aspx.cs中定义静态方法+WebMethod,响应前端的请求。
3.通过WCF进行处理。
第三种调用方式不在本笔记的讨论范围中。以下针对第一、二种方式进行深入讨论。

 

1.使用一般处理程序响应前端请求

A. 在Web项目中新建一般处理程序(后端):

 

B. 在ProcessRequest添加响应前端请求的代码(后端)。例如下面范例:

public override void ProcessRequest(HttpContext context)
{
  context.Response.ContentType = "text/plain";
  var action = GetQueryString("action");
  var strResult = "";
  switch (action)
  {
    case "action1":    //前端请求的操作1
      function1()
      break;
    case "action2":    //前端请求的操作2
      function2()
      break;
    case "action3":    //前端请求的操作3
      function3()
      break;

      ...
  }
  context.Response.Write(strResult);
  context.Response.Flush();
}

private void function1(){...}    //处理前端请求的函数1

private void function2(){...}    //处理前端请求的函数2

private void function3(){...}    //处理前端请求的函数3

 

C. 在一般处理程序使用session(后端)

在一般处理程序中使用session必须要继承IRequiresSessionState接口并引用System.Web.SessionState命名空间。

 

D. JavaScript请求后端代码(前端)

 在JavaScript中加入下面范例便可以发送请求到一般处理程序:

var url = "HandleType.ashx?action=Edit";          //请求链接格式:一般处理程序文件?action="请求的操作"
url += "&参数名1=" + $("#hdfId").val();          //参数格式&参数名=值
url += "&参数名2=" + $("#hdfParentId").val();       //参数格式&参数名=值
url += "&参数名3=" + encodeURI(encodeURI($("#txtName").val()));    //参数格式&参数名=值

$.ajax({
  type: "post",          //以POST的方式发送请求
  url: url,            //上面拼凑的链接及参数
  contentType: "application/json",
  dataType: "json",
  success: function (data)

  {
    //成功获取一般处理程序响应后执行的代码
  },
  error: function (err)

  {
    //收到一般处理程序响应失败后执行的代码
  }
});

 

2. 在页面的aspx.cs中定义静态方法+WebMethod,响应前端的请求

A. 在aspx文件中添加以WebMethod为前缀标识的静态方法 (后端)

参数名与参数个数一定要与前端

 

B. JavaScript请求后端代码(前端)

在JavaScript中加入下面范例便可以发送请求到一般处理程序:

$.ajax({
  type: "post",
  url: "TestMatrix1.aspx/SayHello",    //请求链接格式:页面文件/请求的操作(页面的带有WebMethod前缀的静态函数)
  data: JSON.stringify           //传递的参数使用JSON.stringify转译为JSON格式

  ({
    "in_Id": $("#hdfId").val(),      //传递给后台的参数格式:"参数名":值。参数名与参数个数一定要与后台函数的参数名及参数个数完全一致
  }),
  contentType: "application/json",
  dataType: "json",
  success: function (data)

  {

    //
  },
  error: function (err)

   {

  }
});

参数以JSON的形式传递到后台函数,系统会根据调用的函数参数类型做一次强制类型转换。但建议后台的函数参数类型为string,在函数中写代码进行转换。这样可以先判断传入的参数内容再进行对应参数类型的转换。减少错误类型转换的问题。

 

posted @ 2017-07-24 16:11  Matrix博客园  阅读(17517)  评论(0编辑  收藏  举报