狂神ajax,Ajax 学习笔记 by狂神说
Ajax
AjAX=Asynchronous javaScript and XML(异步的javaScript和XML)。
Ajax不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术
C/S
增加B/S的体验性
B/S:未来的主流,并且会爆发式的持续增长;
H5+网页+客户端+手机端
使用JQuery需要先导入jQuery的js文件;
@Controller
@RequestMapping("/ajax")
public class AjaxController{
//第一种方式,服务器要返回一个字符串,直接使用response
@RequestMapping("/a1")
public void ajax(String name,HttpServletResponse response){
if("admin".equals(name)){
response.getWriter().print("true");
}else{
response.getWriter().print("false");
}
}
}
@RequestMapping("/a2")
@ResponseBody
public List ajax2(){
List list =new ArrayList<>();
User user1 =new User("豪",1,"男");
User user2=new User("豪",1,"男");
list.add(user1);
list.add(user2);
return list; //由于加了@ResponseBody注解,他会返回一个字符串
}
ajax 写法
function a1() {
//所有参数:
//url:待载入页面的URL地址,Json
//data:待发送Key/value参数
//success:载入成功时回调函数
//data:封装了服务器返回的数据
//status:状态
$.ajax({
url:"${pageContext.request.contextPath}/ajax/a1",
data:{"name":$("txtName").val()},
success:function (data,status) {
console.log(data)
console.log(status)
}
});
//将文本输入的值,
$("txtName").val();
// //发送给服务器,
// //接受服务器返回的数据
}
$(function(){
$("#btn").click(function(){
$.post("${pageContest.request.contextPath}/ajax/a2",function(data){
console.log(data);
var html="";
for(var i=0;i
html+="
"+
"
"+data[i].name+""+
"
"+data[i].age+""+
"
"+data[i].sex+""+
"
"
}
$("#content").html(html);
})
})
})
第三种
@RequestMapping("/a3")
@ResponseBody
public String ajax3(String name,String pwd){
String msg="";
if(name!=null){
if("admin".equals(name)){
msg="ok";
}else{
msg="用户名有误";
}
}
if(pwd != null){
if("123456".equals(pwd)){
msg="ok";
}else{
msg="密码输入有误";
}
}
return msg;
}
Title
function a1(){
$.post({
url:"${pageContext.request.contextPath}/ajax/a3",
data:{"name":$("#name").val()},
success:function(data){
if(data.toString()=='ok'){
//信息核对成功
$('#userInfo').css("color","green");
}else{
$("#userInfo").css("color","red");
}
$("#userInfo").html(data);
}
})
}
function a2(){
$.post("${pageContext.request.contextPath}/ajax/a3",{"pwd":$("pwd").val()},function(data){
if(data.toString()='ok'){//信息核对成功
$('#pwdInfo').css("color","green");
}else{
$('#pwdInfo').css("color","red");
}
$("#pwdInfo").html(data);
})
}
用户名:
密码:
Ajax 总结:
使用jQuery需要导入JQuery,使用Vue就导入Vue,两个都用,自己原生态实现
三步曲:
1.编写对应处理的Controller,返回消息或者字符串汇总json格式的数据
2.编写ajax请求
1.url: Controller 请求
2.data: 键值对
3 . SUCCESS: 回调函数
3.给Ajax绑定事件,点击click,失去焦点onblur,键盘弹起keyup
来源:https://www.cnblogs.com/small-hao/p/13190663.html
狂神ajax,Ajax 学习笔记 by狂神说相关推荐
- Docker基础03--Dockerfile详解与镜像发布--(狂神说docker学习笔记)
文章目录 1. Dockerfile介绍 2. Dockerfile指令说明 3. 制作Centos镜像 3.1 编写Dockerfile的文件 3.2 通过这个文件构建镜像(注意最后加个点!!!) ...
- CSS学习笔记(狂神-完整版)
CSS学习笔记(狂神-完整版) HTML + CSS + JavaScript 结构 + 表现 + 动作 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) ...
- 关于ajax的学习笔记
关于ajax的学习笔记 ajax介绍 AJAX 的使用 模板引擎 传统方法 art-template方法 原理(正则表达式) ajax技术的核心xhr 还在更新 ajax介绍 ajax 全名 asyn ...
- 狂神说 vue学习笔记
vue学习笔记 文章目录 vue学习笔记 一.第一个vue程序 1. 什么是MVVM 2. 为什么要使用MVVM 3.直接新建项目 4.导入vue.js 5.简单绑定元素 6 vue的声明周期 二.V ...
- 狂神说Java学习笔记 Java基础
目录 机器语言 第二代语言(汇编语言) 第三代语言 高级语言 Java特性和优势 JDK(Java Development Kit) JRE(Java Runtime Enviroment) JVM( ...
- B站狂神说JavaWeb学习笔记
JavaWeb学习笔记(根据b站狂神说java编写) 1.基本概念 1.1 前言 静态Web: 提供给所有人看数据不会发生变化! HTML,CSS 动态Web: 有数据交互,登录账号密码,网站访问人数 ...
- 狂神说MySQL学习笔记
支持一下狂神老师的学习平台:www.kuangStudy.com MySQL01:初识MySQL 为什么学习数据库 1.岗位技能需求 2.现在的世界,得数据者得天下 3.存储数据的方法 4.程序,网站 ...
- ajax datatype_JavaScript学习笔记(二十七) ajax及ajax封装
AJAX ajax 全名 async javascript and XML 是前后台交互的能力 也就是我们客户端给服务端发送消息的工具,以及接受响应的工具 是一个 默认异步 执行机制的功能 AJAX ...
- 如何快速入门Ajax(学习笔记)—— 原生ajax、jQuery、axios
如何快速入门Ajax 1. 服务器的基本概念 客户端与服务器 URL地址 网页中如何请求数据 资源的请求方式 2. 了解Ajax Ajax是什么 Ajax的应用场景 3. jQuery中的Ajax g ...
- 狂神说SpringMVC学习笔记
目录 P1.前言 1.回顾MVC 1.1.什么是MVC 1.2.Model1时代 1.3.Model2时代 1.4.回顾Servlet 2.什么是SpringMVC 2.1.概述 2.2.中心控制器 ...
最新文章
- FPGA中如何实现双边沿采样?
- mac中flutter配置
- windows下安装redis以及一些常规操作
- java 对象转json,java首字母小写,判断方法是否为javabean方法
- iOS GCD, 同步,异步,串行队列,并行队列,dispatch_group
- centos7 文件名中文乱码_解决Centos7下中文显示乱码
- 一家化纤工厂的数字化转型之路
- java asynchronize_Java 中synchronize函数的实例详解
- iPhone 12 Pro系列终于不怕弯了!
- 最全的CSS浏览器兼容整理
- MapXtreme绿色部署
- chrome浏览器js 导出excel
- 云课堂智慧职教计算机作业答案,云课堂智慧职教毛概作业答案
- MATLAB读取MIT心电信号
- RCC_APB2Periph_AFIO--复用IO时钟的使用
- 单元格内容分列多行_excel拆分单元格内容 excel单元格拆分多行
- js+Canvas 利用js 实现浏览器保存图片到本地
- PandoraBox Openwrt 上面设置DNS
- kkFileView优化PDF图片预览增加JPEG2000标准图片支持
- 大数据-NoSQL数据库:HBase【基于Zookeeper/HDFS的分布式、高并发、可扩展的NoSQL数据库;支持“十亿行”ד百万列”海量数据的实时随机读写;仅支持单表查询;不擅长数据分析】
热门文章
- 使用igvtools可视化测序深度分布
- 【Shior学习】subject和session
- win7此计算机无法加入家庭组,Win7系统无法加入家庭组问题的解决方法
- 人工智能应该用在这个地方!
- 英特尔服务器芯片组路线图,英特尔处理器路线图:14nm用到2021年 7nm再等3年
- 【cocos源码学习】解决cocos2d-x-4.0 Android Demo构建遇到的问题
- 037 《思考,快与慢》听后感
- 史玉柱自述:我是如何做游戏策划
- 游戏美术设计中,最难的角色人物如何设计才能吸睛?
- mysql error 1114_ERROR 1114 (HY000): The table is full