ajax使用案例

孤独斗士2024-04-24 11:57

1.index.jsp页面：

下边是采用JavaScript的ajax发出异步请求。

html 复制代码 
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String basePath = request.getScheme()+"://" +
            request.getServerName() + ":" + request.getServerPort() +
            request.getContextPath();
%>

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<h2>Hello World!</h2>

    <form>
        <label for="acc"> </label><input type="text" name="account" id="acc"> <br/>
        <div id="div1"></div>
    </form>


<script type="application/javascript">

    //function  test() { //页面加载后执行function
        var checkButton = document.getElementById("acc");
        //给checkButton绑定onclick
        //checkButton.onclick = function () {
        checkButton.onblur = function () {

            //1. 创建XMLHttpRequest对象(!!!) [ajax引擎对象]
            var xhr = new XMLHttpRequest();
            //   获取用户填写的用户名
            var uname = document.getElementById("acc").value;

            //2. 准备发送指定数据 open, send
            //老师解读
            //(1)"GET" 请求方式可以 GET/POST
            //(2)"/ajax/checkUserServlet?username=" + uname 就是 url
            //(3)true , 表示异步发送
            xhr.open("GET", "<%=basePath%>/verifyAcc?account=" + uname, true);

            //老师说明，在send函数调用前，给XMLHttpRequest 绑定一个事件onreadystatechange
            //该事件表示，可以去指定一个函数，当数据变化，会触发onreadystatechange
            // 每当 xhr对象readyState 改变时，就会触发 onreadystatechange 事件
            xhr.onreadystatechange = function () {
                //如果请求已完成，且响应已就绪, 并且状态码是200
                if (xhr.readyState == 4 && xhr.status == 200) {
                    //把返回的jon数据,显示在div
                    //document.getElementById("div1").innerHTML = xhr.responseText;

                    //console.log("xhr=", xhr)
                    var responseText = xhr.responseText;
                    //console.log("返回的信息=" + responseText);
                    //if (responseText != "") {
                    if (responseText === "f") {
                        //document.getElementById("div1").value = "用户名不可用"
                        document.getElementById("div1").innerHTML = "用户名不可用"
                    } else {
                        //document.getElementById("div1").value = "用户名可用"
                        document.getElementById("div1").innerHTML = "用户名可用"
                    }
                }
            }

            //3. 真正的发送ajax请求[http请求]
            // 老师再说明如果你POST 请求，再send("发送的数据")
            xhr.send();

        };
    //}
</script>
</body>
</html>


<!--
下发代码：
//1. 创建XMLHttpRequest对象(!!!) [ajax引擎对象]
var xhr = new XMLHttpRequest();
//   获取用户填写的用户名
var uname = document.getElementById("acc").value;

//2. 准备发送指定数据 open, send
//老师解读
//(1)"GET" 请求方式可以 GET/POST
//(2)"/ajax/checkUserServlet?username=" + uname 就是 url
//(3)true , 表示异步发送
xhr.open("GET", "<%=basePath%>/verifyAcc?account=" + uname, true);

//老师说明，在send函数调用前，给XMLHttpRequest 绑定一个事件onreadystatechange
//该事件表示，可以去指定一个函数，当数据变化，会触发onreadystatechange
// 每当 xhr对象readyState 改变时，就会触发 onreadystatechange 事件
xhr.onreadystatechange = function () {
    //如果请求已完成，且响应已就绪, 并且状态码是200
    if (xhr.readyState == 4 && xhr.status == 200) {

    }
}

//3. 真正的发送ajax请求[http请求]
// 老师再说明如果你POST 请求，再send("发送的数据")
xhr.send();

-->

2.AjaxController.java

java 复制代码 
package zyq.controller;

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

@Controller
public class AjaxController {

    @RequestMapping("/verifyAcc")
    @ResponseBody
    public String testAcc(String account){
        System.out.println(account);
        if("zs".equalsIgnoreCase(account)){
            return "f";
        }else{
            return "t";
        }
    }

}

其他配置文件：

3.applicationContext.xml

