Ajax实现局部刷新的方法实例


Posted in Javascript onMarch 31, 2021

前言

最近复习了一下jQuery的一些内容,特此整理一下一些能用的得到的知识点,以前才学jQuery的时候压根就没有注意到那么多的细节,另外最近一直都在整理前端的一些工作中学到的小经验,大概还会有十篇左右的内容,就会慢慢开始整理后端,框架,以及数据库的一些小知识点

一、 Ajax是什么?

概念: ASynchronous JavaScript And XML 异步的JavaScript 和 XML

1、异步和同步:客户端和服务器端相互通信的基础上

     -> 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。

     ->客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作

2、Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

     ->通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

     -> 传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

二、实现方式:

1.原生的JS实现方式(了解)

javascript代码如下(示例):

//javascript代码
 var xmlhttp;//1.创建核心对象
 if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp = new XMLHttpRequest();
 } else {// code for IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
 //2. 建立连接
 /* 参数:
  1. 请求方式:GET、POST
   * get方式,请求参数在URL后边拼接。send方法为空参
   * post方式,请求参数在send方法中定义
  2. 请求的URL:
  3. 同步或异步请求:true(异步)或 false(同步)
  */
  //将URL改成你自己的地址
 xmlhttp.open("GET", "<%=request.getContextPath()%>/testDemo?name=zhangsan", true);
 //3、将请求发送到服务器。
 xmlhttp.send();
 //4.接受并处理来自服务器的响应结果
 //获取方式 :xmlhttp.responseText
 //当xmlhttp对象的就绪状态改变时,触发事件onreadystatechange。
 //接收服务器端的响应(readyState=4表示请求已完成且响应已就绪 status=200表示请求响应一切正常)
 xmlhttp.onreadystatechange = function () {
  //判断readyState就绪状态是否为4,判断status响应状态码是否为200
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  //获取服务器的响应结果
  var responseText = xmlhttp.responseText;
  alert(responseText);
  }
 }

java后端接收代码如下(示例):

//.取得参数,
 String name=request.getParameter("name");
 System.out.println(name);//打印输出取得的参数
 //将数据信息回写给ajax
 response.getWriter().write("hello");

2.JQeury实现方式

代码如下(示例):

1. $.ajax()

    -> 语法:$.ajax({键值对});

代码如下(示例):

//使用$.ajax()发送异步请求
		 $.ajax({
  url:"<%=request.getContextPath()%>/testDemo" , // 请求路径
  type: "POST", //请求方式
  data: {"name": "zhangsan"},//请求参数
  dataType: "JSON", //设置接受到的响应数据的格式,还有很多格式,如:text
  //async:false,//默认是true(异步),false(同步)
  success: function (data) {//响应成功后的回调函数
   alert(data);
   }
  },
  error: function () {
   alert("出错啦...");
  },
  });
  
	//java代码和上述java代码一样即可

2. $.get():发送get请求(ajax的简化)

-> 语法:$.get(url, [data], [callback], [type])

    * url:请求路径

    * data:请求参数

    * callback:回调函数

    * type:响应结果的类型

代码如下(示例):

$.get("<%=request.getContextPath()%>/testDemo",{name:"zhangsan"},function (data) {
  alert(data);
  },"text");

3. $.post():发送post请求(ajax的简化)

->语法:$.post(url, [data], [callback], [type])

    * url:请求路径

    * data:请求参数

    * callback:回调函数

    * type:响应结果的类型

代码如下(示例):

$.post("<%=request.getContextPath()%>/testDemo",{name:"zhangsan"},function(data) {
  alert(data);
  },"text");

小栗子

jsp页面:

<%--
 Created by IntelliJ IDEA.
 User: ASUS
 Date: 2021/3/2
 Time: 22:20
 To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>Title</title>
 <title>ajax局部刷新</title>
 <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.11.0.js"></script>
 <style type="text/css">
 input {
  width: 260px;
  height: 25px;
 }

 input:focus {//按钮点击后改变颜色
  background: #10a0e9;
 }


 </style>
</head>
<body style="text-align:center;">
<input type="button" value="btn1" onclick="btnfun1()">
<input type="button" value="btn2" onclick="btnfun2()">
<input type="button" value="btn3" onclick="btnfun3()">
<br>
<span>你好啊!!我叫:</span>
<div id="div1">
</div>
</body>

<script type="text/javascript">
 function btnfun1() {
 $.ajax({
  url: "<%=request.getContextPath()%>/ajaxServlet",	//上传URL
  type: "POST", //请求方式
  data: {"flag": "one"}, //需要上传的数据
  dataType: "text", //设置接受到的响应数据的格式
  success: function (data) {	//请求成功
  console.log(data);
  $("#div1").html(data);
  },
  error: function () {
  alert("出错啦...");
  },//表示如果请求响应出现错误,会执行的回调函数
 });
 }

 function btnfun2() {
 $.ajax({
  url: "<%=request.getContextPath()%>/ajaxServlet",	//上传URL
  type: "POST", //请求方式
  data: {"flag": "two"}, //需要上传的数据
  dataType: "text", //设置接受到的响应数据的格式
  success: function (data) {	//请求成功
  console.log(data);
  $("#div1").html(data);
  },
  error: function () {
  alert("出错啦...");
  },//表示如果请求响应出现错误,会执行的回调函数
 });
 }

 function btnfun3() {
 $.ajax({
  url: "<%=request.getContextPath()%>/ajaxServlet",	//上传URL
  type: "POST", //请求方式
  data: {"flag": "three"}, //需要上传的数据
  dataType: "text", //设置接受到的响应数据的格式
  success: function (data) {	//请求成功
  console.log(data);
  $("#div1").html(data);
  },
  error: function () {
  alert("出错啦...");
  },//表示如果请求响应出现错误,会执行的回调函数
 });
 }
</script>

</html>

java代码

package test3_2.ajax;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 request.setCharacterEncoding("UTF-8");
 response.setContentType("text/html; charset=UTF-8");
 response.setCharacterEncoding("UTF-8");
 //1、获取ajax传递过来的参数信息
 String flag = request.getParameter("flag");
 System.out.println(flag);
 //2、需要返回的数据信息
 String data = " ";
 if("one".equals(flag)){//流行歌曲
  data = "张三";
 }else if("two".equals(flag)){//经典歌曲
  data = "李四";
 }else if("three".equals(flag)){//摇滚歌曲
  data = "老王";
 }
 //3、将数据信息回写给ajax
 response.getWriter().write(data);

 }

 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 doPost(request,response);
 }
}

截图:

Ajax实现局部刷新的方法实例

Ajax实现局部刷新的方法实例

Ajax实现局部刷新的方法实例

总结

到此这篇关于Ajax实现局部刷新的文章就介绍到这了,更多相关Ajax局部刷新内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
js精确的加减乘除实例
Nov 14 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 Javascript
前端学习——JavaScript原生实现购物车案例
JavaScript中关于预编译、作用域链和闭包的理解
JavaScript 去重和重复次数统计
Mar 31 #Javascript
vue中三级导航的菜单权限控制
Mar 31 #Vue.js
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
vue3中的组件间通信
vue前端工程的搭建
You might like
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
php实现映射操作实例详解
2019/10/02 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
vue--vuex详解
2019/04/15 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
python+django快速实现文件上传
2016/10/24 Python
Python实现调度算法代码详解
2017/12/01 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
Python之变量类型和if判断方式
2020/05/05 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
如何进行有效的自我评价
2013/09/27 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
2015年护士节活动总结
2015/02/10 职场文书
2015年环卫工作总结
2015/04/28 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
python 提取html文本的方法
2021/05/20 Python
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python