jQuery+Ajax实现无刷新操作

编辑：rootadmin

推荐整理分享jQuery+Ajax实现无刷新操作，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

使用jQuery实现Ajax操作想要实现Ajax页面无刷新效果，但是直接利用Ajax代码实在有些麻烦，所以就想用jQuery实现。jQuery很好的封装了Ajax的核心对象XMLHTTPRequest。所以用起来非常方便。首先，创建服务器端代码，这里用Servlet实现服务器端的数据处理；代码如下：

然后，创建JSP页面，要使用jQuery，必须在页面之中引入jQuery库，也就是一个Javascript文件，另外还需引入自定义的Javascript文件，如下：

而JSP页面只需要一个文本框、一个普通按钮和一个空白DIV层即可，该DIV用于显示服务器端返回的处理结果；按钮的单击事件触发verify()方法。如下：

注意：Ajax方式下不需要使用表单来进行数据提交，因此页面中不用写<form>标签。接下来，创建一个verify.js文件，在该文件中创建verify()方法，用来实现Ajax的无刷新效果，这是该示例中最为重要的一步。想要使用jQuery实现Ajax分为以下四步：

· 获取文本框中的内容； · 将文本框中的内容发送给服务器端的Servlet； · 接收服务器端返回的数据； · 将服务器端返回的数据动态地显示在JSP页面上。 jQuery+Ajax实现无刷新操作

针对于第一步，首先通过jQuery获得对象，并取得对象的值，如下：

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

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

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

2、前台实例代码 aspx文件

分别在前台aspx页面和后台ashx页面中输入如上代码，就实现了一个超级简单的Ajax登录，很简单吧？

jQuery实现简单的点赞效果本文实例讲解了jQuery实现简单的点赞效果的详细代码，具体内容如下效果图：下面提供一个"点赞"的实例代码，用ASP.NETMVC4+jQueryAjax实现。Model：namespaceMvc

jQuery EasyUI之DataGrid使用实例详解 jQueryEasyUI是一个轻量级的Web前端开发框架，提供了很多的现成组件帮助程序员减轻前端代码开发量，之前有个项目中就用到了其中的DataGrid。jQueryEasyUI框

实例详解jQuery结合GridView控件的使用方法 jQuery是一种非常强大的客户端JS编程技术，这里不想过多阐述它的相关背景知识，只想简单演示一下如何与asp.net的控件结合开发。比如，我们要做一个