web---JQuery收尾【JQuery中ajax技术】

最新推荐文章于 2022-01-20 10:00:12 发布

码农C风

最新推荐文章于 2022-01-20 10:00:12 发布

阅读量604

点赞数 1

分类专栏： JAVAweb 文章标签： jquery 前端 ajax

本文链接：https://blog.csdn.net/a23452/article/details/122271555

版权

JAVAweb 专栏收录该内容

53 篇文章 3 订阅

订阅专栏

Query

内容导航

Javaweb — 新的一年，立flag，技术突破,广度马上就够了，现在弄深度

JQuery函数、ajax函数

JQuery真的还是大大简化了JS代码的编写，主要区分对象就是$符号，新year刚好会上java程序设计课，到时候可以再夯实一下基础了，重点是看源码还有注解

JQuery函数

注意这一组函数和昨天的那一组有区别；前面的val、text、attr主要是操纵对象的属性；这一组主要操纵对象的子对象；所谓子对象就是子节点，比如html是根结点，下面就是head结点【对象】和body结点; 这些函数都是操纵所有的对象

除了text，val、attr、html都是get的时候只能get第一个

remove

将数组中的所有DOM对象及其子对象删除

$(选择器).remove()

empty

将数组中所有对象的子对象删除，【并没有删除原对象】

$(选择器).empty()

append

为数组中所有DOM对象添加子对象-----子对象是以字符串的形式出现;可以动态增加任何dom对象

$(选择器).append("<div>我是添加的动态的div<div>")

html

设置或返回被选元素的内容，innerHTML ---- 就是所定义的标签

就是获取选择器标签所对应的标签之间的所有的内容，就是innerHTML；和text不同，text会自动忽略标签

无参的形式：获取DOM数组的第一个元素的内容 $(选择器).html()
有参形式：设置DOM数组中所有元素的内容 $(选择器).html(value)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery函数</title>
		<script src="js/JQuery1.8.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css">
			span{
				background-color: aqua;
			}
			
			div{
				background-color: aquamarine;
			}
		</style>
		
		<script type="text/javascript">
			$(function(){
				$(":button").click(function(){
					//使用remove()删除所有的对象，所有的对象就直接*
					//$("*").remove();
					
					//使用empty删除子对象，比如这里删除所有下拉泪飙的自对象
					//$("select").empty();//删除后就没有option了
					
					//使用append增加子dom对象；为第一个select增加一个金丝猴
					//$("select:first").append("<option>金丝猴</option>"); 使用JQuery轻松增加一个
					 
					 //获取标签的内容
					 //console.log($("select:last").html());
					/*
					这里输出的结果
					<option>华北平原</option>
					<option>松江平原</option>
					<option>黄土高原</option>
					也就是说会输出DOM对象数组中第一个元素的所有的子标签；这里的select中的就是几个option；如果是HTML，就直接输出了HTML标签之间的所有的内容
					*/
				   
				   //将div标签中的的HTML重新设置为一个表格;需要注意一定要放在一行，不然就显示不成功
				   $("#div1").html("<table border='1px'><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>21</td></tr></table>");
				})
			})
		</script>
	</head>
	<body>
		<select>
			<option>华南虎</option>
			<option>美洲狮</option>
			<option>东北虎</option>
		</select>
		<br>
		<select>
			<option>华北平原</option>
			<option>松江平原</option>
			<option>黄土高原</option>
		</select>
		<br>
		<div id="div1">我是一个父div</div>
		<span><b>我是mysql</b></span><br>
		<span>我是cfeng</span><br><br>
		<input type="button" value="功能" />
	</body>
</html>

这几个函数主要就是动态操作DOM对象，实现动态增加，动态删除，动态修改，十分方便【只有val、attr、html的get方法才是第一个，其他都是所有】

each

each是对数组、json和dom数组等的遍历，对每一个元素都调用一次函数

$.each(要遍历的对象,function(index,element){})
$就相当于类名，each就是其中的静态方法； index是循环的索引，element是对象


JQuery对象.each(function(index,element){})

可以对数组、json、dom数组循环处理、每一个成员都会执行处理函数

		<script type="text/javascript">
			$(function(){
				$(":button").click(function(){
					//each函数第一种语法  $.each(遍历对象，自定义方法)
					
					/*
					//原始的写法
					println = function(index,element){
						console.log(element);
					}
					
					var arr = [32,35,89,45];
					for(var i = 0 ; i < arr.length; i++) {
						var item = arr[i]; //数组成员
						//调用输出函数
						println(i,item);
					}*/
					
					//使用each的写法
					var arr = [32,35,89,45];
					
					$.each(arr,function(index,element){  //简单许多，element就相当于是arr[I]，index就是I；所以操作元素或者操作元素的下标都可以
						console.log(element);
					});
				})
			})
		</script>

这里就非常简单的遍历了数组类型的对象了

循环数组的时候---- index是数组的下标； element是数组中的每一个元素
循环json的时候，key【前面的参数】是json每一个属性的keyname；【后面的参数】就是json每一个属性的值

$(function(){
		$(":button").click(function(){
			var json = {"name":"zhangsan","stuclass":"HC2001"};
			$.each(json,function(key,value){
				console.log("Key是"+ key + " value是" + value);
			})
		})
	})


14:38:38.796 Key是name value是zhangsan at test.html:23
14:38:38.802 Key是stuclass value是HC2001 at test.html:23

循环DOM数组则和普通的数组相同，前面是索引，后面是对象

$(function(){
		$(":button").click(function(){
			var $option = $("select");
			$.each($option,function(index,elem){
				alert($(elem).html()); //这里就将两个下拉列表的每一个的内含的innerHTML全部给输出，而不只是第一个
			});
		})
	})

对于JQuery对象还可以使用
$(选择器).each()

JQuery事件 on

之前分享过其中的JQuery事件的一种写法，那就是使用JQuery中的事件方法，比如click()；

除此之外，还有更加灵活的处理方式，就是使用on，使用的格式是

$(选择器).on(event,function)
    
event: 事件一个或者多个，多个之间用空格分隔开【事件名称】
function： 可选，规定当作事件允许时的运行的函数【事件的处理函数】

on的方式显得更加灵活

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery函数</title>
		<script src="js/JQuery1.8.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//第二种：on的方式给按钮绑定事件
				$(":button").on("click",function(){
					$("select").remove();
				})
			})
		</script>
	</head>
	<body>
		<select>
			<option>华南虎</option>
			<option>美洲狮</option>
			<option>东北虎</option>
		</select>
		<br>
	
		<input type="button" value="功能" />
	</body>
</html>

这种方式确实要灵活一点，但是和之前的click()的差别不是很大；JQuery实现了动态的对象的创建和事件的绑定

JQuery中的AJAX

之前使用AJAX必须要经过重复的几步，首先就是要创建异步对象XMLHttpRequest()，然后给异步对象绑定事件，【onreadystatechange；通过status获取请求是否成功】，之后初始化异步对象，发送请求

JQuery简化了AJAX的处理，三个函数即可

$.ajax();  //jquery中ajax的核心函数
$.post();  //使用post方式做ajax请求
$.get();     //使用get方式做ajax请求

$相当于一个类，get,post，get，each相当于其静态方法

其中$.post和get都在内部调用了ajax函数；

$.ajax()

函数的参数表示请求得url，请求得方式、参数值等信息；其参数是json得结构

例如： $.ajax({名称:值,名称:值……}) json的属性名不用加双引号

这个json中得属性有

async ： boolean 表示请求是否异步，默认是true【可以不写这个配置项】
contentType ：发送数据到服务器所使用得类型MIME；比如"application/json";可以不写
data: 规定要发送到服务器的数据，可以是字符串、数组，大多是json
dataType ：期望从服务器响应的数据类型，JQuery从xml、json、text、html中进行测试【JSON就是以对象返回，所以java对象转js对象必须用json】；servlet读取到dataType的值，就知道浏览器想要什么类型的数据，服务器就可以返回你需要的类型的数据
error() : 如果请求失败要运行的函数
success(data) 当请求成功的时候运行的函数，data自定义的形参 ---- 就是原生AJAX中的responseText---- 是4，也就是处理完成的数据；其实就相当于就是之前的事件绑定的函数中readyState == 4&& status == 200
type ：规定请求的类型，默认是GET，还有POST，不区分大小写
url ：发送请求的url

$.ajax({
	//async:true,
	//contentType:"application/json",
	data:{name:"lisi",stucalss:"HC2002"},
	dataType:"json",
	//error:function(){
		//出现的错误
	},
	success:function(data){
		//data就是返回接受的处理成功的字符串
	},
	url:"http://……",
	type: POST
})

实际开发中，最常用的是data ---- 发送的数据,dataType ---- 返回的数据类型一定要写，并且要写正确，如果响应的是text，那么只能是text；不写在success函数就不能成功执行 ,url – 浏览器地址; success — 成功后的处理函数

之前使用get方式将所有的数据作为url传递，这里可以直接使用json格式的data，相当于就是请求的参数

data中就相当于就是请求正文一样，里面放的json参数都会放到请求正文或者连接到url后

GET /AjaxTest/bmi?user=%E5%BC%A0%E4%B8%89&height=1.63&weight=50

比如这样子，后面的数据都是在data这个JSON对象中写入的

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AJAXdemo</title>
		<script src="js/JQuery1.8.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			$(function(){//页面加载之后
				$(":button").on("click",function(){
					//获取身高，体重，姓名
					var u = $("#name").val();
					var h = $("#h").val();
					var w = $("#w").val();
					$.ajax({
						data:{user:u,height:h,weight:w},  
						url:"/AjaxTest/bmi",
						dataType:"text",   //期望获得的数据类型，可以为html，json，text，xml等 ;如果不正确，那么success就有问题
						success:function(resp){
							//console.log(resp);
							//返回的是text，但是之前以为dataType是发送的请求，所以除了；dataType指定返回的响应的数据类型，如果指定错误，则不会执行success函数
							//因为没有获得期望的数据类型，则执行errror函数
							$("#result")[0].innerText = resp;
						}
					})
				});
			})
		</script>
	</head>
	<body>
		姓名   : <input id="name" type="text"/><br>
		身高m  : <input id="h" type="text" /><br>
		体重kg : <input  id="w" type="text"/><br>
		<input type="button" value="计算bmi""/>
		<br><br><br>
		<span id="result">等待加载数据……</span>
	</body>
</html>

可以看到，同样的一个过程，使用JQuery的代码比原生JS简单很多

如果想要servlet返回的响应数据直接是json；或者dataType为json，那么就在servlet中设置响应的MIME格式

也就是说dataType和响应的contentType是对应的，如果contentType是text，那么dataType也只能是text

如果是JSON格式，那么都要进行转化，可以使用eval函数

resp = eval("(" + resp + ")");
$("#result")[0].innerText = resp.name;
console.log(resp.stuclass);

测试了一下，如果将dataType写成json；那么就会出现解析失败，相当于readystate != 4

$.get()

该方法使用HTTP GET请求从服务器加载数据

$.get(url,data,function(resp),dataType)

就相当于将上面的json对象给封装了，并且type=get；四个参数和上面的参数是相同的

$.post()

使用HTTP POST的方式从服务器加载数据

$.post(url,data,function(resp),dataType)

相当于就还是调用了$.ajax()函数，这里相当于将type设置为post

所以可以直接用下面的函数

$.ajax({
	data:{user:u,height:h,weight:w},  
	url:"/AjaxTest/bmi",
	dataType:"text",  
	success:function(resp){
		$("#result")[0].innerText = resp;
	}
})

--------------转化为------------
$.get("/AjaxTest/bmi",{user:u,height:h,weight:w},success:function(resp){
						$("#result")[0].innerText = resp;
					},"text")

但是这个区别不大，可以还是使用$.ajax()直观一点

