jQuery+Ajax实现无刷新操作


Posted in Javascript onJanuary 04, 2016

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

protected void doPost(HttpServletRequest req, HttpServletResponse resp)
  throws ServletException, IOException {
 // 设置编码格式
  resp.setContentType("text/html;charset=UTF-8");
 // 创建输出对象
 PrintWriter out = resp.getWriter();
 
 // 得到请求参数
 String name = req.getParameter("uname");
 // 判断
 if (name == null || name.length() == 0)
 {
  out.println("用户名不能为空!");
 }
 else
 {
  // 判断
  if (name.equals("cheng"))
  {
  out.println("用户名["+ name +"]已存在!请使用其他用户名!");
  }
  else
  {
  out.println("用户名[" + name + "]尚未存在!您可以注册!");
  }
 }
}

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

<!-- 引入Javascript文件 -->
 <script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/verify.js"></script>

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

<body>
 <center>
  用户名:<input type="text" id="uname" name="uname" />
 <br />
 <input type="button" name="btnVerify" value="验证" onclick="verify()" />
 <br />
 <div id="result">
 
 </div>
 </center>
 </body>

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

  •     · 获取文本框中的内容;
  •     · 将文本框中的内容发送给服务器端的Servlet;
  •     · 接收服务器端返回的数据;
  •     · 将服务器端返回的数据动态地显示在JSP页面上。

针对于第一步,首先通过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文件 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
 <title></title> 
 
 <script src="js/jquery-1.4.2.js" type="text/javascript"></script> 
 
 <script type="text/javascript"> 
 $(function() { 
  $("#test").live("click", function() { 
  //alert(0); 
  $.ajax({ 
   type: 'POST', 
   url: 'Handler1.ashx', 
   data: { "name": $("#name").val() }, 
   success: function(data) { 
   if (1 == data) 
    alert('login success'); 
   else 
    alert('login fail'); 
   } 
  }); 
  }); 
 }); 
 </script> 
 
</head> 
<body> 
 <form id="form1" runat="server"> 
 <div> 
 <input type="text" name="name" id="name" /> 
 <input type="button" name="test" id="test" value="validate" /> 
 </div> 
 </form> 
</body> 
</html>

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

Javascript 相关文章推荐
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
javascript中的作用域和闭包详解
Jan 13 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
对vue中v-if的常见使用方法详解
Sep 28 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 #Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 #Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 #Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 #Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 #Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 #Javascript
详解AngularJS中的filter过滤器用法
Jan 04 #Javascript
You might like
杏林同学录(六)
2006/10/09 PHP
基于mysql的论坛(7)
2006/10/09 PHP
php cache类代码(php数据缓存类)
2010/04/15 PHP
php array_walk() 数组函数
2011/07/12 PHP
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
js实现碰撞检测
2021/01/29 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
Python星号*与**用法分析
2018/02/02 Python
python主线程捕获子线程的方法
2018/06/17 Python
Python3 修改默认环境的方法
2019/02/16 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
建筑工程专业毕业生自荐信
2013/10/19 职场文书
忠诚教育心得体会
2014/09/03 职场文书
中学生检讨书范文
2014/11/03 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python