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 相关文章推荐
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
微信小程序实现侧边分类栏
Oct 21 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 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
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
php 冒泡排序 交换排序法
2011/05/10 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
php自定义apk安装包实例
2014/10/20 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
Smarty模板配置实例简析
2019/07/20 PHP
JavaScript 函数式编程的原理
2009/10/16 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
浅析js实现网页截图的两种方式
2019/11/01 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
Python调用命令行进度条的方法
2015/05/05 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
python实现对输入的密文加密
2019/03/20 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
怎样自定义一个异常类
2016/09/27 面试题
小学先进集体事迹材料
2014/05/31 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
会议简报格式范文
2015/07/20 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书
python实现监听键盘
2021/04/26 Python
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