AJAX（表单验证）/JSON之一
--------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/**
* 异步通信
*/
function demo01(){
var xhr = new XMLHttpRequest();
//监听 xhr对象的状态改变事件
//在通信组件状态改变时候，会自动回调 事件函数
xhr.onreadystatechange=function (){
//readyState==4 表示请求处理完成以后
//status==200 表示返回结果是正常的
if(xhr.readyState==4 && xhr.status==200){
var data = xhr.responseText;
console.log(data);
}
}
xhr.open("get", "index.html", true);
xhr.send();
//xhr通信是异步的，由send()发起的子线程进行通信，
//在通信没有结束之前，responseText的内容一直是空的！
var body = xhr.responseText;
console.log(body);//输出是 空的！！！
} /**
* 局部更新
*/
function demo02(){
var p = document.getElementById("msg");
p.innerHTML="这就是更新了！";
} /**
* 异步通信+局部更新
*/
function demo03(){
var xhr = new XMLHttpRequest();
//注册通信成功事件, 在通信成功以后执行
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
var msg = xhr.responseText;
//局部刷新
var p = document
.getElementById("message");
p.innerHTML=msg;
}
};
xhr.open("get", "msg.txt", true);
xhr.send();
}
</script>
</head>
<body>
<h1>Ajax 演示</h1>
<input type="button" value="demo01"
onclick="demo01()">
<p id="msg">局部更新</p>
<input type="button" value="demo02"
onclick="demo02()"> <h1>异步通信+局部更新</h1>
<p id="message">显示信息</p>
<input type="button" value="demo03"
onclick="demo03()">
</body>
</html>
package cn.tedu.ssm.controller; import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody; @Controller
public class TestController { //produces 可以在SpringMVC的控制器中设置响应的
//ContentType, 也包含服务端的编码
@RequestMapping(value="/checkUserName.do",
produces="text/plain;charset=utf-8")
//ResponseBody 注解是自动化注解，会自动解析控制器
//方法的返回值，并且将返回值填充到 响应消息的body中
//1. 如果控制器返回值是字符串，就直接将字符串放到body
@ResponseBody
public String checkUserName(String name){
//模拟逻辑
if("Tom".equals(name)){
return "已经注册";
}else{
return "可以注册";
}
} /*
* 在控制器方法中返回 Java Bean 对象，与@ResponseBody
* 注解配合时候，ResponseBody注解会自动调用Jackson
* API 将 Java Bean 转换为 JSON 字符串，放到响应Body
* 中，发送到浏览器。并且会自动设置 ContentType 头
* 以及 ContentType 中的编码
*/
@RequestMapping("/check.do")
@ResponseBody
public Message check(String name){
if("Jerry".equals(name)){
return new Message(0, "已经使用");
}else{
return new Message(1, "可以注册");
}
} }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body>
<h1>注册表单</h1>
<form action="regist.do" method="post"
>
<h2>注册</h2>
<div>
<label>用户：</label>
<input id="name" type="text" name="name">
<span id="name-msg"></span>
</div>
<div>
<label>密码：</label>
<input id="pwd" type="password" name="pwd">
</div>
<div>
<label>电话：</label>
<input id="mobile" type="text" name="mobile">
</div>
<div>
<input type="submit" value="保存">
</div>
</form>
<script type="text/javascript">
var nameField = document.getElementById("name");
//为 nameField 添加失去焦点事件
nameField.onblur=function(){
//console.log("失去焦点！");
//获取用户名
var name = document.getElementById("name").value;
//发起异步通信将用户名传递到服务器
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
//通信完成以后，利用局部更新显示结果
if(xhr.readyState==4 && xhr.status==200){
var msg=xhr.responseText;
document.getElementById("name-msg")
.innerHTML=msg;
}
};
//xhr.open("post", "checkUserName.do", true);
//xhr.setRequestHeader("Content-Type",
// "application/x-www-form-urlencoded");
//xhr.send("name="+name);
xhr.open("get", "checkUserName.do?name="+name, true);
xhr.send();
}; </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body>
<h1>注册表单</h1>
<form action="regist.do" method="post"
>
<h2>注册</h2>
<div>
<label>用户：</label>
<input id="name" type="text" name="name">
<span id="name-msg"></span>
</div>
<div>
<label>密码：</label>
<input id="pwd" type="password" name="pwd">
</div>
<div>
<label>电话：</label>
<input id="mobile" type="text" name="mobile">
</div>
<div>
<input type="submit" value="保存">
</div>
</form>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
$('#name').blur(function(){
var n = $('#name').val();
//异步请求: Jquery 封装了XHR，使用更加简便
$.ajax({
url:'check.do', //请求目标地址
data: {'name':n}, //向服务器发送的数据
type: 'post', //请求方式
dateType: 'json', //服务器返回数据类型
success: function(obj){ //请求成功后执行的方法
//obj 代表服务器返回的数据，
//返回数据已经解析为js对象
//局部更新网页中的数据
$('#name-msg').text(obj.message);
}
});
});
});
</script>
</body>
</html>
##javascript中的innerHTML是什么意思，怎么个用法？
innerHTML在js中的功能：获取或插入对象内容。
eg1:
var obtain=document.getElementById("aa").innerHTML;//获取为aa的对象的内容
...
<div id="aa"></div>
...
eg2:
document.getElementById("abc").innerHTML;//向id为abc的对象插入内容
AJAX（表单验证）/JSON之一的更多相关文章
- jquery php ajax 表单验证
本实例用到 JQuery 类库本身的函数和功能,所有表单信息利用 PHPMailer 类库邮件的形式发送. .创建一个表单 html 页面 表单部分 html 代码 以下为引用内容: &l ...
- Ajax 表单验证 实现代码
兼容: opera 9.6 + chrome 2.0 + FF 3 + IE 6 效果:一边输入一边实现验证 image 环境:ruby 1.8.6 + rails 2.1.0 + windows 核 ...
- validate+jquery+ajax表单验证
1.案例 1.1 Html form表单内容 <form class="cForm" id="cForm" method="post" ...
- ajax+表单验证+验证码生成例子
MainController.class.php <?php namespace AjaxYz\Controller; use Think\Controller; class MainContr ...
- jQuery Validatede 结合Ajax 表单验证提交
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 转：MVC遇上bootstrap后的ajax表单验证
使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jqueyr.validate的话只有使用他自己的样式了,而且有模型在使用模型验证更方便点.怎么解决呢? 当 ...
- boostrap ajax表单验证提交
=============================================================================== 1. 1 <link href=& ...
- MVC遇上bootstrap后的ajax表单模型验证
MVC遇上bootstrap后的ajax表单验证 使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jqueyr.validate的话只有使用他自己的样式了, ...
- JQuery表单验证插件EasyValidator,超级简单易用!
本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手. DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以 ...
- JQuery表单验证插件EasyValidator
本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手. DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以 ...
随机推荐
- C# 指定http请求使用Tls1.2
转载于 https://blog.csdn.net/yanghaitian/article/details/77498872 客户端语言 版本 类库 是否支持 兼容方案 Java 1.6.115之 ...
- unity3d-知识汇总
itween下载 http://www.youkexueyuan.com/exp_show/1147.html 代码修改精灵图片的透明度 UIBp.GetComponent<Image>( ...
- php 提取多维数组指定列
前言:有时候在开发中会遇到这样的问题,我们需要把有规律的多维数组按照纵向(列)取出,有下面的方法可用: 我们将拿下面的数组来处理: 1 $arr = array( 2 '0' => array( ...
- node.js初识08
1.模块的概念,在前端的世界里,jq和js的关系,在后台里就是express和原生node的关系, 2.每一个js里的函数都只在当前文件里起作用,如果你希望在其他js里调用这个函数,这么你需要在这个j ...
- kettle杂记
版本8.0,以下是我在使用kettle时候的一些小tips 1.“插入/更新”必须指定字段,“表输出”无需指定字段,但是源表的字段必须包含在目标表中,否则unknown colum! 2.连接数据库时 ...
- MYSQLi数据访问批量删除
<link href="../bootstrap.min.css" rel="stylesheet" type="text/css" ...
- 提示“此Flash Player与您的地区不相容，请重新安装Flash”的解决办法
问题原因: 因为Flash相对于HTML5,有着运算效率低.资源占用大.安全性不高等缺点,随着HTML5越来越普及,Adobe已宣布2020年正式停止支持Flash这项技术. 但Adobe公司为了利益 ...
- linux常用系统工作命令
1．echo命令 echo命令用于在终端输出字符串或变量提取后的值,格式为“echo [字符串 | $变量]”. 2．date命令 date命令用于显示及设置系统的时间或日期,格式为“date [选项 ...
- Sitecore 9有什么新功能
在这个新版本中有很多值得爱的东西.每个人都会有自己喜欢的新功能,但是,我想与你分享一些地雷: xConnect 正如我们在Sitecore的官方Sitecore 9新闻稿中所见的那样,“新的xConn ...
- MVC中的Ajax与增删改查(二)
上一篇记录的是前台操作,下面写一下后台 ,本来自认为是没有必要做补充,毕竟思路啥的都有,实际上在做删除操作的时候,折腾了一天,还是自己太嫩,逻辑不够严谨,这里作下记录. 关于表结构这里再作下说明: ① ...