XML 复制代码 
<?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:p="http://www.springframework.org/schema/p"
	   xmlns:aop="http://www.springframework.org/schema/aop"
	   xmlns:mvc="http://www.springframework.org/schema/mvc"
	   xmlns:util="http://www.springframework.org/schema/util"
	   xmlns:context="http://www.springframework.org/schema/context"
	xmlns:jee="http://www.springframework.org/schema/jee"
	xsi:schemaLocation="    
        http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd  
        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/jee http://www.springframework.org/schema/jee/spring-jee.xsd
		http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd
		http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-3.2.xsd">
 

	<context:component-scan base-package="zyq"/>
	<mvc:annotation-driven/>


	<!--   浏览器的地址中写"/static/"，最终会访问项目中的/static/文件夹	-->
	<!--   浏览器的地址中写"/static/"，最终会访问项目中的/static/文件夹  -->
	<!--设置此静态资源配置后，views中的网页可以直接访问-->
	<mvc:resources mapping="/static/" location="/static/"/>
	<mvc:default-servlet-handler/>

	<!-- 读取db.properties -->
	<!--<util:properties id="dbConfig"  location="classpath:db.properties"/>-->

	<!-- 2.配置数据源(采用dbcp连接池) -->
	<bean id="ds"
		  class="org.apache.commons.dbcp.BasicDataSource">
		<property name="url" value="jdbc:mysql://localhost:3306/test?characterEncoding=utf-8&amp;serverTimezone=GMT%2B8" />
		<property name="driverClassName" value="com.mysql.cj.jdbc.Driver" />
		<property name="username" value="root" />
		<property name="password" value="root" />
		<property name="initialSize" value="2" />
		<property name="maxActive" value="10" />
	</bean>

	<!-- 3.配置SqlSessionFactoryBean -->
	<bean class="org.mybatis.spring.SqlSessionFactoryBean">
		<!-- 指定数据源 -->
		<property name="dataSource" ref="ds" />
	</bean>

	<!-- 4.配置MapperScannerConfigurer -->
	<!--<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">-->
		<!-- 接口文件在哪里 -->
		<!--<property name="basePackage" value="zyq.dao" />
	</bean>-->


</beans>

4.web.xml:

XML 复制代码 
  <servlet>
    <servlet-name>mvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:applicationContext.xml</param-value>
      <!--  注意：classpath： 和springmvc.xml之间不能有空格  -->
    </init-param>
    <!--  load-on-startup：值为0或者大于0时，表示项目启动时，就加载DispatcherServlet  -->
    <load-on-startup>1</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>mvc</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

5.pom.xml:

XML 复制代码 
<dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.0.2.RELEASE</version>
        </dependency>
        <!--  springAOP框架依赖  -->
        <dependency>
            <groupId>org.aspectj</groupId>
            <artifactId>aspectjweaver</artifactId>
            <version>1.9.2</version>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.aspectj</groupId>
            <artifactId>aspectjrt</artifactId>
            <version>1.9.2</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aspects</artifactId>
            <version>5.0.2.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.38</version>
        </dependency>
        <dependency>
            <groupId>commons-logging</groupId>
            <artifactId>commons-logging</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>
        <!--<dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>3.8.1</version>
            <scope>test</scope>
        </dependency>-->


        <!-- MyBatis 依赖 -->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.3.1</version>
        </dependency>

        <dependency>
            <groupId>commons-dbcp</groupId>
            <artifactId>commons-dbcp</artifactId>
            <version>1.2.2</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.apache.commons/commons-dbcp2 -->
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-dbcp2</artifactId>
            <version>2.5.0</version>
        </dependency>

        <!-- mybatis和spring集成依赖 -->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>1.2.4</version>
        </dependency>

        <!-- Spring JDBC -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>5.0.2.RELEASE</version>
        </dependency>

        <!-- 阿里的连接池 -->
        <!--<dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.12</version>
        </dependency>-->

        <!--tomcat 10之后的版本这样导入servlet-api.jar-->
        <dependency>
            <groupId>jakarta.servlet</groupId>
            <artifactId>jakarta.servlet-api</artifactId>
            <version>5.0.0</version>
            <scope>provided</scope>
        </dependency>

        <!--tomcat 10之前的版本这样导入servlet-api.jar-->
        <!--        <dependency>
                    <groupId>javax.servlet</groupId>
                    <artifactId>javax.servlet-api</artifactId>
                    <version>4.0.1</version>
                </dependency>-->

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.3</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.2</version>
        </dependency>




        <!--jstl-->
        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>

        <dependency>
            <groupId>org.apache.taglibs</groupId>
            <artifactId>taglibs-standard-spec</artifactId>
            <version>1.2.5</version>
        </dependency>
        <dependency>
            <groupId>org.apache.taglibs</groupId>
            <artifactId>taglibs-standard-impl</artifactId>
            <version>1.2.5</version>
        </dependency>


        <!--4月15添加的依赖-->
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20160212</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.7.2</version>
        </dependency>

        <!--  `json-core`是Jackson的一个模块，但在Jackson 2.x版本中，这个模块已经被重命名为jackson-databind。  -->
        <!--<dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>json-core</artifactId>
            <version>2.7.2</version>
        </dependency>-->   <!--json-core用jackson-databind替换了-->
        <!--<dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.7.2</version>
        </dependency>-->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.5</version>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-nop</artifactId>
            <version>1.7.2</version>
        </dependency>


        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-tx</artifactId>
            <version>5.0.2.RELEASE</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/org.springframework/spring-expression -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-expression</artifactId>
            <version>5.0.2.RELEASE</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.springframework/spring-beans -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-beans</artifactId>
            <version>5.0.2.RELEASE</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.springframework/spring-aop -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aop</artifactId>
            <version>5.0.2.RELEASE</version>
        </dependency>

        <!--slf4j-->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-log4j12</artifactId>
            <version>1.7.22</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
            <version>1.7.22</version>
        </dependency>
        <dependency>
            <groupId>ognl</groupId>
            <artifactId>ognl</artifactId>
            <version>3.1.12</version>
        </dependency>
        <dependency>
            <groupId>org.apache.logging.log4j</groupId>
            <artifactId>log4j-core</artifactId>
            <version>2.3</version>
        </dependency>
        <dependency>
            <groupId>org.apache.logging.log4j</groupId>
            <artifactId>log4j-api</artifactId>
            <version>2.3</version>
        </dependency>

        <dependency>
            <groupId>org.javassist</groupId>
            <artifactId>javassist</artifactId>
            <version>3.21.0-GA</version>
        </dependency>

        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-pool2</artifactId>
            <version>2.4.1</version>
        </dependency>

        <!--<dependency>
            <groupId>cglib</groupId>
            <artifactId>cglib</artifactId>
            <version>3.2.4</version>
        </dependency>-->

        <dependency>
            <groupId>org.apache.ant</groupId>
            <artifactId>ant-launcher</artifactId>
            <version>1.9.6</version>
        </dependency>
        <dependency>
            <groupId>org.ow2.asm</groupId>
            <artifactId>asm</artifactId>
            <version>5.1</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.data</groupId>
            <artifactId>spring-data-jpa</artifactId>
            <version>1.9.4.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-taglibs</artifactId>
            <version>5.0.2.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>org.apache.xbean</groupId>
            <artifactId>xbean-reflect</artifactId>
            <version>3.4</version>
        </dependency>

        <dependency>
            <groupId>com.google.collections</groupId>
            <artifactId>google-collections</artifactId>
            <version>1.0</version>
        </dependency>

