AJAX小结

最新推荐文章于 2022-05-14 21:50:42 发布
最新推荐文章于 2022-05-14 21:50:42 发布
阅读量140 收藏
点赞数
分类专栏： 网站基础（JavaEE） Java【洗髓】 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gjs935219/article/details/102510731
版权

目录

一、AJAX

前端代码：

 后端主要代码：

二、处理返回的数据

前端代码：

前端代码：

前端CSS：

后端代码：

一、AJAX

AJAX，一种在网页上调用后台接口的方式

后台接口：指后台代码实现的服务

jQuery里提供了AJAX调用的方法

演示：

前端代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="JS/jquery-3.3.1.min.js"></script>
	</head>
	<body>
		<div class="main">
			<button onclick="query()">查询</button>
		</div>
	</body>
	<script>
		function query()
		{
			$.ajax({
				type:'Get',                /*请求类型GET/POST*/
				url:'TestQuery',          /*服务URL,用相对地址*/
				dataType:"json",         /*期望服务器返回的数据类型*/
				success:function(reap)  /*reap：返回的数据对象，已经将服务器返回的数据转成JS对象*/
				{
					console.log(reap);
				}
			});
		}
	</script>
</html>

 后端主要代码：

package my;

import java.io.IOException;
import java.util.List;

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 org.json.JSONArray;

/**
 * Servlet implementation class TestQuery
 */
@WebServlet("/TestQuery")
public class TestQuery extends HttpServlet 
{

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) 
												throws ServletException, IOException 
	{

		//根据from/to进行查询
		List<Student>rows =DemoDB.i.list();
		
		JSONArray jary = new JSONArray(rows);
		
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/plain");
		
		response.getWriter().write(jary.toString(2));
		
	}
}

其中：

-$.ajax({...参数...})等同于jQuery.ajax({...参数...})

-参数里面是一个JS对象

对象的属性：

type :  'GET'

url  : 接口地址，使用相对地址

success : 当服务器返回应答时，调用其function处理（回调方法）

二、处理返回的数据

点击查询按钮后，显示如下

前端代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Text.html</title>
    
   <meta charset="utf-8">

	<link rel="stylesheet" href="css/common.css"/> 
    <script type="text/javascript" src="JS/jquery-3.3.1.min.js"></script>
	
	<style>
		body{
			background-color: #F0F8FF;
		}
		/*主面板*/
		.main{
			width: 800px;
			margin: 20px auto;
			background-color: antiquewhite;
			min-height: 400px;
			padding: 10px;
			position: relative;
		}
		/*工具按钮区*/
		.main .toobar{
			margin: 10px 0px;
		}
		/*数据区*/
		.main .content{
			width: 400px;
			position: absolute;
			left: 200px;
			top: 50px;
			
		}
		/*无数据时的显示*/
		.main .content .empty{
			text-align: center;
			padding: 4px;
			display: block;
			border: 0px solid #888;
			border-width: 0px 1px 1px 1px;
		}
		/*列宽指定*/
		.main .table .c1{width: 80px;}
		.main .table .c2{width: 80px;}
		.main .table .c3{width: 80px;}
		.main .table .c4{width: 180px;}
	</style>

  </head>
  
  <body>
   <div class="main">
   		<button class="toobar" onclick="query()">查询</button>
		<div class="content">
			<table class="table">
				<thead>
					<th class="c1"> 学号 </th>
					<th class="c2"> 姓名</th>
					<th class="c3"> 性别 </th>
					<th class="c4"> 手机号 </th>
				</thead>
				<tbody>
					
				</tbody>
			</table>
			<!--没有数据时显示这个-->
			<div class="empty">
				暂无数据
			</div>
		</div>
   </div>
  </body>
  <script>
  		function query()
  		{
  			$.ajax({
				type:'GET',                   /*请求类型GET/POST*/
				url:'TestQuery',              /*服务URL，用相对地址*/
				dataType:"json",            /*期望服务器返回的数据类型*/
				success:function(resp){    /*已经将服务器返回的数据转成JS对象*/
					 console.log(resp); 
					showResult(resp);
				}
			}); 
  		}
		
		function showResult(result)
		{
			var target = $(".main .content tbody")
			target.html("");  //清空
			for(var row of result)
			{
				var str ="<tr>"
				+"<td>" + row.id +"</td>"
				+"<td>" + row.name +"</td>"
				+"<td>" + (row.sex?"男":"女") +"</td>"
				+"<td>" + row.phone +"</td>"
				+"</tr>"
				;
				target.append(str);
			}
			
			//如果没有数据,则把下面的显示出来
			if(result.length>0)
				$(".main .content .empty").hide();
			else
				$(".main .content .empty").show();
			
		}
  </script>
</html>

三、参数查询

