基于ajax及jQuery实现局部刷新过程解析


Posted in jQuery onSeptember 12, 2020

1、jQurey使用时需导入jquery-1.4.2.js在web文件夹下

并在写script时需像如下定义script标签:

<script src="js/jquery-1.4.2.js" type="text/javascript"></script>

2、jQurey的语法:通过$(要选取的元素)

基于ajax及jQuery实现局部刷新过程解析

定义响应ajax的Servlet

String buttonName=request.getParameter("buttonName");
  JSONObject jsObject =null;  //定义一个要返回的的数据
  if (buttonName.equals("button_1")){
   jsObject=new JSONObject("{first:\"傻子\",second:\"傻子\",third:\"傻子\"}"); //以键值对方式存储

  }
  if (buttonName.equals("button_2")){
   jsObject=new JSONObject("{first:\"傻女\",second:\"傻女\",third:\"傻女\"}");

  }
  if (buttonName.equals("button_3")){
   jsObject=new JSONObject("{first:\"傻佬\",second:\"傻佬\",third:\"傻佬\"}");

  }
  response.getOutputStream().write(jsObject.toString().getBytes("utf-8")); //通过respon.getOutputStream获取输出流 将数据传回jsp页面
 }

ajax使用形式如下:

$.ajax({
  url:"/AJAX_war_exploded/ClickServlet", //定义需转到的Servlet
  type:"post",






//定义提交的形式
  data:{








 //定义要传递的数据,以键值对形式存储
   buttonName:"button_2"
  },









 //每个ajax都会让Servlet回传一个数据
  dataType:"json",





 //定义回传数据的类型
  success:function(result){


 //ajax收到回传的数据是会触发的事件success
   var first=result.first;
   var second=result.second;
   var third=result.third;
   $(".first")[0].innerHTML=first;

//该形式使用了jQuery获取html元素
   $(".second")[0].innerHTML=second;
   $(".third")[0].innerHTML=third;
  }
  })
 })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jQuery实现视频展示效果
May 30 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 #jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 #jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 #jQuery
深入分析jQuery.one() 函数
Jun 03 #jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 #jQuery
jQuery实现倒计时功能完整示例
Jun 01 #jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 #jQuery
You might like
isset和empty的区别
2007/01/15 PHP
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
用Python编程实现语音控制电脑
2014/04/01 Python
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
Python Series从0开始索引的方法
2018/11/06 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
Python实现代码块儿折叠
2020/04/15 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
离婚财产分配协议书
2014/10/21 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
作文评语怎么写
2014/12/25 职场文书
工程部部长岗位职责
2015/02/12 职场文书
Mysql Show Profile
2021/04/05 MySQL
Python利用folium实现地图可视化
2021/05/23 Python
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript