Ajax的使用（jquery的下载）

程序猿_小郑.

已于 2023-11-27 15:24:55 修改

阅读量376

点赞数 1

文章标签： jquery

于 2021-05-08 22:12:03 首次发布

本文链接：https://blog.csdn.net/weixin_43304253/article/details/116545514

版权

本文详细介绍了如何使用JQuery进行Ajax操作，从JQuery的下载到Ajax的基本使用，包括参数解释、引入脚本库、IDEA中处理静态资源以及示例代码展示。通过实例讲解了在Spring MVC环境中实现Ajax请求和响应，帮助读者掌握Ajax与JQuery结合进行前后端交互的技术。

摘要由CSDN通过智能技术生成

我 | 在这里

🕵️ 读书 | 长沙 ⭐软件工程 ⭐ 本科
🏠 工作 | 广州 ⭐ Java 全栈开发（软件工程师）
🎃 爱好 | 研究技术、旅游、阅读、运动、喜欢流行歌曲
✈️已经旅游的地点 | 新疆-乌鲁木齐、新疆-吐鲁番、广东-广州、广东-佛山、湖南-长沙、湖南-张家界、山西、上海、郑州等。老家河南嘞
🏷️ 标签 | 男自律狂人目标明确责任心强
✈️公众号 | 热爱技术的小郑 。文章底部有个人公众号二维码。回复 Java全套视频教程 或 前端全套视频教程 即可获取 300G+ 教程资料及项目实战案例
🚀 邮箱 | 2977429967@qq.com
✈️ GitHub传送门开源项目 + 实战Demo

为何而写？
🍍 好记性不如烂笔头，记录学习的相关知识、项目 BUG 解决
🍇 复盘总结，加深记忆，方便自己查看
🍑 分享知识，咱就是这么乐于助人、专注填坑20年、哈哈哈哈

目标描述
🏆 没有伞的孩子、只能用力奔跑。向着架构师的方向努力、做一个有始有终的人。

Ajax学习笔记（jquery的下载）

JQuery的官网下载
地址：http://jquery.com

右上角的"Download JQuery"

三个可供下载的文件：
Production JQuery版本：优化压缩后的版本，具有体积小，主要用于部署网站时使用
Development JQuery版本：未压缩版本有266kb的大小，一般在网站建设时使用
JQuery map文件：一般不需要

最好将三个都下载，方便在需要时切换。

几个主要参数

URL：请求地址
data：发送的数据
async：是否异步
success：成功之后的回调函数
error：失败之后的回调函数

引用jQuery脚本库

<script src="JQuery/jquery-3.3.1.js"></script>

在IDEA中，需要导入静态资源约束。否则找不到js文件。报$不存在

   <!--静态资源过滤器-->
    <mvc:default-servlet-handler/>

1、在网页中引入该js文件
在这里插入图片描述

<script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.js"></script>

例子ajax的简单使用

页面

<%--
  Created by IntelliJ IDEA.
  User: ff
  Date: 2021/8/1
  Time: 12:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.js"></script>
  </head>
  <body>

  <script type="text/javascript">
    function a(){
      $.post({
        url:"${pageContext.request.contextPath}/ajax/a2",
        data:{"name":$("#name").val()},
        success:function (data){
          alert(data);
        }
      })
    }

  </script>
用户名:<input type="text" id="name" onblur="a()">
  </body>
</html>

controller

package com.zheng.controller;


import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Controller
@RequestMapping("/ajax")
public class AjaxController {

    @RequestMapping("/a2")
    public void ajax1(String name,HttpServletResponse response) throws IOException {
        if("zheng".equals(name)){
            response.getWriter().println("true");
        }else{
            response.getWriter().println("false");
        }
    }



}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <!--配置DispatchServlet；这个是springMVC的核心，请求分发器，前端控制器-->
    <servlet>
        <servlet-name>springMVC</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <!--里边的路径是编写的配置文件-->
            <param-value>classpath:springmvc-servlet.xml</param-value>
        </init-param>
        <!--启动级别-->
        <load-on-startup>1</load-on-startup>
    </servlet>


    <!--在springMVC中，/：代表匹配所有的请求，不包括jsp页面。/*：匹配所有的请求，包括jsp-->
    <servlet-mapping>
        <servlet-name>springMVC</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

</web-app>

springmvc核心配置文件

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"

       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/mvc
       http://www.springframework.org/schema/mvc/spring-mvc.xsd">


    <!--自动扫描包，让指定包下的注解生效，有ioc容器统一管理-->
    <context:component-scan base-package="com.zheng.controller"/>
    <!--静态资源过滤器-->
    <mvc:default-servlet-handler/>
    <mvc:annotation-driven/>


    <!--视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver">
        <!--前缀-->
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <!--后缀-->
        <property name="suffix" value=".jsp"/>
    </bean>
</beans>