前端代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Text.html</title>
    
   <meta charset="utf-8">

	<link rel="stylesheet" href="css/common.css"/> 
    <script type="text/javascript" src="JS/jquery-3.3.1.min.js"></script>
	
	<style>
		body{
			background-color: #F0F8FF;
		}
		/*主面板*/
		.main{
			width: 800px;
			margin: 20px auto;
			background-color: antiquewhite;
			min-height: 400px;
			padding: 10px;
			position: relative;
		}
		/*工具按钮区*/
		.main .toobar{
			margin: 10px 0px;
			text-align: center;
		}
		/*数据区*/
		.main .content{
			width: 400px;
			position: absolute;
			left: 200px;
			top: 80px;
			
		}
		/*无数据时的显示*/
		.main .content .empty{
			text-align: center;
			padding: 4px;
			display: block;
			border: 0px solid #888;
			border-width: 0px 1px 1px 1px;
		}
		/*列宽指定*/
		.main .table .c1{width: 80px;}
		.main .table .c2{width: 80px;}
		.main .table .c3{width: 80px;}
		.main .table .c4{width: 180px;}
	</style>

  </head>
  
  <body>
   <div class="main">
	   <div class="toobar">
		   <!--输入查询条件-->
		   <input type="text" class="from" placeholder="开始学号" />---
		   <input type="text" class="to" placeholder="结束学号" />
		   <button class="toobar" onclick="query()">查询</button>
	   </div>
   		
		<div class="content">
			<table class="table">
				<thead>
					<th class="c1"> 学号 </th>
					<th class="c2"> 姓名</th>
					<th class="c3"> 性别 </th>
					<th class="c4"> 手机号 </th>
				</thead>
				<tbody>
					
				</tbody>
			</table>
			<!--没有数据时显示这个-->
			<div class="empty">
				暂无数据
			</div>
		</div>
   </div>
  </body>
  <script>

	  
  		function query()
  		{
			
			/*请求参数*/
			var req = {};
			req.from =$(".toobar .from").val().trim();
			req.to = $(".toobar .to").val().trim();
			
			console.log(req.from);
  			$.ajax({
				type:'GET',                   /*请求类型GET/POST*/
				url:'TestQuery',              /*服务URL，用相对地址*/
				dataType:"json",            /*期望服务器返回的数据类型*/
				data:req,                  /*附加请求参数*/
				success:function(resp){    /*已经将	服务器返回的数据转成JS对象*/
					 console.log(resp); 
					showResult(resp);
				}
			}); 
  		}
		
		function showResult(result)
		{
			var target = $(".main .content tbody")
			target.html("");  //清空
			for(var row of result)
			{
				var str ="<tr>"
				+"<td>" + row.id +"</td>"
				+"<td>" + row.name +"</td>"
				+"<td>" + (row.sex?"男":"女") +"</td>"
				+"<td>" + row.phone +"</td>"
				+"</tr>"
				;
				target.append(str);
			}
			
			//如果没有数据,则把下面的显示出来
			if(result.length>0)
				$(".main .content .empty").hide();
			else
				$(".main .content .empty").show();
			
		}
  </script>
</html>

前端CSS：


body{
	margin: 0px;
	padding: 0px;
}

/* 表格样式 */
table{
	border-collapse: collapse; /* 边线收缩 */
	table-layout: fixed ;  /* 自动布局还是固定宽度 */
	word-break: break-all; /* 换行设定 */
	word-wrap:break-word;  /* 换行折断设定 */
}

/* 逗号表示同时指定多个目标的样式 */
table,td,th{
	border: 1px solid #888;
	text-align: center;
}


/* 一行 */
.row{
	margin: 10px 0px;
}

后端代码：

package my;

import java.io.IOException;
import java.util.List;

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 org.json.JSONArray;

/**
 * Servlet implementation class TestQuery
 */
@WebServlet("/TestQuery")
public class TestQuery extends HttpServlet 
{

