Query
内容导航- JQuery函数
- remove
- empty
- append
- html
- each
- JQuery事件 on
- JQuery中的AJAX
- $.ajax()
- $.get()
- $.post()
- JQuery案例 --- 级联查询
Javaweb — 新的一年，立flag，技术突破,广度马上就够了，现在弄深度
JQuery函数、ajax函数
JQuery函数JQuery真的还是大大简化了JS代码的编写，主要区分对象就是$符号，新year刚好会上java程序设计课，到时候可以再夯实一下基础了，重点是看源码还有注解
注意这一组函数和昨天的那一组有区别；前面的val、text、attr主要是操纵对象的属性；这一组主要操纵对象的子对象；所谓子对象就是子节点，比如html是根结点，下面就是head结点【对象】和body结点; 这些函数都是操纵所有的对象
除了text，val、attr、html都是get的时候只能get第一个
remove将数组中的所有DOM对象及其子对象删除
$(选择器).remove()empty
将数组中所有对象的子对象删除，【并没有删除原对象】
$(选择器).empty()append
为数组中所有DOM对象添加子对象-----子对象是以字符串的形式出现;可以动态增加任何dom对象
$(选择器).append("我是添加的动态的div")
html
设置或返回被选元素的内容，innerHTML ---- 就是所定义的标签
就是获取选择器标签所对应的标签之间的所有的内容，就是innerHTML；和text不同，text会自动忽略标签
-
无参的形式 ： 获取DOM数组的第一个元素的内容 $(选择器).html()
-
有参形式 ： 设置DOM数组中所有元素的内容 $(选择器).html(value)
JQuery函数
我是一个父div我是mysql
我是cfeng
这几个函数主要就是动态操作DOM对象，实现动态增加，动态删除，动态修改，十分方便【只有val、attr、html的get方法才是第一个，其他都是所有】
eacheach是对数组、json和dom数组等的遍历，对每一个元素都调用一次函数
$.each(要遍历的对象,function(index,element){})
$就相当于类名，each就是其中的静态方法； index是循环的索引，element是对象
JQuery对象.each(function(index,element){})
可以对数组、json、dom数组循环处理、每一个成员都会执行处理函数
这里就非常简单的遍历了数组类型的对象了
- 循环数组的时候---- index是数组的下标； element是数组中的每一个元素
- 循环json的时候，key【前面的参数】是json每一个属性的keyname；【后面的参数】就是json每一个属性的值
$(function(){
$(":button").click(function(){
var json = {"name":"zhangsan","stuclass":"HC2001"};
$.each(json,function(key,value){
console.log("Key是"+ key + " value是" + value);
})
})
})
14:38:38.796 Key是name value是zhangsan at test.html:23
14:38:38.802 Key是stuclass value是HC2001 at test.html:23
- 循环DOM数组则和普通的数组相同，前面是索引，后面是对象
$(function(){
$(":button").click(function(){
var $option = $("select");
$.each($option,function(index,elem){
alert($(elem).html()); //这里就将两个下拉列表的每一个的内含的innerHTML全部给输出，而不只是第一个
});
})
})
对于JQuery对象还可以使用
$(选择器).each()
JQuery事件 on
之前分享过其中的JQuery事件的一种写法，那就是使用JQuery中的事件方法，比如click()；
除此之外，还有更加灵活的处理方式，就是使用on，使用的格式是
$(选择器).on(event,function)
event: 事件一个或者多个，多个之间用空格分隔开【事件名称】
function： 可选，规定当作事件允许时的运行的函数【事件的处理函数】
on的方式显得更加灵活
JQuery函数
这种方式确实要灵活一点，但是和之前的click()的差别不是很大；JQuery实现了动态的对象的创建和事件的绑定
JQuery中的AJAX之前使用AJAX必须要经过重复的几步 ，首先就是要创建异步对象XMLHttpRequest()，然后给异步对象绑定事件，【onreadystatechange；通过status获取请求是否成功】，之后初始化异步对象，发送请求
JQuery简化了AJAX的处理，三个函数即可
$.ajax(); //jquery中ajax的核心函数 $.post(); //使用post方式做ajax请求 $.get(); //使用get方式做ajax请求 $相当于一个类，get,post，get，each相当于其静态方法
其中$.post和get都在内部调用了ajax函数 ；
$.ajax()函数的参数表示请求得url，请求得方式、参数值等信息；其参数是json得结构
例如： $.ajax({名称:值,名称:值……}) json的属性名不用加双引号
这个json中得属性有
- async ： boolean 表示请求是否异步，默认是true【可以不写这个配置项】
- contentType ： 发送数据到服务器所使用得类型MIME； 比如"application/json";可以不写
- data: 规定要发送到服务器的数据，可以是字符串、数组，大多是json
- dataType ： 期望从服务器响应的数据类型，JQuery从xml、json、text、html中进行测试【JSON就是以对象返回，所以java对象转js对象必须用json】；servlet读取到dataType的值，就知道浏览器想要什么类型的数据，服务器就可以返回你需要的类型的数据
- error() : 如果请求失败要运行的函数
- success(data) 当请求成功的时候运行的函数，data自定义的形参 ---- 就是原生AJAX中的responseText---- 是4，也就是处理完成的数据； 其实就相当于就是之前的事件绑定的函数中readyState == 4&& status == 200
- type ： 规定请求的类型，默认是GET，还有POST，不区分大小写
- url ： 发送请求的url
$.ajax({
//async:true,
//contentType:"application/json",
data:{name:"lisi",stucalss:"HC2002"},
dataType:"json",
//error:function(){
//出现的错误
},
success:function(data){
//data就是返回接受的处理成功的字符串
},
url:"http://……",
type: POST
})
实际开发中，最常用的是data ---- 发送的数据,dataType ---- 返回的数据类型一定要写，并且要写正确，如果响应的是text，那么只能是text；不写在success函数就不能成功执行 ,url – 浏览器地址; success — 成功后的处理函数
之前使用get方式将所有的数据作为url传递，这里可以直接使用json格式的data，相当于就是请求的参数
data中就相当于就是请求正文一样，里面放的json参数都会放到请求正文或者连接到url后
GET /AjaxTest/bmi?user=%E5%BC%A0%E4%B8%89&height=1.63&weight=50
比如这样子，后面的数据都是在data这个JSON对象中写入的
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>AJAXdemo 姓名 :
身高m :
体重kg :
等待加载数据……
可以看到，同样的一个过程，使用JQuery的代码比原生JS简单很多
如果想要servlet返回的响应数据直接是json；或者dataType为json，那么就在servlet中设置响应的MIME格式
也就是说dataType和响应的contentType是对应的，如果contentType是text，那么dataType也只能是text
如果是JSON格式，那么都要进行转化，可以使用eval函数
resp = eval("(" + resp + ")");
$("#result")[0].innerText = resp.name;
console.log(resp.stuclass);
测试了一下，如果将dataType写成json；那么就会出现解析失败，相当于readystate != 4
$.get()该方法使用HTTP GET请求从服务器加载数据
$.get(url,data,function(resp),dataType)
就相当于将上面的json对象给封装了，并且type=get；四个参数和上面的参数是相同的
$.post()使用HTTP POST的方式从服务器加载数据
$.post(url,data,function(resp),dataType)
相当于就还是调用了$.ajax()函数，这里相当于将type设置为post
所以可以直接用下面的函数
$.ajax({
data:{user:u,height:h,weight:w},
url:"/AjaxTest/bmi",
dataType:"text",
success:function(resp){
$("#result")[0].innerText = resp;
}
})
--------------转化为------------
$.get("/AjaxTest/bmi",{user:u,height:h,weight:w},success:function(resp){
$("#result")[0].innerText = resp;
},"text")
但是这个区别不大，可以还是使用$.ajax()直观一点
JQuery案例 — 级联查询级联查询就是要前面的选择之后，后面的才能选择，比如城市的选择，选择省份之后才能选择城市……abbreviation – 简称 ；province capitial 省会
首先是创建表，一张省表
USE cfengTest;
CREATE TABLE province(
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(25),
abbre CHAR(1),
captial VARCHAR(25)
);
CREATE TABLE city(
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(25),
provid INT,
FOREIGN KEY(provid) REFERENCES province(id) #外键
);
编写对应的Dao类和entity类
package dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import cfeng.entity.City;
import cfeng.util.DButil;
public class CityDao {
//根据省份id，得到所有的城市
public List getCityList(int provid){
Connection conn = null;
PreparedStatement state = null;
ResultSet result = null;
City city = null;
List list = new ArrayList();
try {
conn = DButil.getConnection();
String sql = "SELECT id,name From city WHERe provid = ?";
state = conn.prepareStatement(sql);
state.setInt(1, provid);
result = state.executeQuery();
while(result.next()) {
int id = result.getInt("id");
String name = result.getString("name");
city = new City(id, name, provid);
list.add(city);
}
} catch (SQLException e) {
e.printStackTrace();
}finally {
DButil.close(conn, state, result);
}
return list;
}
}
//这里使用的两个工具类json工具类和DButil工具类都是和之前相同的
JSON对象的属性名不需要加单引号，直接写即可
然后进行web页面的开发
省市级联查询 省市级联查询
| 省份 | ||
| 城市 |
之后就要思考这个功能的过程，就是点击按钮，省份的选择框就会出现很多的选择项；选择省份的选择项之后城市的选择项就变成对应的城市【初步的思路就是连个异步对象完成】
进行了大概的前端编写，和思考分析，接下来就是实现功能，首先完成，点击按钮，显示所有的省份
//第一个异步对象，点击按钮触发
$("#proBtn").click(function(){
$.ajax({
url: "/AjaxTest/queryProvince",
dataType:"text",
success:function(resp){
resp = eval("(" + resp + ")");
var $opp = $("#province");
$opp.empty();
$opp.append("");
//点击后，后面的城市也要消失，重新选择
var $city = $("#city");
$city.empty();
$city.append("");
for(var i = 0; i < resp.len; i++) {
var pro = resp.data[i];
//console.log(pro.name);
$opp.append("");
}
}
});
});
点击后，页面不刷新，只是加载出来，这里就使用的是AJAX技术局部刷新
之后就是编写一个servlet控制层类
package cfeng.controller;
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 cfeng.entity.City;
import cfeng.util.JsonUtil;
import dao.CityDao;
@WebServlet("/QueryCity")
public class QueryCityServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获得传入的provid
int provid = Integer.valueOf(request.getParameter("provid"));
//调用业务层代码
CityDao cityDao = new CityDao();
List citylist = cityDao.getCityList(provid);
//转为JSON字符串
StringBuffer json = new StringBuffer("{len:");
json.append(citylist.size() + "," + "data:[");//之前少了一个data
for(int i = 0; i < citylist.size(); i++) {
City city = citylist.get(i);
StringBuffer js = JsonUtil.getJSON(city);
json.append(js);
if(i
中间的代码应该封装到业务层，这里为了简单一点就没有进行封装了
另外一个Servlet类差不多，就不展示了;看一下第一个的页面【其实本来要将script中的代码剥离称为一个js文件的
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
省市级联查询
省市级联查询
省份
城市
虽然很简单，但是有很多细节的地方，比如需要点击按钮之后，两个下拉列表都需要清空，所以要使用JQuery的empty函数
这里装载链表还是使用的json；只是需要将长度和数据分开封装就可以了
这里使用的是撰写的JSON工具类，可以直接使用jackson工具包来转化，response的MIME类型直接为json；接受的格式设置为json，就不用自己拼串了
其实jsckson拼串的结果和博主拼的差不多，不需要前面的len；因为可以直接调用数组的len---->思维有点固化，之前都没有想到可以直接调用数组的len；使用的LIst的size赋值给len
其他的多级的级联查询都是相同的原理，选择上一级，就会发送AJAX请求； 其实可以就在页面一开始加载的时候就加载省份，这里将AJAX请求就在页面加载之后也会调用 ---- 开发的时候还可以将success的函数给提出来，在另外的部分直接书写，便于维护
