今日内容
1. JQuery入门
JQuery入门 丰富的Js库,dom文档处理,动画效果,Ajax异步处理 使用步骤 1)导入JQuery的核心js库 2)页面载入事件是程序入口 举例 原生js页面载入事件 <body οnlοad="init()"> <input type="button" value="原生js页面载入" /> </body> <!--书写载入方法--> function init(){ alert("原生js的页面载入事件") } JQuery写法 $(function(){ <!--alert弹出事件--> alert("JQuery的页面载入事件") }) ;
2. JQuery选择器
2.1 JQuery基本选择器
格式 $(function(){ $("标签名称").事件操作(function(){ 具体操作 }) ; }) ; 步骤 1)导入JQuery核心js库 2)jQuery页面加载事件--程序入口 -给id为zhongli设置点击事件 $(function(){ //获取id的jquery对象,然后使用点击事件 $("#zhongli").click(function(){ alert("zhongli被点击了") ; }) ; //给zhongli标签设置橘色的样式属性 $("#zhongli").css("background-color","orange") }) ;
2.2 JQuery层级选择器
格式 $(function(){ //后代选择器--选择器2是选择器1的后代元素 $("选择器1 选择器2 ...") //子代选择器--选择器2是选择器1的子元素 $("选择器1>选择器2") }) ; 步骤 1)导入JQuery核心js库 2)JQuery页面加载事件--程序入口
2.3 JQuery属性选择器
常用Jquery属性选择器: [attribute] 语法 $("标签名称[属性名称]") -匹配带有给定的指定属性的元素怒 [attribute=value] 语法 $("选择器[属性名称=值]") -匹配给定的属性是某个特定值的元素 [attribute!=value] 语法 $("选择器[属性名称!=值]") -匹配所有不含有指定的属性,或者属性不等于特定值的元素 [attribute^=value] 语法 $("选择器[属性名称^=值]") -匹配给定的属性是以某些值开始的元素 [attribute$=value] 语法 $("选择器[属性值名称$=值]") -配给定的属性是以某些值结尾的元素 [attribute*=value] 语法 $("选择器[属性名称*=值]") -匹配给定的属性是以包含某些值的元素 [selector1][selector2][selectorN] 语法 $("选择器[属性名称1][属性值2...]") -复合属性选择器,需要同时满足多个条件时使用
2.4 JQuery的html
JQuery的html书写 JQuery对象.html("设置标签文本") JQuery对象.text("设置普通文本") $("#标签名称").html("设置标签的标签文本内容") $("zhongli").html("<h1>这是一个一号标题</h1>") 输出结果 这是一个一号标题 $("#标签名称").text("设置标签的普通文本内容") $("zhongli").text("<h1>这是一个普通文本</h1>") 输出结果--浏览器不解析标签 <h1>这是一个普通文本</h1> JQuery对象.val() 获取文本输入值 JQuery对象.val(设置文本输入框的值)
3. AJax引入
AJax -Asynchronous JavaScript And XML(异步JavaScript和XML) 同步--等待服务器响应,耗时,需要刷新页面 浏览器向服务器发送请求 request 等待服务器--调用后端接口查询 response 服务器向浏览器响应 异步--AJax方式,不耗时,不需要刷新页面 浏览器通过前端事件发送Ajax请求 产生一个代理对象直接将请求发送给服务器端 服务器解析并作出响应 解析json数据 原生Ajax的四个步骤 1)创建代理对象xmlHttpRequest 2)建立连接open(url,提交方式,携带的参数) 3)发送send() 如果是get请求,send()内不需要带参数,get请求url?携带参数 如果是post请求,必须设置请求头,send({"key":value}),必须携带参数,json串的方式 4)代理对象通过服务器响应给浏览器
4. JQuery的Ajax
4.1 通用方式
格式 $.ajax({ url:后台请求地址,将数据传到后端的地址--上下文路径+/映射路径 type:提交方式-get/post data:要提交的数据 -get方式可以直接在映射路径后书写?使用名称=内容的方式传递 -post方式直接在data后提交json数据格式 success:function(data){用来接收从服务器响应的数据} }) 一般和JQuery页面载入时间一起使用 $(function(){ $("#输入框name").click(点击事件)/blur(失去焦点事件)({ //获取用户输入内容 var name = $("#输入框name").val() ; //JQuery的Ajax方式--通用方式 $.ajax({ //url-后台请求地址 "url":"上下文路径/映射路径?username="+name+"", "type":get, "success":function(data){ alert(data) ;//弹出从后端响应的内容测试 } }) }); });
4.2 JQuery的Ajax的get提交方式
get提交方式--通用方式使用居多 $.get({ "上下文路径/映射地址?名称="+内容+"" , function(data){接收响应内容} });
4.3 JQuery的Ajax的post提交方式
post提交方式--通用方式使用居多 $.post({ "上下文路径/映射地址" , {名称:内容} , function(data){接收响应内容} });
5. 实例
前端页面
<script>
//页面载入事件
$(function(){
//书写一个失去焦点事件-在鼠标离开的时候立即判断
$("#pname").blur(function (){
//获取管理员添加的用户姓名
var pname = $("#pname").val();
//使用Ajax判断是否可用
$.ajax({
"url":"${pageContext.request.contextPath}/CheckProductServlet?pname="+pname+"",
"type":"get",
"success":function (data){
$("#tip").html(data)
}
})
})
});
</script>
ResponseData响应实体类对象
package com.szr.responsedata;
//响应对象
public class ResponseData {
//设定一个响应状态
private int code ;
//设定一个响应信息
private String str ;
public ResponseData() {
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getStr() {
return str;
}
public void setStr(String str) {
this.str = str;
}
@Override
public String toString() {
return "ResponseData{" +
"code=" + code +
", str='" + str + '\'' +
'}';
}
}
数据库访问接口
package com.szr.dao.Impl;
import com.szr.dao.ProductDao;
import com.szr.pojo.Product;
import com.szr.utils.DruidUtils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import java.sql.SQLException;
public class ProductDaoImpl implements ProductDao {
/**
* 根据商品名称判断商品是否存在
* @param pname 判断条件
* @return 返回找到的商品
*/
@Override
public Product CheckProduct(String pname) throws SQLException {
//完成方法
QueryRunner queryRunner = new QueryRunner(DruidUtils.getDataSource());
//准备sql语句
String sql = "select * from product where pname = ? " ;
//执行
Product product = queryRunner.query(sql, new BeanHandler<Product>(Product.class), pname);
//判断
if (product!=null){
return product;
}
return null;
}
}
业务层调用数据库访问
package com.szr.service.Impl;
import com.szr.dao.Impl.ProductDaoImpl;
import com.szr.dao.ProductDao;
import com.szr.pojo.Product;
import com.szr.responsedata.ResponseData;
import com.szr.service.ProductService;
import java.sql.SQLException;
public class ProductServiceImpl implements ProductService {
/**
* 根据商品名称判断商品是否存在
* @param pname 判断条件
* @return 返回找到的商品
*/
@Override
public ResponseData CheckProduct(String pname) {
try {
//调用数据访问接口
ProductDao productDao = new ProductDaoImpl();
Product product = productDao.CheckProduct(pname);
//准备封存数据
ResponseData responseData = new ResponseData();
//判断
if (product!=null){
//不为空,证明商品名存在,封存数据
responseData.setCode(1);//证明找到了
responseData.setStr("商品名已被使用,请更换!");//准备一个提示信息
}else {
//为空,证明没找到,封存数据
responseData.setCode(0);//证明没找到
responseData.setStr("商品名可用!");
}
System.out.println(responseData.getCode());
return responseData;
} catch (SQLException throwables) {
throwables.printStackTrace();
}
return null;
}
}
控制层Servlet
package com.szr.controller;
import com.szr.responsedata.ResponseData;
import com.szr.service.Impl.ProductServiceImpl;
import com.szr.service.ProductService;
import com.szr.utils.JsonUtils;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
@WebServlet("/CheckProductServlet")
public class CheckProductServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//解决请求中文乱码问题
request.setCharacterEncoding("utf-8");
//解决响应乱码问题
response.setContentType("text/html;charset=utf-8");
//获取前端的参数
String pname = request.getParameter("pname");
//检查数据库商品名是否有重复,调用业务层代码
ProductService productService = new ProductServiceImpl();
ResponseData responseData = productService.CheckProduct(pname);
String str = responseData.getStr();
//将responseData转换为json串形式-利用工具
//String json = JsonUtils.object2json(responseData);
//将json传递给前端
response.getWriter().write(str);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}