本文共 3957 字，大约阅读时间需要 13 分钟。

之前我们在学习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，其内容如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>
   	
		

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

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>
   	
		

在早前，我们要使用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页面，运行效果如下：

使用jQuery演示get方法

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

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>
   			
   
			
   

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

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>
   			
   
			
   

以上请求不带任何参数，如果需要带上参数的话与平常的get请求参数传递一样，类似下面这样：

如果想要获取服务器反馈的数据，需要在get方法里面在加一个参数，给定一个方法即可。服务器响应后，会执行该方法。注意，方法里面的参数格式固定（data, status）。data代表服务器响应过来的数据，status代表这次请求的响应状态码。 最后，使用Google Chrome浏览器访问demo02.jsp页面，运行效果如下：

使用jQuery演示post方法

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

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>
   			
   
			
   

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

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>
   			
   
			
   

以上发送的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请求带过来的参数。

jQuery中的赋值

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

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

转载地址：https://liayun.blog.csdn.net/article/details/95042737 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！