学习日记之JQuery小知识 ajax
创建jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'jq1.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="/jquerytest/jquery-1.5.1.js"></script>
<script type="text/javascript">
//这里的内容会在文档加载完毕时执行
$(function() {
$("#xxx").blur(function(){ //当xxx失去焦点
var value = $("#xxx").val();
$.ajax({
url:"/jquerytest/AjaxServlet",//要请求的服务器url
data:{val:value},//这是一个对象，他表示请求对象request.getp获取
async:true,//是否为异步请求
cache:false,//是否缓存结果
type:"POST",//请求方式
dataType:"json",//服务器返回的数据是什么类型
success:function(result){//这个函数会在服务器执行成功时被调用,result是返回值
$("label").text(result.name+","+result.age);
// if (result) {
// $("label").text("好人");
// }else {
// $("label").text("坏人");
// }
}
});
});
});
</script>
</head>
<body>
用户名<input type="text" name="name" id="xxx"/><label></label><br/>
密 码<input type="password" name="pwd"/>
</body>
</html>新建AjaxServlet.java
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
String value = request.getParameter("val");
if (value.equals("1234")) {
String str ="{\"name\":\"好人\",\"age\":12}";
response.getWriter().print(str);
}else{
String str ="{\"name\":\"坏人\",\"age\":89}";
response.getWriter().print(str);
}
}
} 
效果：失去焦点变换
相关推荐
wcqwcq 2020-06-26
delmarks 2020-06-14
ppsurcao 2020-06-14
tthappyer 2020-06-07
kentrl 2020-11-10
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16
lyqdanang 2020-08-16
curiousL 2020-08-03