05 ajax,jquery,xstream,json解析
Ajax
数据请求 Get 1.创建对象 function ajaxFunction(){ var xmlHttp; try{ // Firefox,Opera 8.0+,Safari xmlHttp=new XMLHttpRequest(); } catch (e){ try{// Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } } return xmlHttp; } 2. 发送请求 //执行get请求 function get() { //1. 创建xmlhttprequest 对象 var request = ajaxFunction(); //2. 发送请求。 /* 参数一: 请求类型 GET or POST 参数二: 请求的路径 参数三: 是否异步, true or false */ request.open("GET","DemoServlet01",true ); request.send(); }
//执行get请求 function get() { //1. 创建xmlhttprequest 对象 var request = ajaxFunction(); //2. 发送请求 request.open("GET","DemoServlet01?name=aa&age=18",true ); //3. 获取响应数据 注册监听的意思。 一会准备的状态发生了改变,那么就执行 = 号右边的方法 request.onreadystatechange = function(){ //前半段表示 已经能够正常处理。 再判断状态码是否是200 if(request.readyState == 4 && request.status == 200){ //弹出响应的信息 alert(request.responseText); } } request.send(); }e=19"); } 注意:servlet request.setCharacterEncoding("UTF-8"); //无效 String name = request.getParameter("name"); String age = request.getParameter("age"); name = new String(name.getBytes("ISO-8859-1"),"UTF-8"); age = new String(age.getBytes("ISO-8859-1"),"UTF-8"); ?
<script type="text/javascript"> //1. 创建对象 function ajaxFunction(){ var xmlHttp; try{ // Firefox,Safari xmlHttp=new XMLHttpRequest(); } catch (e){ try{// Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } } return xmlHttp; } function post() { //1. 创建对象 var request = ajaxFunction(); //2. 发送请求 request.open( "POST",true ); //不带数据 //request.send(); //带数据 //如果使用的是post方式带数据,那么 这里要添加头, 说明提交的数据类型是一个经过url编码的form表单数据 request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //带数据过去 , 在send方法里面写表单数据。 request.send("name=aobama&age=19"); } </script> ? 需要获取数据 function post() { //1. 创建对象 var request = ajaxFunction(); //2. 发送请求 request.open( "POST",true ); //想获取服务器传送过来的数据, 加一个状态的监听。 request.onreadystatechange=function(){ if(request.readyState==4 && request.status == 200){ alert("post:"+request.responseText); } } //如果使用的是post方式带数据,那么 这里要添加头, 说明提交的数据类型是一个经过url编码的form表单数据 request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //带数据过去 , 在send方法里面写表单数据。 request.send("name=aobama&age=19"); }t.send("name="+name); }
<a href="" onclick="load()">使用JQuery执行load方法</a> 有两次刷新, 先走 onClick的方法,取到数据回来之后,赋值显示。 接着 走 href=""的路径,但是这个属性没有给值,所以会把当前的页面重新再刷新一次。所以导致看不见值。 //找到这个元素, 去执行加载的动作, 加载DemoServlet02 , 得到的数据,赋值显示 $("#aaa").load("DemoServlet02",function(responseText,statusTXT,xhr) { //找到id为text01的元素, 设置它的value属性值为 responseText 对应的值 $("#aaa").val(responseText); });
$.get("DemoServlet02",function(data,status) { $("#div01").text(data); }); * val("aa"); 只能放那些标签带有value属性 * load $("#元素id").load(url地址); $("#div1").load(serlvet); ---> 使用的get请求,回来赋值的时候, 使用text();去赋值 * get 语法格式 : $.get(URL,callback); 使用案例: $.get("DemoServlet02",status) { $("#div01").text(data); }); * post 语法格式:$.post(URL,data,callback); function post() { $.post("DemoServlet02",{name:"zhangsan",age:18},function (data,status) { //想要放数据到div里面去。 --- 找到div $("#div01").html(data); }); } ?
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> function checkname() { var username = $("#username").val(); $.post("CheckNameServlet",{"username":username},function(data,status){ if(data==1){ $("#s_name").html("<font color=‘red‘>用户名已存在! </font>"); }else{ $("#s_name").html("<font color=‘green‘>用户名可用! </font>"); } }); } </script> </head> <body> <table border="1"> <tr> <td>用户名</td> <td><input type="text" name="username" id="username" onblur="checkname()"><span id="s_name"></span></td> </tr> </table> </body> </html> 实现百度搜索提示 <body> <center> <h2>搜一下</h2> <input type="text" name="word" id="word" style="width: 600px ; height: 50px ;font-size: 20px;"> <input type="button" value="搜一下" style="height: 55px ; width: 100px ; "> <div id="div01" style="position:relative; left : -54px; width: 600px; height: 200px ; border: 1px solid blue; display: none"></div> </center> </body> ?
? $(function(){ $("#word").keyup(function() { alert("键盘弹起了.."); }) }); JS请求 $(function(){ $("#word").keyup(function() { //2。 获取输入框的值 //var word = $("#word").val(); //this 对应就是执行这个方法的那个对象, $("#word") var word = $(this).val(); if(word == ""){ $("#div01").hide(); }else{ //3. 请求数据。 $.post("find",{word:word},status){ //alert(data); $("#div01").show(); $("#div01").html(data); }); } }) }); ?
protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { request.setCharacterEncoding("utf-8"); try { //1. 先获取参数 String word = request.getParameter("word"); System.out.println("word="+word); //2. 让dao执行查询 WordsDao dao = new WordsDaoImpl(); List<WordBean> list = dao.findWords(word); request.setAttribute("list",list); //3. 返回数据 response.setContentType("text/html;charset=utf-8"); //response.getWriter().write("数据是:"); request.getRequestDispatcher("list.jsp").forward(request,response); } catch (SQLException e) { e.printStackTrace(); } } ?
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<table style="width: 100%">
<c:forEach items="${list }" var="wordBean">
<tr>
<td>${wordBean.words}</td>
</tr>
</c:forEach>
</table>
?
? <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="js/city.js"></script> </head> <body> 省份: <select name="province" id ="province"> <option value="" >-请选择 - <option value="1" >广东 <option value="2" >湖南 <option value="3" >湖北 <option value="4" >四川 </select> 城市: <select name="city" id="city"> <option value="" >-请选择 - </select> </body> ? XStream的使用 // 返回数据。手动拼 ---> XStream 转化 bean对象成 xml XStream xStream = new XStream(); //想把id做成属性 xStream.useAttributeFor(CityBean.class,"id"); //设置别名 xStream.alias("city",CityBean.class); //转化一个对象成xml字符串 String xml = xStream.toXML(list);
$(function() { //1。找到省份的元素 $("#province").change(function() { //2. 一旦里面的值发生了改变,那么就去请求该省份的城市数据 //$("#province").varl(); var pid = $(this).val(); $.post( "CityServlet",{pid:pid},status){ //alert("回来数据了:"+data); //先清空以前的值: $("#city").html("<option value=‘‘ >-请选择-") //遍历: //从data数据里面找出所有的city , 然后遍历所有的city。 //遍历一个city,就执行一次function方法 $(data).find("city").each(function() { //遍历出来的每一个city,取它的孩子。 id,cname var id = $(this).children("id").text(); var cname = $(this).children("cname").text(); $("#city").append("<option value=‘"+id+"‘ >"+cname) }); } ); }); }); ?
//把list ---> json数据 //JSONArray ---> 变成数组 , 集合 [] //JSONObject ---> 变成简单的数据 { name : zhangsan,age:18} JSONArray jsonArray = JSONArray.fromObject(list); String json = jsonArray.toString(); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |