Ajax进阶篇(二)——走进jQuery的世界

逃离我推掉我的手 2021-12-14 04:53 275阅读 0赞

之前我们在学习Ajax的时候，都是使用的原生JavaScript来完成交互工作，可能要写很多的代码，为了简化代码，提高效率，我们还要学习一下jQuery这个框架。

# jQuery概述 #

## jQuery是什么？ ##

jQuery是JavaScript的一个框架集合，并不是什么新的技术。

## jQuery有什么用？ ##

jQuery是一个JavaScript的框架，它的宗旨是：Write Less, Do More，即写更少的代码，完成更多的工作。平常我们如果使用Ajax来完成交互工作，可能要写很多代码，并且代码重复性比较高。那么能不能让代码写的少一点，重复性低一点呢，jQuery做的就是这个事。

# jQuery怎么用？ #

## 使用jQuery方式执行load方法 ##

要想使用jQuery，必须得先添加它的依赖。我们可在jsp页面中使用如下代码导入jQuery的支持：

虽说本小节主要教大家如何使用jQuery方式执行load方法，但是大家要明白load方法很少用，其语法格式为：`$("#元素id").load(url地址);`。下面，我会举一个例子来演示。  
首先，创建一个动态web项目，例如AjaxProject，然后在该项目的WebContent目录下新建一个jsp页面——demo01.jsp，其内容如下：

为了演示如何使用jQuery方式执行load方法，demo01.jsp页面的内容要修改为：

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; 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"> function load() { //$("#text01")等同于document.getElementById("text01"); $("#text01").load("/AjaxProject/DemoServlet02", function(responseText, statusTXT, xhr) { //alert("结果：" + responseText); //找到id为text01的元素，设置它的value属性值为responseText对应的值 $("#text01").val(responseText); }); } </script>
    </head>
    <body>
    	<h3><input type="button" onclick="load()" value="使用jQuery方式执行load方法" /></h3>
    	
    	<input type="text" id="text01" />
    </body>
    </html>

在早前，我们要使用Ajax去执行请求，需要写很多代码，请求数据回来后，要赋值显示，也是比较复杂。但是jQuery只要简单的几行代码即可。  
紧接着，我们就要编写服务器端响应请求的Servlet，于是在com.meimeixia.servlet包中编写一个DemoServlet02，其代码很简单，如下：

package com.meimeixia.servlet;
    
    import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    public class ServletDemo02 extends HttpServlet { 
    	
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    		System.out.println("收到了请求...");
    		
    		response.setContentType("text/html;charset=UTF-8");
    		response.getWriter().write("给你一份数据");
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    		doGet(request, response);
    	}
    
    }

最后，使用Google Chrome浏览器访问demo01.jsp页面，运行效果如下：  
![在这里插入图片描述][20190708090342281.gif]

## 使用jQuery演示get方法 ##

首先，要知道get方法的格式是：`$.get(URL, callback);`。然后在项目的WebContent目录下新建一个jsp页面——demo02.jsp，其内容如下：

为了演示如何使用jQuery方式执行get方法，demo02.jsp页面的内容要修改为：

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; 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"> //$.get(URL, callback); function get() { $.get("/AjaxProject/DemoServlet02", function(data, status) { //alert("结果是：" + data); //$("#div01").val();//val：用于设置元素里面有value属性的值 $("#div01").html(data);//<font></font> //$("#div01").text(data); }); } </script>
    </head>
    <body>
    	<input type="text" onclick="get()" value="使用jQuery演示get方法" />
    	
    	<div id="div01" style="width: 100px; height: 100px; border: 1px solid blue;">
    		
    	</div>
    </body>
    </html>

以上请求不带任何参数，如果需要带上参数的话与平常的get请求参数传递一样，类似下面这样：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70]  
如果想要获取服务器反馈的数据，需要在get方法里面在加一个参数，给定一个方法即可。服务器响应后，会执行该方法。注意，方法里面的参数格式固定（data, status）。data代表服务器响应过来的数据，status代表这次请求的响应状态码。  
最后，使用Google Chrome浏览器访问demo02.jsp页面，运行效果如下：  
![在这里插入图片描述][20190708090404399.gif]

## 使用jQuery演示post方法 ##

首先，要知道post方法的格式是：`$.post(URL, data, callback);`。然后在项目的WebContent目录下新建一个jsp页面——demo03.jsp，其内容如下：

为了演示如何使用jQuery方式执行post方法，demo03.jsp页面的内容要修改为：

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; 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"> function post() { $.post("/AjaxProject/DemoServlet02", { name:"zhangsan", age:18},function(data, status) { //alert("回来数据了：" + data); //想要放数据到div里面去，要先找到div $("#div01").html(data); }); } </script>
    </head>
    <body>
    	<input type="text" onclick="post()" value="使用jQuery演示post方法" />
    	
    	<div id="div01" style="width: 100px; height: 100px; border: 1px solid blue;">
    		
    	</div>
    </body>
    </html>

以上发送的post请求，不仅带上了参数，而且获取了服务器端响应回来的数据。此时，为了接收传送过来的数据，服务器端的DemoServlet02可以修改为：

package com.meimeixia.servlet;
    
    import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    public class DemoServlet02 extends HttpServlet { 
    	
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    		String name = request.getParameter("name");
    		int age = Integer.parseInt(request.getParameter("age"));
    		System.out.println("收到了请求...name = " + name + ", age = " + age);
    		
    		response.setContentType("text/html;charset=UTF-8");
    		response.getWriter().write("给你一份数据");
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    		doGet(request, response);
    	}
    
    }

最后，使用Google Chrome浏览器访问demo03.jsp页面，我们不仅能看到如下运行效果，而且在Eclipse的控制台中也可以看到post请求带过来的参数。  
![在这里插入图片描述][20190708090418766.gif]

# jQuery中的赋值 #

本小节总结一下jQuery中的赋值操作。

*  val(“xxx”)：针对带有value属性的元素进行赋值，其实就是给该元素的value属性赋值；
 *  html(“xxx”)：针对某一个元素，可以使用元素左右包括起来一段值的元素赋值 。如`<div></div>`，并且该方法可以写html代码；
 *  text(“xxx”)：该方法针对那些可以在两个标签中写值的赋值工作。如`<div>aaaaaaaaaaaaaa</div>` 。其实它和html()没有什么区别，如果想针对这分数据做html样式处理，那么只能用html()。

[20190708090342281.gif]: /images/20211213/79a94dd8743a4495a0eb7f6e6d958372.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70]: /images/20211213/9d959a4104d1440bad68df5ef9a528c8.png
[20190708090404399.gif]: /images/20211213/deb75c74783d4cbbbee92a6090ea0b21.png
[20190708090418766.gif]: /images/20211213/2b7672a7736c4b50b3e5147c4c98aa25.png