Ajax & Jquery

最新推荐文章于 2024-03-13 07:00:00 发布

Fly_mx

最新推荐文章于 2024-03-13 07:00:00 发布

阅读量80

点赞数

分类专栏： Javaweb

本文链接：https://blog.csdn.net/weixin_40094312/article/details/84335919

版权

Javaweb 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Ajax：

1.使用CSS和XHTML来表示

2.使用DOM模型来交互和动态显示

3.使用XMLHttpRequest来和服务器进行异步通信

4.使用javascript来绑定和调用

作用：为了解决局部刷新的问题，保持其他部分不动，只刷新某些地方

数据请求 Get：

创建对象以及发送请求：

<script type="text/javascript">
function ajaxFunction(){
	   var xmlHttp;
	   try{ // Firefox, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
		   try{// Internet Explorer
		         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		      }
		    catch (e){
		      try{
		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		      }
		      catch (e){}
		      }
	    }

		return xmlHttp;
	 }
	//执行get请求
	function get(){
		//1.创建xmlhttprequest对象
		var request = ajaxFunction();
		//2.发送请求
		
		request.open("GET","DemoServlet01",true);
		request.send();
	}
</script>

如果发送请求的同时还想获取数据：

//执行get请求
	function get(){
		//1.创建xmlhttprequest对象
		var request = ajaxFunction();
		//2.发送请求
		request.open("GET","DemoServlet01?name=aa&age=18",true);
		//3.获取响应数据
		request.onreadystatechange = function(){
			//前半段表示已经能够正常处理，再判断状态码是否是200
			if(request.readyState == 4 && request.status == 200){
				//弹出响应的信息
				alert(request.responseText);
			}
		}
		request.send();
	}

数据请求post:

<script type="text/javascript">
	
	function ajaxFunction(){
	   var xmlHttp;
	   try{ // Firefox, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
		   try{// Internet Explorer
		         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		      }
		    catch (e){
		      try{
		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		      }
		      catch (e){}
		      }
	    }

		return xmlHttp;
	 }
	function post(){
		//1.创建对象
		var request = ajaxFunction();
		//2.发送请求
		request.open("POST","DemoServlet01",true);
		//request.send();不带数据
		//如果使用的是post方式带数据，那么这里要添加头，说明提交的数据类型是一个经过url编码的form表单数据
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		//带数据过去，在send方法里面写表单数据
		request.send("name=aobama&age=19");
	}
	
	
</script>

需要获取数据：

function post(){
		//1.创建对象
		var request = ajaxFunction();
		//2.发送请求
		request.open("POST","DemoServlet01",true);
		//request.send();不带数据
		//想获取服务器传送过来的数据，加一个状态的监听
		request.onreadystatechange = function(){
			if(request.readyState==4 && request.status == 200){
				alert("post:"+request.responseText);
			}
		}
		//如果使用的是post方式带数据，那么这里要添加头，说明提交的数据类型是一个经过url编码的form表单数据
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		//带数据过去，在send方法里面写表单数据
		request.send("name=aobama&age=19");
	}

Ajax校验用户名是否可用：

jsp页面显示：

function checkUserName() {
		//获取输入框的值
		var name = document.getElementById("name").value;
		//1.创建对象
		var request = ajaxFunction();
		//2.发送请求
		request.open("POST","CheckUserNameServlet",true);
		//注册状态改变监听，获取服务器传送过来的数据
		request.onreadystatechange = function(){
			if(request.readyState == 4 && request.status == 200){
				//alert(request.responseText);
				var data = request.responseText;
				if(data==1)
				{
					//alert("用户名已存在");
					document.getElementById("span01").innerHTML = "<font color='red'>用户名已存在!</font>"
				}	
				else
				{
					//alert("用户名未存在");
					document.getElementById("span01").innerHTML = "<font color='green'>用户名可用!</font>"
				}
			}
		}
		//如果使用的是post方式带数据，那么这里要添加头，说明提交的数据类型是一个经过url编码的form表单数据
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		request.send("name="+name);
	}

JQuery：

javascript 的代码框架

作用：简化代码，提高效率

load：

<h3><a href="" onclick="load()">使用JQuery执行load方法</a></h3>
有两次刷新，先走onClick的方法，取到数据回来之后，赋值显示。接着走href=""的路径，但是这个属性没有给值，所以会把当前的页面重新再刷新一次，所以导致看不见值
<!-- <h3><a href="" onclick="load()">使用JQuery执行load方法</a></h3> -->
<h3><input type="button" onclick="load()" value="使用JQuery执行load方法"></h3>
<input type="text" id="text01">


<script type="text/javascript">
	function load(){
		//$("#aaa").val("aaa");
		//$("#aaa").load("DemoServlet02");
		//$("#text01")---document.getElementById("text01");
		$("#text01").load("DemoServlet02",function(responseText,statusTXT,xhr){
			//alert("结果："+responseText);
			$("#text01").val(responseText);
		});
	}
</script>

Get：

<script type="text/javascript">
	function get(){
		$.get("DemoServlet02",function(data,status){
			//alert("结果是:"+data);
			//val用于设置元素里面有values的属性值
			$("#div01").html(data);//<font>
		});
	}
</script>

Post：

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
	function post(){
		$.post("DemoServlet02",{name:"zhangsan",age:18},function(data,status){
			//alert("回来数据了："+data);
			$("#div01").html(data);
			
		});
	}
</script>
<title>Insert title here</title>
</head>
<body>
	<input type="button" onclick="post()" value="使用JQuery演示post方法">
	<div id="div01" style="width:100px;height:100px;border:1px solid blue;"></div>
</body>

JQuery校验用户名：

<script type="text/javascript">
	function checkUserName(){
		//1.获取输入框的内容
		var name = $("#name").val();
		//2.发送请求
		$.post("CheckUserNameServlet",{name:name},function(data,status){
			if(data == 1){
				$("#span01").html("<font color='red'>用户名已被注册</font>");
			}
			else {
				$("#span01").html("<font color='green'>用户名可以使用</font>");
			}
		});
	}	
</script>

实现百度搜索提示：

JS请求：

//捕捉到键盘弹起的事件
//在文档准备就绪的时候，对某一个元素进行onkeyup事件监听
/*$(document).ready(function(){
	
})*/
$(function(){
	$("#word").keyup(function(){
	//alert("键盘谈起了...");
		//2.获取输入框的值
		var word = $(this).val();
		//alert(word);
		
		if(word == ""){
			$("#div01").hide();
		}
		else{
			//3.请求数据
			$.post("FindWordsServlet",{word:word},function(data,status){
				//alert(data);
				$("#div01").show();
				$("#div01").html(data);
			});
		}
		
	});
});

public class FindWordsServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		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);
			}
			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) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

list.jsp：

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

JQuery实现省市联动：

Servlet：

/**
 * Servlet implementation class CityServlet
 */
public class CityServlet extends HttpServlet {
	
	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.返回数据  ---> XStream 转化bean对象成xml
			XStream xStream = new XStream();
			//把id做成属性
			//xStream.useAttributeFor(CityBean.class, "id");
			//设置别名
			xStream.alias("city", CityBean.class);
			//转化一个对象成xml字符串
			String xml = xStream.toXML(list);
			//xStream.fromXML(file);//把xml转成一个javaBean对象
			// System.out.println("xml="+xml);
			//返回数据
			response.setContentType("text/xml;charset=utf-8");
			response.getWriter().write(xml);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

	}
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

city.js:

$(function(){
	//1.找到省份的元素
	$("#province").change(function(){
		//2.一旦里面的值发生了改变，那么就去请求该省份的城市数据
		//$("#province").val();
		var pid = $(this).val();
		$.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();
				//alert("id="+id+"---cname---"+cname);
				//$("#city").html("<option value='"+id+"'>"+cname);
				$("#city").append("<option value='"+id+"'>"+cname);
			});
		});
	});
});

city.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<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>
		<option value="1">广东</option>
		<option value="2">湖南</option>
		<option value="3">湖北</option>
		<option value="4">四川</option>
	</select>	
城市：
	<select name ="city" id = "city">
		<option value = "">-请选择-</option>
	</select>	
</body>
</html>

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

xml

json：阅读性更好、容量更小

使用JQuery实现省市联动（服务器json封装）：

servlet：

public class CityServlet02 extends HttpServlet {
	
	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);
			//System.out.println("json="+json);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

	}
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

city_json.js:

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

Fly_mx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax & Jquery

Ajax：1.使用CSS和XHTML来表示2.使用DOM模型来交互和动态显示3.使用XMLHttpRequest来和服务器进行异步通信4.使用javascript来绑定和调用作用：为了解决局部刷新的问题，保持其他部分不动，只刷新某些地方数据请求 Get：创建对象以及发送请求：&lt;script type="text/javascript"&gt;func...
复制链接

扫一扫