上文介绍了如何在asp.net中引入jquery，下面简单介绍jquery的核心语法以及调用后台的基本教程。
核心语法1：$();
<script>
$(function () {
document.getElementById('h1').innerText = "hello jquery,docunment is ready";
});
</script>
作用是网页加载完成后执行，因此下面的脚本可放置在id为h1的元素前面。
核心语法2：事件绑定
<script>
$("#button1").click(function myfunction() {
alert("hello jquery,button1 clicked");
})
</script>
这里面$(#name)等于docunment.getelementbyId(name)，jquery获得元素的写法更简洁，同理byTag等也有各自的写法，根据Id获取元素使用的是最多的。
核心语法3：$.get()
<!--使用Jquery调用后台1-->
<script>
//先绑定事件，在get数据
$("#button2").click(function myfunction() {
$.get("./MyHandler.ashx", function myfunction(result) {
alert(result);
})
})
</script>
<!--使用Jquery调用后台2-->
<script>
$("#button3").click(function myfunction() {
$.get("./MyWebForm.aspx", function myfunction(result) {
alert(result);
})
})
</script>
$.get()在asp.net中通常调用后台aspx程序和ashx处理程序，关于这两种程序的区别我在[这篇文章]里介绍过，我个人推荐使用ashx程序完成后台数据处理。aspx后台代码以及ashx后台代码如下：
aspx：
public partial class MyWebForm : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.Write("yes,it(aspx) work");
Response.End();
}
}
ashx：
public class MyHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write("yes,it(ashx) work");
context.Response.End();
}
public bool IsReusable
{
get
{
return true;
}
}
}
核心语法4：使用Ajax
jquery是Javascrīpt的一种语言框架，ajax是一种技术（前后台交互），jquery可以实现ajax这种技术，使用js原生同样可以实现ajax但写法非常麻烦。下面是使用jquery的写法。我在下一篇文章中介绍ajax和jquery之间的关系。
<!--使用AJAX请求后台-->
<script>
$("#button4").click(function () {
$.ajax({
url: "./TestAjax.aspx/ShowIsWork",
type: "Post",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (data) {
//返回的数据用data.d获取内容
alert(data.d);
},
error: function (err) {
alert(err);
}
});
});
//更多ajax选项前往 http://api.jquery.com/jquery.ajax/
</script>
<!--使用AJAX带参数请求后台-->
<script>
$(function () {
$("#button5").click(function () {
$.ajax({
type: "Post",
url: "./TestAjax.aspx/GetStr",
//方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字
data: "{'str':'我是参数1','str2':'我是参数2'}",
contentType: "application/json;charset=utf-8",
dataType: "json",
success:
function (data) {
//返回的数据用data.d获取内容
alert(data.d);
},
error:
function (err) {
alert(err);
}
});
});
});
</script>
<!--使用AJAX带参数请求后台2-->
<script>
$(function () {
$("#button6").click(function () {
$.ajax({
type:"Post",
url:"./TestAjax.aspx/GetList",
//方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字
data:"{'no':8}",
contentType:"application/json;charset=utf-8",
dataType:"json",
success:
function (data) {
//插入前先清空ul
$("#list").html("");
//递归获取数据
$(data.d).each(function () {
//插入结果到li里面
$("#list").append("<li>" +this+"</li>");
});
alert(data.d);
},
error:
function (err) {
alert(err);
}
});
});
});
</script>
请注意URL的格式，页面后面跟的是方法url: "TestAjax.aspx/GetStr",表示使用TestAjax.aspx里定义的GetStr方法。另外传入参数data中的名称应与后台参数名对应。后台代码树下：
public partial class TestAjax : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string ShowIsWork()
{
string result = "yes, it(AJAX) work";
return result;
}
[WebMethod]
public static string GetStr(string str,string str2)
{
return str+ str2;
}
[WebMethod]
public static List<string> GetList(int no)
{
List<string> list = new List<string>();
for (int i = 0; i < no; i++)
{
list.Add("List"+i.ToString());
}
return list;
}
}
本文源码下载地址：
链接: https://pan.baidu.com/s/1c8m2lS 密码: wtqa