json初步以及jQuery初步
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="link.js"></script>
</head>
<body>
<select id="province">
<option value=-1>请选择</option>
</select>省
<select id="city">
<option value=-1>请选择</option>
</select>市
</body>
</html>
window.onload=function(){
var province=document.getElementById("province");
var json=new XMLHttpRequest();
json.open("GET","/json?cmd=firstlist",true);
json.send();
json.onreadystatechange=function(){
if(json.status==200&&json.readyState==4){
var jsonobject=json.responseText;
console.debug(jsonobject);
var jsonb= eval("("+jsonobject+")");
for(var i=0;i<jsonb.length;i++){
var arr=jsonb[i];
var array=document.createElement("option");
array.value=arr.id;
array.innerHTML=arr.name;
province.appendChild(array);
}
}
}
province.onchange=function(){
var pid=this.value;
if(pid<0){
return ;
}
var city=document.getElementById("city");
city.innerHTML="<option value='-1'>请选择</option>";
var json=new XMLHttpRequest();
json.open("GET","/json?cmd=secondlist&pid="+pid,true);
json.send();
json.onreadystatechange=function(){
if(json.readyState==4&&json.status==200){
var jsonobject=json.responseText;
var jsonb=eval("("+jsonobject+")");
for(var i=0;i<jsonb.length;i++){
var arr=jsonb[i];
var array=document.createElement("option");
array.value=arr.id;
array.innerHTML=arr.name;
city.appendChild(array);
}
}
}
}
}
package ajax;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
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 com.alibaba.fastjson.JSON;
import lei.City;
import lei.Province;
import net.sf.json.JSONArray;
import net.sf.json.JSONSerializer;
@WebServlet("/json")
public class json extends HttpServlet{
/**
*
*/
private static final long serialVersionUID = 1L;
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/json;charset=UTF-8");
String cmd=req.getParameter("cmd");
if(cmd.equals("firstlist")) {
firstlist(req, resp);
}else {
secondlist(req, resp);
}
}
protected void firstlist(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
List<Province> shen=Province.getAllProvince();
/*第一种方法
StringBuilder sb=new StringBuilder(100);
sb.append("[");
for (Province pro : shen) {
sb.append("{ id:"+ pro.getId() +" , name:'"+ pro.getName() +"'},");
}
sb.deleteCharAt(sb.length()-1);
sb.append("]");*/
/*第二种方法*/
/*
String arr=JSONArray.fromObject(shen).toString();*/
/*三种方法*/
String arr=JSON.toJSONString(shen);
PrintWriter out=resp.getWriter();
out.print(arr);
}
protected void secondlist(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String pid=req.getParameter("pid");
List<City> list=City.getCityByProvinceId(Long.valueOf(pid));
/*第一种方法
StringBuilder sb=new StringBuilder(100);
sb.append("[");
for (City ci : list) {
sb.append("{ id:"+ ci.getId() +" , name:'"+ ci.getName() +"'}, ");
}
sb.deleteCharAt(sb.length()-1);
sb.append("]");*/
//第二种方法
/*String arr=JSONArray.fromObject(list).toString();*/
/*三种方法*/
String arr=JSON.toJSONString(list);
PrintWriter out=resp.getWriter();
out.print(arr);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<input id="btn1" type="button" value="js修改"/>
<input id="btn2" type="button" value="jq修改"/>
</body>
</html>
window.onload=function(){
document.getElementById("btn1").onclick=function(){
document.getElementById("div1").innerHTML="你已经被修改了";
}
}
$(function(){
$("#btn2").click(function(){
$("#div2").html("你也已经被修改了");
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="correct.js"></script>
</head>
<body>
<div id="div1" style="display:none;background-color:gray;">
<h3>杨绛经典语录</h3>
在大的时代里，个人正如一叶扁舟，<br>
唯有随波逐流，偶尔的讽刺、同情，但人也只能平静地一步步走向坟墓而已。<br>
命运于此，并不是一个悲剧，不过是巨大的讽刺。——杨绛《干校六记》<br>
</div>
<a href="javascript:" id="debug1">debug1</a><br>
<a href="javascript:" id="debug2">debug2</a><br>
</body>
</html>
window.onload=function(){
document.getElementById("debug1").onclick=function(){
var detail=document.getElementById("div1");
if(detail.style.display==""){
detail.style.display="none";
}else{
detail.style.display="";
}
}
}
$(function(){
$("#debug2").click(function(){
$("#div1").toggle(3000);
})
})