基于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实现前端分页功能
Mar 23 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 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下网站防IP攻击代码,超级实用
2010/10/24 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
PHP实现的简单日历类
2014/11/29 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
PDO::getAttribute讲解
2019/01/28 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
javascript 处理null及null值示例
2014/06/09 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
python encode和decode的妙用
2009/09/02 Python
Python去除列表中重复元素的方法
2015/03/20 Python
Django发送html邮件的方法
2015/05/26 Python
用Python抢过年的火车票附源码
2015/12/07 Python
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
python opencv实现证件照换底功能
2019/08/19 Python
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
医院实习介绍信
2014/01/12 职场文书
2016年中秋祝酒词
2015/11/26 职场文书
如何用python绘制雷达图
2021/04/24 Python
Javascript设计模式之原型模式详细
2021/10/05 Javascript
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis