JQuery

最新推荐文章于 2023-05-23 11:56:06 发布

Bradia

最新推荐文章于 2023-05-23 11:56:06 发布

阅读量109

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43875648/article/details/88623147

本文围绕JQuery展开，介绍了load和get方法及赋值显示方式，阐述了用JQuery校验用户名的方法。还讲述了实现百度搜索提示的步骤，包括搭建环境、捕获键盘弹起等。此外，说明了使用JQuery实现省市联动的过程，提及服务器和客户端数据传输方式，重点介绍了json格式数据的应用。

JQuery

javascript的代码框架
简化代码，提高效率

load

<a href="" onclick="load()">使用JQuery执行load方法</a>

有两次刷新，  先走 onClick的方法，取到数据回来之后，赋值显示。 接着 走 href=""的路径，但是这个属性没有给值，所以会把当前的页面重新再刷新一次。所以导致看不见值。


//找到这个元素， 去执行加载的动作， 加载/day16/DemoServlet02 ， 得到的数据，赋值显示
$("#aaa").load("/day16/DemoServlet02" , function(responseText , statusTXT  , xhr) {
		//找到id为text01的元素， 设置它的value属性值为 responseText 对应的值
		$("#aaa").val(responseText);
	});

Get

$.get("/day16/DemoServlet02"  , function(data ,status) {
		$("#div01").text(data);
	});

赋值显示

val(“aa”);

只能放那些标签带有value属性

html(“aa”); —写html代码
text(“aa”);

其实没有什么区别，如果想针对这分数据做html样式处理，那么只能用html()

load & get

load

$("#元素id").load(url地址);

$("#div1").load(serlvet); —> 使用的get请求，回来赋值的时候，使用text（）;去赋值

get

语法格式： $.get(URL,callback);

  使用案例： $.get("/day16/DemoServlet02"  , function(data ,status) {
  	$("#div01").text(data);
  });

post

语法格式：$.post(URL,data,callback);

  function post() {
  	$.post("/day16/DemoServlet02", {name:"zhangsan",age:18},function(data,status) {
  		//想要放数据到div里面去。 --- 找到div
  		$("#div01").html(data);
  	});
  }

使用JQuery去实现校验用户名

	function checkUserName() {
		//1. 获取输入框的内容
		var name = $("#name").val();
		
		//2. 发送请求
		$.post("/day16/CheckUserNameServlet" , {name:name} , function(data , status){
			//alert(data);
			if(data == 1){//用户名存在
				//alert("用户名存在");
				$("#span01").html("<font color='red'>用户名已被注册</font>");
			}else{
				//alert("用户名可用");
				$("#span01").html("<font color='green'>用户名可以使用</font>");
			}
		} );
		//3. 输出响应的数据到页面上。
	}

实现百度搜索提示

搭建环境

定义首页

<center>
<h2>bang</h2>
	<input type="text" name="word" id="word" style="width: 600px ; height: 50px  ;font-size: 20px;">
	<input type="button" value="bang一下"  style="height: 55px ; width: 100px ; ">
	
	<div id="div01" style="position:relative; left : -54px; width: 600px; height: 200px ; border:  1px solid blue; display: none"></div>
</center>

定义数据库

捕获键盘弹起

$(function(){
$("#word").keyup(function() {
alert(“键盘弹起了…”);
})
});

JS请求

$(function(){
	$("#word").keyup(function() {
		//2。 获取输入框的值 
		//var word = $("#word").val();
		//this  对应就是执行这个方法的那个对象， $("#word")
		var word = $(this).val();

		if(word == ""){
			$("#div01").hide();
		}else{
			//3. 请求数据。
			$.post("find",{word:word} ,function(data , status){
				//alert(data);
				$("#div01").show();
				$("#div01").html(data);
			});
		}
		
	})
});

Servlet代码

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

		request.setCharacterEncoding("utf-8");
		try {
			//1. 先获取参数
			String word = request.getParameter("word");
			System.out.println("word="+word);
			
			//2. 让dao执行查询
			WordsDao dao = new WordsDaoImpl();
			List<WordBean> list = dao.findWords(word);
			
			for (WordBean wordBean : list) {
				System.out.println("==="+wordBean.toString());
			}
			
			request.setAttribute("list", list);
			
			//3. 返回数据
			response.setContentType("text/html;charset=utf-8");
			//response.getWriter().write("数据是：");
			request.getRequestDispatcher("list.jsp").forward(request, response);
		} catch (SQLException e) {
			e.printStackTrace();
		}
	
	}