JQuery案例 — 级联查询

级联查询就是要前面的选择之后，后面的才能选择，比如城市的选择，选择省份之后才能选择城市……abbreviation – 简称；province capitial 省会

首先是创建表，一张省表

USE cfengTest;
CREATE TABLE province(
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(25),
    abbre CHAR(1),
    captial VARCHAR(25)
);
CREATE TABLE city(
	id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(25),
    provid INT,
    FOREIGN KEY(provid) REFERENCES province(id) #外键
);

编写对应的Dao类和entity类

package dao;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import cfeng.entity.City;
import cfeng.util.DButil;

public class CityDao {
	//根据省份id，得到所有的城市
	public List<City> getCityList(int provid){
		Connection conn = null;
		PreparedStatement state = null;
		ResultSet result = null;
		City city = null;
		List<City> list = new ArrayList<City>();
		try {
			conn = DButil.getConnection();
			String sql = "SELECT id,name From city WHERE provid = ?";
			state = conn.prepareStatement(sql);
			state.setInt(1, provid);
			result = state.executeQuery();
			while(result.next()) {
				int id = result.getInt("id");
				String name = result.getString("name");
				city = new City(id, name, provid);
				list.add(city);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}finally {
			DButil.close(conn, state, result);
		}
		return list;
	}
}
//这里使用的两个工具类json工具类和DButil工具类都是和之前相同的
JSON对象的属性名不需要加单引号，直接写即可

然后进行web页面的开发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>省市级联查询</title>
		<script src="js/JQuery1.8.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
		</script>
	</head>
	<body>
		<h1 align="center">省市级联查询</h1>
		<hr color="aqua">
		<table>
			<tr>
				<td>省份</td>
				<td>
					<select id="province"><option value="0">请选择省份</option></select>
				</td>
				<td><input type="button" id="proBtn" value="加载可选择省份"/></td>
			</tr>
			<tr>
				<td>城市</td>
				<td>
					<select id="city"><option value="0">请选择城市</option></select>
				</td>
			</tr>
		</table>
	</body>
</html>

之后就要思考这个功能的过程，就是点击按钮，省份的选择框就会出现很多的选择项；选择省份的选择项之后城市的选择项就变成对应的城市【初步的思路就是连个异步对象完成】

进行了大概的前端编写，和思考分析，接下来就是实现功能，首先完成，点击按钮，显示所有的省份

//第一个异步对象，点击按钮触发
$("#proBtn").click(function(){
	$.ajax({
		url: "/AjaxTest/queryProvince",
		dataType:"text",
		success:function(resp){
			resp = eval("(" + resp + ")");
			var $opp = $("#province");
			$opp.empty();
			$opp.append("<option value='0'>请选择省份</option>");
			//点击后，后面的城市也要消失，重新选择
			var $city = $("#city");
			$city.empty();
			$city.append("<option value='0'>请选择城市</option>");
			for(var i = 0; i < resp.len; i++) {
				var pro = resp.data[i];
				//console.log(pro.name);
				$opp.append("<option value='" + pro.id + "'>"+ pro.name +"</option>");
			}
		}
	});
});

点击后，页面不刷新，只是加载出来，这里就使用的是AJAX技术局部刷新

之后就是编写一个servlet控制层类

package cfeng.controller;

import java.io.IOException;
import java.io.PrintWriter;
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 cfeng.entity.City;
import cfeng.util.JsonUtil;
import dao.CityDao;


@WebServlet("/QueryCity")
public class QueryCityServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
  
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//获得传入的provid
		int provid = Integer.valueOf(request.getParameter("provid"));
		//调用业务层代码
		CityDao cityDao = new CityDao();
		List<City> citylist = cityDao.getCityList(provid);
		//转为JSON字符串
		StringBuffer json = new StringBuffer("{len:");
		json.append(citylist.size() + "," + "data:[");//之前少了一个data
		
