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获得地址栏参数的两种方法
Nov 08 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
初识Javascript小结
Jul 16 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
May 19 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 Javascript
js实现登录时记住密码的方法分析
Apr 05 Javascript
微信小程序实现点击页面出现文字
Sep 21 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 socket方式提交的post详解
2008/07/19 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
javascript操作字符串的原生方法
2014/12/22 Javascript
angular.element方法汇总
2015/01/07 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
使用js实现将后台传入的json数据放在前台显示
2018/08/06 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
python求绝对值的三种方法小结
2019/12/04 Python
python 监控logcat关键字功能
2020/09/04 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
厨房工作人员岗位职责
2013/11/15 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
学生期末评语大全
2014/04/30 职场文书
2014年班主任工作总结
2014/11/08 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
初中班主任教育随笔
2015/08/15 职场文书
初中地理教学反思
2016/02/19 职场文书
Go语言基础知识点介绍
2021/07/04 Golang
Hive导入csv文件示例
2022/06/25 数据库