6.改进ajax:

将index.jsp中的ajax请求方式改为jQuery发请求

html 复制代码 
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String basePath = request.getScheme()+"://" +
            request.getServerName() + ":" + request.getServerPort() +
            request.getContextPath();
%>

<html>
<head>
    <meta charset="utf-8">
    <%--<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>--%>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

    <form>
        <label for="acc">账号：</label><input type="text" name="account" id="acc"> <br/>
        <div id="div1"></div>
    </form>


<script type="application/javascript">
    var checkButton = document.getElementById("acc");
    //给checkButton绑定onclick
    //checkButton.onclick = function () {
    checkButton.onblur = function () {
        var uname = document.getElementById("acc").value;
        $.ajax({
            async: true,
            url: "<%=basePath%>/verifyAcc?account="+uname,
            contentType: 'application/x-www-form-urlencoded;charset=utf-8',
            type: 'GET',
            //data : { "account" : uname },
            dataType: 'text',
            success: successCallback,
            error: errorCallback
        });
    };


    function successCallback (json, status) {
        if (json === "f") {
            document.getElementById("div1").innerHTML = "用户名不可用"
            document.getElementById("div1").style.color="red";
        } else {
            document.getElementById("div1").innerHTML = "用户名可用"
        }
    }

    function errorCallback(xhr, status){
        console.log('出问题了！'+status);
    }
</script>
</body>
</html>

提示：

下发代码：

$.ajax({

async: true,

url: '/url/to/json',

type: 'GET',

data : { id : 123 },

dataType: 'json',

timeout: 30000,

success: successCallback,

error: errorCallback,

complete: completeCallback,

statusCode: {

404: handler404,

500: handler500

}

})

function successCallback(json) {

$('<h1/>').text(json.title).appendTo('body');

}

function errorCallback(xhr, status){

console.log('出问题了！');

}

function completeCallback(xhr, status){

console.log('Ajax请求已结束。');

}

$.ajax({

url：请求地址

type:"get | post | put | delete " 默认是get,

data:请求参数 {"id":"123","pwd":"123456"},

dataType:请求数据类型"html | text | json | xml | script | jsonp ",

success:function(data,dataTextStatus,jqxhr){ },//请求成功时error:function(jqxhr,textStatus,error)//请求失败时

})

相关推荐
崔庆才丨静觅3 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60614 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了4 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅4 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅4 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅5 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment5 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅5 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊5 小时前
jwt介绍
前端
爱敲代码的小鱼5 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示