基于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绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jQuery实现计算器功能
Oct 19 jQuery
jQuery实现动态操作table行
Nov 23 jQuery
JS+JQuery实现无缝连接轮播图
Dec 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
基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
js中eval详解
2012/03/30 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
微信小程序 动态传参实例详解
2017/04/27 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
python类继承与子类实例初始化用法分析
2015/04/17 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
python3.6编写的单元测试示例
2019/08/17 Python
Python 中@property的用法详解
2020/01/15 Python
python属于哪种语言
2020/08/16 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
颁奖晚会主持词
2014/03/25 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
营销计划书
2015/01/17 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis