1.原生态的AJAX
ajax入门程序:
步骤:
1.创建一个核心对象 XMLHttpRequest
2.编写一个回调函数
3.编写请求方式和请求的路径(open操作)
4.发送请求(send操作)
<body>
<input type="button" value="点我" onclick="btnClick()">
</body>
<script type="text/javascript">
function btnClick(){
//核心对象
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7, Firefox, Opera, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//编写回调函数
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
alert(xmlhttp.responseText);
}
}
//open
xmlhttp.open("get","/day15/ajax2?username=张三");
//send
xmlhttp.send();
}
</script>
四种jquery:
了解:jquery对象.load(url,params,function(数据){});
★: $.get(url,params,function(数据){},type);
发送get请求的ajax
url:请求的路径
params:请求的参数 参数为keyvalue的形式 key=value {"":"","":""}
fn:回调函数 参数就是服务器发送回来的数据
type:返回内容格式，xml, html, script, json, text, _default。 以后用"json"
★: $.post(url,params,function(数据){},type);
发送post请求的ajax
若结果为json格式, 打印返回值的时候是一个对象
例如若json为 {"result":"success","msg":"成功"}
获取msg 只需要 参数.msg
理解:
$.ajax([选项]);
选项的可选值:
url:请求路径
type:请求方法
data:发送到服务器的数据
success:fn 成功以后的回调
error:fn 异常之后的回调
dataType:返回内容格式 经常使用json
async:设置是否是异步请求
$(function(){ $("#btn").click(function(){ var url="/day15/jqueryAjax"; //var params="username=张三"; var params={"username":"张苏纳"}; //load方式 前一种是get 后一种是post /* $(this).load(url,params,function(d){ alert(d); }); */ //get方式 /* $.get(url,params,function(d){ alert(d) }); */ //post方式 /* $.post(url,params,function(d){ alert(d.msg); },"json"); */ //ajax 方式 $.ajax({ url:url, type:"post", data:params, success:function(d){ alert(d.msg); }, error:function(){}, dataType:"json" }); }); })
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("请求方式:"+request.getMethod()); //接受参数 String username = request.getParameter("username"); username=new String(username.getBytes("iso-8859-1"),"utf-8"); System.out.println(username); //响应数据 response.getWriter().print("success"); }
$(function(){ //给username派发一个失去焦点事件 发送ajax请求 $("input[name='username']").blur(function(){ //获取输入的值 var $value=$(this).val(); //alert($value); $.get("/day15/checkUsername4Ajax","username="+$value,function(d){ //alert(d); if(d==1){ $("#usename_msg").html("<font color='green'>用户名可以使用</font>"); }else{ $("#usename_msg").html("<font color='red'>用户名已被使用</font>"); } }); }); })
省市联动案列
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(function(){ //页面加载成功 查询所有的省 $.get("/day15/selectPro",function(d){ //alert(d) var $pro=$("#proId"); $(d).each(function(){ $pro.append($("<option value="+this.provinceid+">"+this.name+"</option>")); }); },"json"); //给省份下拉选派发change事件 $("#proId").change(function(){ //获取省份id var $pid=$(this).val(); //alert($pid); //发送ajax请求 查询所有的市 $.get("/day15/selectCity",{"pid":$pid},function(obj){ //alert(obj); var $city=$("#cityId"); $city.html("<option>-请选择-</option>"); if(obj!=null){ $(obj).each(function(){ $city.append($("<option value='"+this.cityid+"'>"+this.name+"</option>")); }); } },"json"); }); }) </script> <title>省市联动</title> </head> <body> <select id="proId" name="province"> <option>-省份-</option> <!-- <option value="1">北京</option> --> </select> <select id="cityId" name="city"> <option>-请选择-</option> </select> </body> </html>
public class SelectProServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1.调用service 查询所有的省份 List<Province> list=null; try { list = new ProvinceService().findAll(); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } //2.将所有的省份写回去 response.setContentType("text/html;charset=utf-8"); if(list!=null && list.size()>0){ response.getWriter().println(JSONArray.fromObject(list)); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
public class ProvinceService { public List<Province> findAll() throws SQLException { return new ProvinceDao().findAll(); } }
public class ProvinceDao { public List<Province> findAll() throws SQLException { QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource()); String sql="select * from province"; return qr.query(sql, new BeanListHandler<>(Province.class)); } }
public class SelectCityServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //0.设置编码 request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); //1.获取省份id String pid=request.getParameter("pid"); //2.调用service 查询所有的市 返回 list List<City> list=null; try { list = new CityService().findCitiesByPid(pid); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } //3.将list转换成json 返回页面 if(list!=null && list.size()>0){ response.getWriter().println(JSONArray.fromObject(list)); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
public class CityService { /** * 通过省份id 查询所有的市 * @param pid * @return * @throws SQLException */ public List<City> findCitiesByPid(String pid) throws SQLException { return new CityDao().findCitiesByPid(pid); } }
public class CityDao { public List<City> findCitiesByPid(String pid) throws SQLException { QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource()); String sql="select * from city where provinceid = ?"; return qr.query(sql, new BeanListHandler<>(City.class),pid); } }
