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)//请求失败时

})

相关推荐
Leyla6 分钟前
【代码重构】好的重构与坏的重构
前端
影子落人间10 分钟前
已解决npm ERR! request to https://registry.npm.taobao.org/@vant%2farea-data failed
前端·npm·node.js
世俗ˊ34 分钟前
CSS入门笔记
前端·css·笔记
子非鱼92134 分钟前
【前端】ES6：Set与Map
前端·javascript·es6
6230_39 分钟前
git使用“保姆级”教程1——简介及配置项设置
前端·git·学习·html·web3·学习方法·改行学it
想退休的搬砖人1 小时前
vue选项式写法项目案例(购物车)
前端·javascript·vue.js
加勒比海涛1 小时前
HTML 揭秘：HTML 编码快速入门
前端·html
啥子花道1 小时前
Vue3.4 中 v-model 双向数据绑定新玩法详解
前端·javascript·vue.js
麒麟而非淇淋1 小时前
AJAX 入门 day3
前端·javascript·ajax
茶茶只知道学习1 小时前
通过鼠标移动来调整两个盒子的宽度(响应式)
前端·javascript·css
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04苍穹外卖面试总结05yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07Coze扣子平台完整体验和实践（附国内和国际版对比）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10借助 LocatorJS ，快速定位本地代码