jQuery+Ajax实现无刷新操作

2020-05-29 07:20:51易采站长站整理
首先通过jQuery获得对象,并取得对象的值,如下:


// 取得文本框对象,通过$()获取的所有对象都是jQuery对象
var jQueryObject = $("#uname");
// 获取文本框中的值
var userName = jQueryObject.val();

    通过jQuery中的$()函数获得页面的节点,该函数得到的是一个jQuery对象,然后通过jQuery中的val()方法取得节点的值,也就是文本框中的内容。
针对于第二步,我们使用jQuery的get()方法来发送数据到服务器端,如下:
    $.get(“TestServlet?uname=” + userName,null,callback);
    该方法返回一个XMLHttpRequest对象,该方法提供三个参数,第一个是请求的服务器端的URL,第二个参数是待发送的参数,一般可以在第一个URL中直接带上参数,所以一般该参数为null,第三个参数是服务器端成功处理完成数据之后的一个回调函数。
针对于第三步,就应该创建一个回调函数,用来处理服务器端返回的数据,如下:  


// 回调函数
function callback(data)
{

}
该回调函数有一个参数,该参数就是客户端返回的数据。
针对于第四步,再次利用jQueyr的选择器函数得到DIV层,将返回的数据显示在该层之上,如下:
function callback(data)
{
/**
* 第三步,接收服务器端返回的数据
*/
// 将服务器端返回的数据动态的显示在页面上
var resultObject = $("#result");
resultObject.html(data);
}

利用jQuery的html()方法将数据动态地显示到DIV层之中。
现在我们对以上的代码进行优化,我们用两句代码就可以实现以上所有代码的功能,这就是jQuery的强大之处之一。在verify.js文件之中的verify()方法也可以写成下面的形式:


$.get("TestServlet?uname=" +$("#uname").val(),null,function(data){
$("#result").html(data);
})

再为大家分享一个,下面是“无刷新登录”的例子,采用Ashx+jQuery Ajax实现。
1、后台实例代码 ashx文件(可替换为从数据库中读取) 


public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");

string name = context.Request.Params["name"].ToString().Trim();
if ("china".Equals(name))
{
context.Response.Write("1");//1标志login success
}
else
{
context.Response.Write("0");//0标志login fail
}
}

2、前台实例代码 aspx文件