JQuery简易调用ASP.NET后台方法教程

本文档主要介绍了如何利用jQuery库方便地调用ASP.NET后端的方法，以实现前后端交互。在ASP.NET中，通过添加`[WebMethod]`注解，可以将C#中的方法标记为可被JavaScript客户端调用。这里提供了两种常见的调用方式：无参数和带参数的方法。 1. 无参数方法调用： - 前台使用jQuery的`.ajax()`函数，设置请求类型为`"Post"`，URL为包含`WebMethod`的方法路径（例如"data.aspx/SayHello"），并指定`contentType`为JSON格式。 - 在`success`回调中，可以通过`data.d`来访问返回的数据，`error`回调用于处理可能的错误。 ```csharp // ASP.NET后台代码 [WebMethod] public static string SayHello() { return "Hello Ajax!"; } // 前端jQuery代码 $("#btnOK").click(function() { $.ajax({ type: "Post", url: "data.aspx/SayHello", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { alert(data.d); }, error: function (err) { alert(err); } }); return false; // 阻止默认提交行为 }) ``` 2. 带参数方法调用： - 对于需要传递参数的方法，前端需要将参数转换为JSON对象，并作为`data`选项的一部分发送。例如，`str`和`str2`参数的值会映射到方法的相应形参。 ```csharp // ASP.NET后台代码 [WebMethod] public static string GetStr(string str, string str2) { return str + str2; } // 前端jQuery代码 $("#btnOK").click(function() { $.ajax({ type: "Post", url: "data.aspx/GetStr", data: JSON.stringify({ 'str': '我是', 'str2': 'XXX' }), contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { alert(data.d); }, error: function (err) { alert(err); } }); return false; }) ``` 总结来说，利用jQuery与ASP.NET结合，能够简化前端与服务器之间的数据交互，提高开发效率。通过正确配置`$.ajax()`方法的各个属性，开发者可以根据实际需求调用带有或不带参数的后端方法，并处理返回的结果。