基于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 相关文章推荐
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 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 URL参数获取方式的四种例子
2014/02/28 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
用JS实现选项卡
2020/03/23 Javascript
js实现缓动动画
2020/11/25 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
Python返回真假值(True or False)小技巧
2015/04/10 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
Python subprocess模块常见用法分析
2018/06/12 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
EJB与JAVA BEAN的区别
2016/08/29 面试题
船舶专业个人求职信范文
2014/01/02 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
颐和园的导游词
2015/01/30 职场文书
放射科岗位职责
2015/02/14 职场文书
首次购房证明
2015/06/19 职场文书
礼仪培训心得体会
2016/01/22 职场文书
施工安全协议书
2016/03/22 职场文书
MySQL中连接查询和子查询的问题
2021/09/04 MySQL