今日内容
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);
}
}
本文介绍了JQuery的基本使用，包括如何导入库、处理DOM事件、选择器的运用，如基本选择器、层级选择器和属性选择器。此外，还详细讲解了Ajax的基础知识，包括同步与异步的区别，以及JQuery中Ajax的get和post提交方式。最后，通过一个实例展示了如何使用Ajax进行后台数据验证。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
