ajax使用案例

1.index.jsp页面:

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

<%@ 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() { //页面加载后执行functionvar 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 () {//如果请求已完成,且响应已就绪, 并且状态码是200if (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 () {//如果请求已完成,且响应已就绪, 并且状态码是200if (xhr.readyState == 4 && xhr.status == 200) {}
}//3. 真正的发送ajax请求[http请求]
// 老师再说明如果你POST 请求,再send("发送的数据")
xhr.send();-->

2.AjaxController.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")@ResponseBodypublic String testAcc(String account){System.out.println(account);if("zs".equalsIgnoreCase(account)){return "f";}else{return "t";}}}

其他配置文件:

3.applicationContext.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.xsdhttp://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsdhttp://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:

  <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:

<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发请求

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/827748.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【docker】拉取人大金仓KingbaseES数据库镜像速度很慢问题

作为一种新兴的虚拟化方式&#xff0c;Docker 跟传统的虚拟化方式相比具有众多的优势。 对于学习新技术、快速搭建实验环境等是很不错的选择。优势大致总结如下&#xff1a; 1.镜像拉取速度对比 速度前后对比&#xff0c;提升10倍不止&#xff0c;很快将镜像文件下载至本地。 …

探索设计模式的魅力:主从模式与AI大模型的结合-开启机器学习新纪元

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 ✨欢迎加入探索主从模式与AI大模型之旅✨ &#x1f31f;Hey, tech enthusiasts! 你是否还在追…

蓝桥杯:日期问题(我的绝望题)

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;每日一练 &#x1f337;追光的人&#xff0c;终会万丈光芒 目录 前言&#xff1a; &#x1f337;1.问题描述&#xff1a; 1.问题描述&#xff1a; 2.输入格式&#xff1a; 3.输出格式&#…

IP组播简介

定义 作为IP传输三种方式之一&#xff0c;IP组播通信指的是IP报文从一个源发出&#xff0c;被转发到一组特定的接收者。相较于传统的单播和广播&#xff0c;IP组播可以有效地节约网络带宽、降低网络负载&#xff0c;避免广播堵塞带来的诸如摄像头花屏&#xff0c;视频马赛克等…

【数据结构(邓俊辉)学习笔记】向量03——常规向量

文章目录 0.概述1.元素访问2.置乱器3.判等器与比较器4.无序查找4.1 判等器4.2 顺序查找4.3 实现4.4 复杂度 5. 插入5.1 算法实现5.2 复杂度分析 6. 删除6.1 区间删除6.2 单元删除6.3 复杂度 7. 唯一化7.1 实现7.2 正确性7.3 复杂度 8. 遍历8.1 实现8.2 复杂度 9. 总结 0.概述 …

Pycharm代码规范与代码格式化插件安装

给大家分享两个PyCharm编辑器的插件&#xff0c;分别是pylint与autopep8&#xff0c;主要用来提高我们在使用python进行自动化测试编写以及性能测试脚本编写过程中的代码质量、可读性与美观性。 pylint&#xff1a; ● 代码检查工具&#xff1a;它可以帮助检查代码中的错误、…

Java常见面试题总结

文章目录 1. 什么是线程和进程?2. 请简要描述线程与进程的关系,区别及优缺点&#xff1f;3. 什么是堆和方法区&#xff1f;4. 并发与并行的区别5. 同步和异步的区别6.为什么要使用多线程? 优点&#xff1f;&#xff08;重要&#xff09;7. 使用多线程可能带来什么问题?8. 如…

LT1931

这份文件是关于LT1931和LT1931A两款DC/DC转换器的详细技术手册&#xff0c;由凌特公司&#xff08;Linear Technology&#xff09;提供。以下是该文档的核心内容概要&#xff1a; 产品特点&#xff1a; 高功率转换器&#xff1a;LT1931/LT1931A是高功率SOT-23封装的电流模式负…

视频滚动字幕一键批量轻松添加,解锁高效字幕编辑,提升视频质量与观众体验

视频已成为我们获取信息、娱乐休闲的重要渠道。一部成功的视频作品&#xff0c;除了画面精美、音质清晰外&#xff0c;字幕的添加也是至关重要的一环。字幕不仅能增强视频的观感&#xff0c;还能提升信息的传达效率&#xff0c;让观众在享受视觉盛宴的同时&#xff0c;更加深入…