list.jsp

	<%@ page language="java" contentType="text/html; charset=UTF-8"
	    pageEncoding="UTF-8"%>
	 <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
	<table style="width: 100%">
		<c:forEach items="${list }" var="wordBean">
			<tr>
				<td>${wordBean.words}</td>
			</tr>
		</c:forEach>
	</table>

使用JQuery实现省市联动

环境准备

准备数据库

准备页面

 <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
 	<script type="text/javascript" src="js/city.js"></script>
 	</head>
 	<body>
 	省份: <select name="province" id ="province">
 			<option value="" >-请选择 -
 			<option value="1" >广东
 			<option value="2" >湖南
 			<option value="3" >湖北
 			<option value="4" >四川
 		</select>
 	城市: 
 		<select name="city" id="city">
 			<option value="" >-请选择 -
 		</select>
 	</body>

XStream的使用

	//3. 返回数据。手动拼  ---> XStream  转化 bean对象成 xml
		XStream xStream = new XStream();
		
		//想把id做成属性
		xStream.useAttributeFor(CityBean.class, "id");
		
		//设置别名
		xStream.alias("city", CityBean.class);
		
		//转化一个对象成xml字符串
		String xml = xStream.toXML(list);

JS代码

	$(function() {
	//1。找到省份的元素
	$("#province").change(function() {
		//2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
		//$("#province").varl();
		var pid = $(this).val();
		
		/*<list>
			<city>
				<id>1<id>
				<pid>1</pid>
				<cname>深圳</cname>
			</city>
			<city >
				<id>2<id>
				<pid>1</pid>
				<cname>东莞</cname>
			</city>
		</list>*/
		
		$.post( "CityServlet",{pid:pid} ,function(data,status){
			//alert("回来数据了:"+data);
			
			//先清空以前的值：
			$("#city").html("<option value='' >-请选择-")
			//遍历： 
			//从data数据里面找出所有的city  ， 然后遍历所有的city。
			//遍历一个city，就执行一次function方法
			$(data).find("city").each(function() {
				
				//遍历出来的每一个city，取它的孩子。 id , cname
				var id = $(this).children("id").text();
				var cname = $(this).children("cname").text();
				
				$("#city").append("<option value='"+id+"' >"+cname)
			});
		} );
		
	});
});

服务器和客户端数据传输的方式

xml

1 1 深圳 2 1 东莞

json

阅读性更好、容量更小。

{“name”:“aaa” , “age”:19}

  把javaBean  转化成 json数据

  //3. 把list ---> json数据
  	//JSONArray ---> 变成数组 ， 集合  []
  	//JSONObject ---> 变成简单的数据  { name : zhangsan , age:18}
  	
  	JSONArray jsonArray = JSONArray.fromObject(list);
  	String json = jsonArray.toString();

使用json格式数据显示省市联动效果

serlvet代码：

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

	try {
		//1. 获取参数
		int pid = Integer.parseInt(request.getParameter("pid"));
		
		//2 找出所有的城市
		CityDao dao = new CityDaoImpl();
		List<CityBean> list = dao.findCity(pid);
		
		//3. 把list ---> json数据
		//JSONArray ---> 变成数组 ， 集合  []
		//JSONObject ---> 变成简单的数据  { name : zhangsan , age:18}
		
		JSONArray jsonArray = JSONArray.fromObject(list);
		String json = jsonArray.toString();


		response.setContentType("text/html;charset=utf-8");
		response.getWriter().write(json);


	} catch (SQLException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	};
}



js代码


	$(function() {
		//1。找到省份的元素
		$("#province").change(function() {
			//2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
			//$("#province").varl();
			var pid = $(this).val();
			
			/*[
			    {
			        "cname": "深圳",
			        "id": 1,
			        "pid": 1
			    },
			    {
			        "cname": "东莞",
			        "id": 2,
			        "pid": 1
			    }
			    ...
			]*/
			$.post( "CityServlet02",{pid:pid} ,function(data,status){
				
				//先清空
				$("#city").html("<option value='' >-请选择-");
				//再遍历，追加
				$(data).each(function(index , c) {
					$("#city").append("<option value='"+c.id+"' >"+c.cname)
				});
			},"json" );
			
		});
	});