		for(int i = 0; i < citylist.size(); i++) {
			City city = citylist.get(i);
			StringBuffer js = JsonUtil.getJSON(city);
			json.append(js);
			if(i <citylist.size() -1) {
				json.append(",");
			}
		}
		json.append("]}");
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		out.print(json);
		out.flush();
		out.close();
	}

}

中间的代码应该封装到业务层，这里为了简单一点就没有进行封装了

另外一个Servlet类差不多，就不展示了;看一下第一个的页面【其实本来要将script中的代码剥离称为一个js文件的

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>省市级联查询</title>
		<script src="js/JQuery1.8.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//第一个异步对象，点击按钮触发
				$("#proBtn").click(function(){
					$.ajax({
						url: "/AjaxTest/queryProvince",
						dataType:"text",
						success:function(resp){
							resp = eval("(" + resp + ")");
							var $opp = $("#province");
							$opp.empty();
							$opp.append("<option value='0'>请选择省份</option>");
							//点击后，后面的城市也要消失，重新选择
							var $city = $("#city");
							$city.empty();
							$city.append("<option value='0'>请选择城市</option>");
							for(var i = 0; i < resp.len; i++) {
								var pro = resp.data[i];
								//console.log(pro.name);
								$opp.append("<option value='" + pro.id + "'>"+ pro.name +"</option>");
							}
						}
					});
				});
				
				//第二个异步对象，选择下拉列表后触发
				$("#province").change(function(){//下拉列表的事件是change，不是select
					var $id = $("#province>option:selected").val();
					$.ajax({
						url: "/AjaxTest/QueryCity",
						data:{provid:$id},
						dataType:"text",
						success:function(resp){
							//首先要清除之前的所有的子对象
							resp = eval("(" + resp + ")");
							var $opp = $("#city");
							$opp.empty();
							$opp.append("<option value='0'>请选择城市</option>");//这里其中不能直接使用双引号，报错
							for(var i = 0; i < resp.len; i++) {
								var city = resp.data[i];
								//console.log(pro.name);
								$opp.append("<option value='" + city.id + "'>"+ city.name +"</option>");
							}
						}
					});
				});
			})
		</script>
	</head>
	<body>
		<h1 align="center">省市级联查询</h1>
		<hr color="aqua">
		<table>
			<tr>
				<td>省份</td>
				<td>
					<select id="province"><option value="0">请选择省份</option></select>
				</td>
				<td><input type="button" id="proBtn" value="加载可选择省份"/></td>
			</tr>
			<tr>
				<td>城市</td>
				<td>
					<select id="city"><option value="0">请选择城市</option></select>
				</td>
			</tr>
		</table>
	</body>
</html>

虽然很简单，但是有很多细节的地方，比如需要点击按钮之后，两个下拉列表都需要清空，所以要使用JQuery的empty函数

这里装载链表还是使用的json；只是需要将长度和数据分开封装就可以了

这里使用的是撰写的JSON工具类，可以直接使用jackson工具包来转化，response的MIME类型直接为json；接受的格式设置为json，就不用自己拼串了

其实jsckson拼串的结果和博主拼的差不多，不需要前面的len；因为可以直接调用数组的len---->思维有点固化，之前都没有想到可以直接调用数组的len；使用的LIst的size赋值给len

其他的多级的级联查询都是相同的原理，选择上一级，就会发送AJAX请求；其实可以就在页面一开始加载的时候就加载省份，这里将AJAX请求就在页面加载之后也会调用 ---- 开发的时候还可以将success的函数给提出来，在另外的部分直接书写，便于维护🎄

码农C风

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web---JQuery收尾【JQuery中ajax技术】

Query内容管理JQuery函数removeemptyappendhtmleachJQuery事件 onJQuery中的AJAX$.ajax()$.get()$.post()JQuery案例 --- 级联查询Javaweb — 新的一年，立flag，技术突破,广度马上就够了，现在弄深度JQuery函数、ajax函数JQuery真的还是大大简化了JS代码的编写，主要区分对象就是$符号，新year刚好会上java程序设计课，到时候可以再夯实一下基础了，重点是看源码还有注解JQuery函数注
复制链接

扫一扫