安装rancher时k3s exited with: exit status 1报错解决---针对于9系统

安装和配置步骤 安装 iptables 首先确保 iptables 软件包已安装在系统中。 加载 iptables 模块 手动加载需要的内核模块&#xff1a;执行 sudo modprobe iptable_nat 和 sudo modprobe iptable_filter。持久化加载这些模块&#xff1a;将模块名称添加到 /etc/modules-load.d/m…

vue项目使用百度地图

打开百度地图开放平台 百度地图开放平台 | 百度地图API SDK | 地图开发 在控制台新建应用 复制访问应用的ak 可修改地图样式 使用部分 <!-- 引入地图 --><div class"main-aside"><div id"b-map-container"></div></div> …

面试ssss

响应式布局 响应式布局是一种设计和开发网页的方法&#xff0c;使网页能够适应不同的设备和屏幕尺寸&#xff0c;提供更好的用户体验。它通过使用媒体查询&#xff08;Media Queries&#xff09;和弹性布局&#xff08;Flexbox&#xff09;等技术&#xff0c;根据设备的特性和…

设计模式- 组合模式(Composite)结构|原理|优缺点|场景|示例

​​​​​​​ 设计模式&#xff08;分类&#xff09; 设计模式&#xff08;六大原则&#xff09; 创建型&#xff08;5种&#xff09; 工厂方法 抽象工厂模式 单例模式 建造者模式 原型模式 结构型&#xff08;7种&…

leetcode941-Valid Mountain Array

题目 给定一个整数数组 arr&#xff0c;如果它是有效的山脉数组就返回 true&#xff0c;否则返回 false。 让我们回顾一下&#xff0c;如果 arr 满足下述条件&#xff0c;那么它是一个山脉数组&#xff1a; arr.length > 3 在 0 < i < arr.length - 1 条件下&#xf…

一个docker配置mysql主从服务器

这也就是因为穷&#xff0c;不然谁用一个docker配置主从&#xff0c;哈哈 既然成功了就记录下。过程挺折磨人的。 首先要保证你的电脑安装好了docker 为了保证docker当中主从能正常连网&#xff0c;现在docker里面创建一个网络环境 docker network create --driver bridge mysq…

面试八股——RabbitMQ

消息丢失问题 消息确认机制 生产者与MQ之间的消息确认&#xff1a; 当MQ成功接收消息后&#xff0c;会返回给生产者一个确认消息。如果在规定时间内生产者未收到确认消息&#xff0c;则任务消息发送失败。 MQ与消费者之间的消息确认&#xff1a; 当MQ成功接收消息后&#…

DeepFaceLab小白教程:视频换脸过程

合适那些人阅读&#xff1f; 适合从未使用过DeepFaceLab的群体。 如果你想基于DeepFaceLab完成一次视频换脸的操作&#xff0c;可以看本篇。 下载方式 GitHub https://github.com/iperov/DeepFaceLab 我是用motrix下载。 网盘 https://pan.baidu.com/share/init?surlO4…

鸿蒙(HarmonyOS)性能优化实战-Swiper高性能开发

背景 在应用开发中&#xff0c;Swiper 组件常用于翻页场景&#xff0c;比如&#xff1a;桌面、图库等应用。Swiper 组件滑动切换页面时&#xff0c;基于按需加载原则通常会在下一个页面将要显示时才对该页面进行加载和布局绘制&#xff0c;这个过程包括&#xff1a; 如果该页面…

nest使用swagger文档

OpenAPI(Swagger)规范是一种用于描述 RESTful API 的强大定义格式。 Nest 提供了一个专用模块来使用它。 安装 npm安装 npm install --save nestjs/swagger swagger-ui-expressyarn 安装 yarn add nestjs/swagger swagger-ui-express引入 使用 SwaggerModule 类初始化 Swa…

怎样实现由.ui文件生成的.py文件的逻辑分离?

使用Qt5实现由PyQtDesigner生成的.ui.py文件的逻辑分离的过程可以使用以下步骤&#xff1a; 将通过PyQtDesigner生成的.ui文件转换为.py文件。可以使用命令行工具pyuic5来实现这一步骤。运行命令pyuic5 input.ui -o output.py&#xff0c;其中input.ui是原始的.ui文件的路径&am…