目录
一,AJAX介绍
二,AJAX案例-用户名有效性验证
三,AJAX实现原理
1,应用模型
2,交互模型
3,Ajax可以完成的功能
四,XMLHttpRequest对象常用属性和方法
1,onreadystatechange 属性
2,readyState 属性
3,responseText 属性
4,XMLHttpRequest方法
4.1 open() ⽅法
4.2 send() ⽅法
4.3 其他方法
五,jQuery实现AJAX
1,AJAX编程步骤
1.1 创建XMLHttpRequest对象
1.2 设置请求方式
1.3 调用回调函数
1.4 发送请求
2,jquery的ajax操作
2.1 ajax()⽅法
2.2 get() 方法通过远程 HTTP GET 请求载入信息
2.3 post() 方法通过远程 HTTP GET 请求载入信息
3,编程案例
六,json定义与使用
1,什么是json
2,json对象定义和基本使用
2.1 json的定义
2.2 JSON对象的访问
七,Java对象和json之间的转换
八,json和AJAX案例
一,AJAX介绍
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语⾔,⽽是⼀种使⽤现有标准的新⽅法。
AJAX 是与服务器交换数据并更新部分⽹⻚的艺术,在不重新加载整个⻚⾯的情况下(不影响主流操作的前提下,做一些其他操作。比如利用百度搜索时,输入部分关键词,浏览器会在用户输入的同时自动传送数据到百度,并且返回内容)。
ajax并⾮⼀种新的技术,⽽是⼏种原有技术的结合体。它由下列技术组合⽽成。
- 1.使⽤CSS和XHTML来表示。
- 2.使⽤DOM模型来交互和动态显示。
- 3.使⽤XMLHttpRequest来和服务器进⾏异步通信。
- 4.使⽤javascript来绑定和调⽤。
AJAX 的核⼼是 XMLHttpRequest
不同的浏览器创建 XMLHttpRequest 对象的⽅法是有差异的。IE 浏览器使⽤ ActiveXObject,⽽其他的浏览器使⽤名为 XMLHttpRequest
二,AJAX案例-用户名有效性验证
考虑一个场景:在部分网站上注册账户时,如果限定账户名不能重复,每打入一个字,旁边就会有提示表明该账户是否可用,不需要点击提交等操作。
AJAX技术可以在页面不刷新的前提下,向后台发送请求。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
</head>
<script type="text/javascript">
function test() {
//发送异步请求
//1.创建XMLHttpRequest对象
var xmlhttp;
if(window.XMLHttpRequest){
//非IE
xmlhttp=new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.打开链接
var uname= document.getElementById("uname").value;
//get方法xmlhttp.open("get","/testuname?username="+uname,true);
// 这里的true表示允许异步
xmlhttp.open("post","/testuname",true);
//3.指定回调函数
xmlhttp.onreadystatechange=function(){
//3.1 判断状态
if(xmlhttp.readyState==4){
//3.2 接收返回的数据
var responseText = xmlhttp.responseText;
document.getElementById("rs").innerText=responseText;
}
}
//4.发送数据
//get方法xmlhttp.send();
//post
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");
xmlhttp.send("username="+uname);
}
</script>
<body>
<h1>index.jsp</h1>
username:<input type="text" id="uname" onblur="test()"><span id="rs"></span>
</body>
</html>
package servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet(urlPatterns = "/testuname")
public class TestServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1.接收参数
String username = req.getParameter("username");
resp.setContentType("text/html;charset=utf-8");
PrintWriter writer = resp.getWriter();
if("admin".equals(username)){
writer.println("账户已被注册");
}else{
writer.println("账户可用");
}
}
}
以上代码实现的效果是:输入账户名为admin,当输入框失去焦点后,会在右侧出现提示“账户已存在”,否则显示账户可用。
直观的看,像是通过内置函数(onblur等)和js绑定的方法,借助于XMLHttpRequest来实现与后台收发数据的功能。
三,AJAX实现原理
1,应用模型
Ajax的⼯作原理相当于在⽤户和服务器之间加了—个中间层(AJAX引擎),使⽤户操作与服务器响应异步化。并不是所有的⽤户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎⾃⼰来做,,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Http(s)和服务器端不变;
AJAX方式中JavaScript调用(比如上面例子中的onblur())通过AJAX引擎包装成HTTP请求;
返回的是XML数据,经过AJAX引擎渲染为HTML和CSS;
2,交互模型
浏览器普通交互模式(类比于单线程)
浏览器AJAX交互模式
3,Ajax可以完成的功能
动态更新购物⻋的物品总数,⽆需⽤户单击Update并等待服务器重新发送整个⻚⾯。提升站点的性能,这是通过减少从服务器下载的数据量⽽实现的。例如,在Amazon的购物⻋⻚⾯,当更新篮⼦中的⼀项物品的数量时,会重新载⼊整个⻚⾯,这必须下载32K的数据。如果使⽤Ajax计算新的总量,服务器只会返回新的总量值,因此所需的带宽仅为原来的百分之⼀。消除了每次⽤户输⼊时的⻚⾯刷新。
在Ajax中,如果⽤户在分⻚列表上单击Next,则服务器数据只刷新列表⽽不是整个⻚⾯。
直接编辑表格数据,⽽不是要求⽤户导航到新的⻚⾯来编辑数据。对于Ajax,当⽤户单击Edit时,可以将静态表格刷新为内容可编辑的表格。⽤户单击Done之后,就可以发出⼀个Ajax请求来更新服务器,并刷新表格,使其包含静态、只读的数据。
四,XMLHttpRequest对象常用属性和方法
1,onreadystatechange 属性
onreadystatechange 属性存有处理服务器响应的函数。
下⾯的代码定义⼀个空的函数,可同时对 onreadystatechange 属性进⾏设置(一般通过匿名函数的方式):
xmlHttp.onreadystatechange = function() { //我们需要在这写⼀些代码}
2,readyState 属性
readyState 属性存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange 函数就会被执⾏。
readyState 属性可能的值:
向这个 onreadystatechange 函数添加⼀条 If 语句,来测试我们的响应是否已完成(意味着可获得数据):
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
//从服务器的response获得数据
}
}
3,responseText 属性
可以通过 responseText 属性来取回由服务器返回的数据。
在我们的代码中,我们将把时间⽂本框的值设置为等于 responseText:
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
document.myForm.time.value = xmlHttp.responseText;
}
}
4,XMLHttpRequest方法
4.1 open() ⽅法
open() 有三个参数。
- 第⼀个参数定义发送请求所使⽤的⽅法;
- 第⼆个参数规定服务器端脚本的URL;
- 第三个参数规定应当对请求进⾏异步地处理。
xmlHttp.open("GET","test.php",true);
4.2 send() ⽅法
send() ⽅法将请求送往服务器。如果我们假设 HTML ⽂件和 PHP ⽂件位于相同的⽬录,那么代码是这样的:
4.3 其他方法
五,jQuery实现AJAX
1,AJAX编程步骤
1.1 创建XMLHttpRequest对象
创建XMLHttp对象的语法是:
var xmlHttp=new XMLHttpRequest();
如果是IE5或者IE6浏览器,则使⽤ActiveX对象,创建⽅法是:
var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
⼀般我们⼿写AJAX的时候,⾸先要判断该浏览器是否⽀持XMLHttpRequest对象,如果⽀持则创建该对象,如果不⽀持则创建ActiveX对象。JS代码如下:
//第⼀步:创建XMLHttpRequest对象
var xmlHttp;
if (window.XMLHttpRequest) {
//⾮IE
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
//IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") }
1.2 设置请求方式
在WEB开发中,请求有两种形式,⼀个是get,⼀个是post,所以在这⾥需要设置⼀下具体使⽤哪个请求,XMLHttpRequest对象的open()⽅法就是来设置请求⽅式的。
open()⽅法
//第⼆步:设置和服务器端交互的相应参数,向路径
http://localhost:8080/JsLearning3/getAjax准备发送数据
var url = "http://localhost:8080/JsLearning3/getAjax";
xmlHttp.open("POST", url, true);
GET 还是 POST?
与 POST 相⽐,GET 更简单也更快,并且在⼤部分情况下都能⽤。然⽽,在以下情况中,请使⽤ POST请求:
- ⽆法使⽤缓存⽂件(更新服务器上的⽂件或数据库)
- 向服务器发送⼤量数据(POST 没有数据量限制)
- 发送包含未知字符的⽤户输⼊时,POST ⽐ GET 更稳定也更可靠
异步 - True 或 False?
AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。XMLHttpRequest 对象如果要⽤于 AJAX 的话,其 open() ⽅法的 async 参数必须设置为 true;
对于 web 开发⼈员来说,发送异步请求是⼀个巨⼤的进步。很多在服务器执⾏的任务都相当费时。AJAX 出现之前,这可能会引起应⽤程序挂起或停⽌。通过 AJAX,JavaScript ⽆需等待服务器的响应,⽽是在等待服务器响应时执⾏其他脚本当响应就绪后对响应进⾏处理
1.3 调用回调函数
如果在上⼀步中open⽅法的第三个参数选择的是true,那么当前就是异步请求,这个时候需要写⼀个回调函数;
XMLHttpRequest对象有⼀个onreadystatechange属性,这个属性返回的是⼀个匿名的⽅法,所以回调函数就在这⾥写xmlHttp.onreadystatechange=function{},function{}内部就是回调函数的内容。
所谓回调函数,就是请求在后台处理完,再返回到前台所实现的功能。
在这个例⼦⾥,我们的回调函数要实现的功能就是接收后台处理后反馈给前台的数据,然后将这个数据显示到指定的div上。因为从后台返回的数据可能是错误的,所以在回调函数中⾸先要判断后台返回的信息是否正确,如果正确才可以继续执⾏。代码如下:
//第三步:注册回调函数
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var obj = document.getElementById(id);
obj.innerHTML = xmlHttp.responseText;
} else {
alert("AJAX服务器返回错误!");
}
}
}
在上⾯代码中,xmlHttp.readyState是存有XMLHttpRequest 的状态。从 0 到 4 发⽣变化。0: 请求未初始化。1: 服务器连接已建⽴。2: 请求已接收。3: 请求处理中。4: 请求已完成,且响应已就绪。所以这⾥我们判断只有当xmlHttp.readyState为4的时候才可以继续执⾏。
xmlHttp.status是服务器返回的结果,其中200代表正确。404代表未找到⻚⾯,所以这⾥我们判断只有当xmlHttp.status等于200的时候才可以继续执⾏。
var obj = document.getElementById(id);obj.innerHTML = xmlHttp.responseText;
这段代码就是回调函数的核⼼内容,就是获取后台返回的数据,然后将这个数据赋值给id为testid的div。
xmlHttp对象有两个属性都可以获取后台返回的数据,分别是:responseText和responseXML;
其中responseText是⽤来获得字符串形式的响应数据,responseXML是⽤来获得 XML 形式的响应数据。
⾄于选择哪⼀个是取决于后台给返回的数据的,这个例⼦⾥我们只是显示⼀条字符串数据所以选择的是responseText。
AJAX状态值与状态码区别
AJAX状态值是指,运⾏AJAX所经历过的⼏种状态,⽆论访问是否成功都将响应的步骤,可以理解成为AJAX运⾏步骤。如:正在发送,正在响应等,由AJAX对象与服务器交互时所得;使⽤“ajax.readyState”获得。(由数字1~4单位数字组成)
AJAX状态码是指,⽆论AJAX访问是否成功,由HTTP协议根据所提交的信息,服务器所返回的HTTP头信息代码,该信息使⽤“ajax.status”所获得;这就是我们在使⽤AJAX时为什么采⽤下⾯的⽅式判断所获得的信息是否正确的原因。
if(ajax.readyState == 4 && ajax.status == 200) {。。。。);}
AJAX运⾏步骤与状态值说明
在AJAX实际运⾏当中,对于访问XMLHttpRequest(XHR)时并不是⼀次完成的,⽽是分别经历了多种状态后取得的结果,对于这种状态在AJAX中共有5种,分别是:
- 0 - (未初始化)还没有调⽤send()⽅法
- 1 - (载⼊)已调⽤send()⽅法,正在发送请求
- 2 - (载⼊完成)send()⽅法执⾏完成,
- 3 - (交互)正在解析响应内容
- 4 - (完成)响应内容解析完成,可以在客户端调⽤了
对于上⾯的状态,其中“0”状态是在定义后⾃动具有的状态值,⽽对于成功访问的状态(得到信息)我们⼤多数采⽤“4”进⾏判断。
AJAX状态码说明
1:请求收到,继续处理
2:操作成功收到,分析、接受
3:完成此请求必须进⼀步处理
4:请求包含⼀个错误语法或不能完成
5:服务器执⾏⼀个完全有效请求失败
再具体就如下:
- 100——客户必须继续发出请求
- 101——客户要求服务器根据请求转换HTTP协议版本
- 200——交易成功
- 201——提示知道新⽂件的URL
- 202——接受和处理、但处理未完成
- 203——返回信息不确定或不完整
- 204——请求收到,但返回信息为空
- 205——服务器完成了请求,⽤户代理必须复位当前已经浏览过的⽂件
- 206——服务器已经完成了部分⽤户的GET请求
- 300——请求的资源可在多处得到
- 301——删除请求数据
- 302——在其他地址发现了请求数据
- 303——建议客户访问其他URL或访问⽅式
- 304——客户端已经执⾏了GET,但⽂件未变化
- 305——请求的资源必须从服务器指定的地址得到
- 306——前⼀版本HTTP中使⽤的代码,现⾏版本中不再使⽤
- 307——申明请求的资源临时性删除
- 400——错误请求,如语法错误
- 401——请求授权失败
- 402——保留有效ChargeTo头响应
- 403——请求不允许
- 404——没有发现⽂件、查询或URl
- 405——⽤户在Request-Line字段定义的⽅法不允许
- 406——根据⽤户发送的Accept拖,请求资源不可访问
- 407——类似401,⽤户必须⾸先在代理服务器上得到授权
- 408——客户端没有在⽤户指定的饿时间内完成请求
- 409——对当前资源状态,请求不能完成
- 410——服务器上不再有此资源且⽆进⼀步的参考地址
- 411——服务器拒绝⽤户定义的Content-Length属性请求
- 412——⼀个或多个请求头字段在当前请求中错误
- 413——请求的资源⼤于服务器允许的⼤⼩
- 414——请求的资源URL⻓于服务器允许的⻓度
- 415——请求资源不⽀持请求项⽬格式
- 416——请求中包含Range请求头字段,在当前请求资源范围内没有range指示值,请求也不包含IfRange请求头字段
- 417——服务器不满⾜请求Expect头字段指定的期望值,如果是代理服务器,可能是下⼀级服务器不能满⾜请求
- 500——服务器产⽣内部错误
- 501——服务器不⽀持请求的函数
- 502——服务器暂时不可⽤,有时是为了防⽌发⽣系统过载
- 503——服务器过载或暂停维修
- 504——关⼝过载,服务器使⽤另⼀个关⼝或服务来响应⽤户,等待时间设定值较⻓
- 505——服务器不⽀持或拒绝⽀请求头中指定的HTTP版本
1.4 发送请求
//第四步:设置发送请求的内容和发送报送。然后发送请求
var uname= document.getElementsByName("userName")[0].value;
var upass= document.getElementsByName("userPass")[0].value ;
var params = "userName=" + uname+ "&userPass=" +upass+ "&time=" + Math.random();
// 增加time随机参数,防⽌读取缓存
xmlHttp.setRequestHeader("Content-type", "application/x-www-formurlencoded;charset=UTF-8");
// 向请求添加 HTTP 头,POST如果有数据⼀定加加!!!!
xmlHttp.send(params);
如果需要像 HTML 表单那样 POST 数据,请使⽤ setRequestHeader() 来添加 HTTP 头。然后在 send()⽅法中规定您希望发送的数据。
2,jquery的ajax操作
传统方式实现Ajax步骤繁琐,⽅法、属性、常⽤值较多不好记忆。
2.1 ajax()⽅法
可以通过发送 HTTP请求加载远程数据,是 jQuery 最底层的 Ajax 实现,具有较⾼灵活性。
$.ajax( [settings] ); //参数 settings 是$.ajax ( )⽅法的参数列表,⽤于配置 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)//请求失败时
})
2.2 get() 方法通过远程 HTTP GET 请求载入信息
这是⼀个简单的 GET 请求功能以取代复杂 $.ajax
$.get(url,data,function(result) {
//省略将服务器返回的数据显示到⻚⾯的代码
});
2.3 post() 方法通过远程 HTTP GET 请求载入信息
$.post(url,data,function(result) {
//省略将服务器返回的数据显示到⻚⾯的代码
});
3,编程案例
还是标题二中的案例,只不过用jQuery代替js来实现(包括Ajax方式、GET方式、POST方式)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#uname").blur(function(){
//1.获得value值
var uname = $(this).val();
//2.发送请求
/* $.ajax({
url:"/testuname",
data:"username="+uname,
type:"post",
dataType:"text",
success:function(rs){
$("#rs").html(rs);
}
});
*/
/* $.get("/testuname","username="+uname,function(rs){
$("#rs").html(rs);
});*/
$.post("/testuname","username="+uname,function(rs){
$("#rs").html(rs);
});
});
})
</script>
<body>
<h1>jquery_ajax.jsp</h1>
username:<input type="text" id="uname" ><span id="rs"></span>
</body>
</html>
把js实现方式又拿过来,好进行对比
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
</head>
<script type="text/javascript">
function test() {
//发送异步请求
//1.创建XMLHttpRequest对象
var xmlhttp;
if(window.XMLHttpRequest){
//非IE
xmlhttp=new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.打开链接
var uname= document.getElementById("uname").value;
//xmlhttp.open("get","/testuname?username="+uname,true);
xmlhttp.open("post","/testuname",true);
//3.指定回调函数
xmlhttp.onreadystatechange=function(){
//3.1 判断状态
if(xmlhttp.readyState==4){
//3.2 接收返回的数据
var responseText = xmlhttp.responseText;
document.getElementById("rs").innerText=responseText;
}
}
//4.发送数据
//xmlhttp.send();
//post
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");
xmlhttp.send("username="+uname);
}
</script>
<body>
<h1>index.jsp</h1>
username:<input type="text" id="uname" onblur="test()"><span id="rs"></span>
</body>
</html>
六,json定义与使用
1,什么是json
JSON (JavaScript Object Notation) 是⼀种轻量级的数据交换格式。 易于⼈阅读和编写。同时也易于机器解析和⽣成。
它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition -December 1999的⼀个⼦集。
JSON采⽤完全独⽴于语⾔的⽂本格式,但是也使⽤了类似于C语⾔家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。 这些特性使JSON成为理想的数据交换语⾔。
2,json对象定义和基本使用
在标准的json格式中,json对象由在括号括起来,对象中的属性也就是json的key是⼀个字符串,所以⼀定要使⽤双引号引起来。每组key之间使⽤逗号进⾏分隔。
2.1 json的定义
var 变量名 = {
“key” : value , // Number类型
“key2” : “value” , // 字符串类型
“key3” : [] , // 数组类型
“key4” : {}, // json 对象类型
“key5” : [{},{}] // json 数组
};
2.2 JSON对象的访问
我们要访问⼀个对象的属性,只需要使⽤【对象名.属性名】的⽅式访问即可。
<script type="text/javascript">
// json的定义
var jsons = {
"key1":"abc", // 字符串类型
"key2":1234, // Number
"key3":[1234,"21341","53"], // 数组
"key4":{ // json类型
"key4_1" : 12,
"key4_2" : "kkk"
},
"key5":[{ // json数组
"key5_1_1" : 12,
"key5_1_2" : "abc"
},{
"key5_2_1" : 41,
"key5_2_2" : "bbj"
}]
};
// 访问json的属性
alert(jsons.key1); // "abc"
// 访问json的数组属性
alert(jsons.key3[1]); // "21341"
// 访问json的json属性
alert(jsons.key4.key4_1);//12
// 访问json的json数组
alert(jsons.key5[0].key5_1_2);//"abc"
</script>
七,Java对象和json之间的转换
关于JSON解析,之前课程上有提到过Gson和FastJson,感觉使用起来更方便,用的人也比较多。记不起来的同学可以看这里:ο(=•ω<=)ρ⌒☆@&再见萤火虫&【03-Java核心类库_XML与JSON】8 JSON解析
课程上用的是这些jar包
例子也比较简单,这里直接上代码了
package test;
import bean.Users;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import java.util.ArrayList;
public class Demo {
public static void main(String[] args) {
//java->json
Users users = new Users(11,"aaa","123456",123.456);
JSONObject jsonObject = JSONObject.fromObject(users);
System.out.println(jsonObject);//json
//json-java
String str="{\"money\":123.456,\"password\":\"123456\",\"uid\":11,\"username\":\"aaa\"}";
JSONObject jsonObject1 = JSONObject.fromObject(str);
Object o = JSONObject.toBean(jsonObject1, Users.class);
System.out.println("o="+o);
//java集合->json
ArrayList arrayList = new ArrayList();
arrayList.add(new Users(1,"张三","123",12.34));
arrayList.add(new Users(2,"张三2","12322",1244.34));
arrayList.add(new Users(3,"张三3","12333",1255.34));
JSONArray jsonArray = JSONArray.fromObject(arrayList);//json
System.out.println(jsonArray);
//json->java集合
String str2="[{\"money\":12.34,\"password\":\"123\",\"uid\":1,\"username\":\"张三\"},{\"money\":1244.34,\"password\":\"12322\",\"uid\":2,\"username\":\"张三2\"},{\"money\":1255.34,\"password\":\"12333\",\"uid\":3,\"username\":\"张三3\"}]";
JSONArray jsonArray2 = JSONArray.fromObject(str2);
Object[] o1 = (Object[])JSONArray.toArray(jsonArray2, Users.class);
for (Object o2 : o1) {
System.out.println("o2="+o2);
}
}
}
八,json和AJAX案例
实现一个简单的功能:当输入用户名后,其他文本框会自动填充该用户的相关信息。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#uid").blur(function(){
//1.获得value值
var uid = $(this).val();
//2.发送请求
$.post("/getuser","uid="+uid,function(rs){
//转换成可以处理的js!!!
rs=eval("("+rs+")");
//此时的rs是json格式的对象
$("#uname").val(rs.username);
$("#pass").val(rs.password);
$("#money").val(rs.money);
});
});
})
</script>
<body>
uid:<input type="text" id="uid"><br>
name:<input type="text" id="uname"><br>
pass:<input type="text" id="pass"><br>
money:<input type="text" id="money">
</body>
</html>
package servlet;
import bean.Users;
import net.sf.json.JSONObject;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet(urlPatterns = "/getuser")
public class GetUsersServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1.接收参数
String uid = req.getParameter("uid");
int userid=Integer.parseInt(uid);
Users users=null;
switch (userid){
case 1:
users=new Users(1,"张三","abc",11.22);
break;
case 2:
users=new Users(2,"张三2","abc2",222.1);
break;
case 3:
users=new Users(3,"张三3","abc3",33.2);
break;
case 4:
users=new Users(4,"张三4","abc4",44.4);
break;
default:
users=new Users();
}
//java->json
JSONObject jsonObject = JSONObject.fromObject(users);//json
resp.setContentType("text/html;charset=utf-8");
PrintWriter writer = resp.getWriter();
writer.print(jsonObject);
}
}
实际编程时可能会遇到的问题:
1,无法自动填充内容:查看网页相关工具,发现服务器返回500错误
解决方法:将之前导入lib中关于json解析的jar包,拷贝到tomcat目录中的lib中;
2,无法填充内容:返回json数据了,但是不能显示
需要对返回的数据进行转义
章节汇总在这里(づ ̄3 ̄)づ╭❤~@&再见萤火虫&【06-JavaWEB】
对学习Java感兴趣的同学欢迎加入QQ学习交流群:1126298731
有问题欢迎提问,大家一起在学习Java的路上打怪升级!(o゜▽゜)o☆[BINGO!]