标签：dex ping org jackson mob 返回 else pack oct
<!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>
innerHTML在js中的功能：获取或插入对象内容。
eg1:
var obtain=document.getElementById("aa").innerHTML;//获取为aa的对象的内容
...
<div id="aa"></div>
...
eg2:
document.getElementById("abc").innerHTML;//向id为abc的对象插入内容
标签：dex ping org jackson mob 返回 else pack oct
原文地址：https://www.cnblogs.com/shijinglu2018/p/9532525.html
