Ajax的使用(jquery的下载)

简介: 这篇文章是关于Ajax学习笔记的分享,包括JQuery的下载方式、Ajax的主要参数说明,以及如何在网页中使用Ajax进行异步请求的示例代码。

Ajax的使用(jquery的下载)

一个有始有终的人。

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>
相关文章
N..
|
7月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
69 1
|
7月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
88 0
|
7月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
159 0
|
7月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
6月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
50 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
6月前
|
JavaScript 前端开发 开发者
jQuery 下载与快速入门指南
jQuery 下载与快速入门指南
295 0
|
4月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
35 0
|
6月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
7月前
|
前端开发 JavaScript PHP
【PHP开发专栏】jQuery与PHP实现Ajax通信
【4月更文挑战第30天】本文介绍了使用jQuery和PHP实现Ajax通信的步骤。首先,讲解了Ajax的基础和jQuery简化Ajax操作的概念。接着,展示了如何使用jQuery的`$.get()`、`$.post()`和`$.ajax()`方法发送GET和POST请求,以及如何控制请求细节。在PHP端,讨论了接收和响应Ajax请求的方法,包括处理数据、设置响应类型和错误处理。结合jQuery与PHP,开发者能实现高效、无缝的异步数据传输,提升Web应用的用户体验。
131 1
|
7月前
|
JSON 前端开发 JavaScript
jQuery ajax读取本地json文件 三级联动下拉框
jQuery ajax读取本地json文件 三级联动下拉框