	/**
	 * @see HttpServlet#doGet(

HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) 
												throws ServletException, IOException 
	{
		
		String fromStr = request.getParameter("from");

		
		String toStr = request.getParameter("to");
		
		int from = Integer.valueOf(fromStr);
		int to = Integer.valueOf(toStr);
		
		//根据from/to进行查询
		List<Student>rows =DemoDB.i.list(from, to);
		
		JSONArray jary = new JSONArray(rows);
		
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/plain");
		
		response.getWriter().write(jary.toString(2));
		
	}
}

 

森-Js
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax小结
07-29
NULL 博文链接：https://zhouxianglh.iteye.com/blog/808240
AJAX总结
庸人方自扰，自在就好
05-19 359
简介 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数
Ajax-总结
Chen_neal_Java的博客
10-17 159
查询分页 通用的分页参数 参数概览 总条数 （从数据库中查询得到） 当前页 (前端页面传参) 每页条数 (前端页面传参) 总页数 （由总条数和每页条数计算得知） 每页要展示数据 /* * 记录数据总条数 * */ private Integer totalCount; /* * 记录每页展示条数 * */ private Integer pageSiz...
JavaScript jquery及AJAX小结
01-19
其实在学习之前，就已经用上了js，jquery和ajax，不过当时不清楚这些的区别，就全都当成js来看，然后别人一说jquery，ajax都觉得好像很高级，等到自己学习的时候，倒是对这些更清楚了一点，下面就来写一下我的总结。...
Ajax 的六个误区小结分析
12-09
就像以前流行过的闪烁字体、“溅水”页(译者：Splash page －Flash动画或大图片做的网站的简介首页，往往有个“跳过简介”或“直接进入”的小按钮)、和使用圆角（译者：见YeeYan首页抬头，呵呵），只是这次动态性...
Ajax的小贴士使用小结
01-21
在使用Ajax过程中，有时候总会遇到一些难题，浏览器兼容、编码、IE下的特殊处理等等，偶尔会搞的人头昏脑胀哭笑不得，这里列一些小贴士，或许有些用。 使用Javascript库 Ajax的流行和巨大威力，让我们重新审视了...
Ajax 的全面总结
油墨香^-^的博客
05-14 1753
Ajax在前端开发中有着举足轻重的地位，关于Ajax的使用和注意事项一直是一个重要的话题，借此机会，本文希望对Ajax做一个全面的总结，彻底揭开Ajax的神秘面纱。 一.什么是Ajax Ajax(Asynchronous JavaScript and XML),可以理解为JavaScript执行异步网络请求。通俗的理解的话就是，如果没有Ajax技术，改变网页的一小部分（哪怕是一行文字、一张图片）都需要重新加载一次整个页面，而有了Ajax之后，就可以实现在网页不跳转不刷新的情况下，在网页后台提交数据，部分
Ajax的总结
徐小冠
07-14 1738
AJAX是什么？　　AJAX的全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。　　ajax不是新的编程语言，而是一种使用现有标准的新方法。ajax是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。　　ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。　　ajax是一种用于创建快速动态网页的技术...
Ajax的优点和缺点
michael8512的博客
08-17 4782
优点： （1）最大的优点就是页面无刷新，用户的体验非常好； （2） 使用异步方式与服务器通信，具有更加迅速的相应能力； （3）可以把以前的一些服务器负担的工作转嫁到客户端，利用客户端限制的能力来处理，减轻服务器和带宽的负担，节约空间和带宽租用成本，并且减轻服务器的负担，Ajax的原则是“按需取数据”，可以最大程度地减少冗余请求和相应对服务器造成的负担； （4）基于标准化的并被广泛支持的技术
Ajax学习总结
sout
03-26 1437
一、Ajax的概念及原理 1）概念：AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。不是一种新技术，是如下几种技术的组合应用： 基于web标准（standards-based presentation）XHTML+CSS的表示； 使用 DOM（Document Object Model）...
java前端显示统计报表数据_java实现后台数据显示在前端
weixin_39923599的博客
02-25 1168
java实现后台数据显示在前端发布时间：2020-09-07 15:16:09来源：脚本之家阅读：98作者：沿途不枉少年本篇使用servlet +.ajax( )的技术，实现简单的前后台的交互问题。首先来了解一下AJAXAJAX是jquery的一个方法，一种在网页上调用后台接口的方式。示例：$.ajax( { 参数 } ) ;$.ajax()等同于jQuery.ajax( )参数里是一个JS对象,...
ajax 请求的几种方式
alan800800的博客
06-11 95
1231 转载于:https://www.cnblogs.com/zyc19910109/p/9050741.html
千万别再一直无脑使用ES6的箭头函数了，它虽然很有用但并不是万能的
零一的博客
06-13 5885
ES6函数扩展之箭头函数的详细介绍引言正文一、箭头函数的基本使用二、箭头函数的作用 引言 相信很多小伙伴自从知道了ES6的箭头函数以后，都疯狂得使用，渐渐的淡忘了普通函数的使用。不过确实，箭头函数看起来比较简洁，用起来也舒服，不过它的出现是为了解决某一部分问题的，并不是用来替代普通函数的，所以我们不能在每一个地方都使用箭头函数。 正文 一、箭头函数的基本使用 我们先来看看箭头函数是如何使用的吧 let fn1 = function () { console.log('我是普通函数') } let fn2
RESTful
热门推荐
给你更好的
10-14 2万+
一、RESTful RESTful，一种通用的前后台交互方式 RESTful一般是指这种格式： （1）使用HTTP POST(或GET)进行数据交互 （2）请求数据和应答数据均为JSON格式（或XML） 二、RESTful接口的实现 RESTful的前端实现 前端：在发送请求时，把请求转成JSON字符串 $.ajax({ type:"POST", /*请求类...
文件上传（JavaScript实现）
给你更好的
11-27 1万+
设计思路： form实现文件上传 内在也是通过form实现， 在Js中创建一个form 对象，点击按钮，触发事件（模拟form被点击），得到文件-》通过构造的form对象上传文件 前端代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>&...
ajax笔记ajax笔记ajax笔记
最新发布
04-03
Ajax技术可以将网页分割成小的部分，然后使用JavaScript和XML来实现异步更新网页内容。 二、 Ajax的优点 Ajax技术可以带来以下几点优势： 1. 提高用户体验：Ajax可以实现在不刷新整个网页的情况下，局部更新网页...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值