jquery 的简单使用。需要引入 js 文件。
jquery 获取 select 标签、 input (radio) 标签的选中状态。
注意过滤器加空格代表从子类中找,不加空格是从自身查找。
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
// 相当于window.onload
$(function () {
//添加点击事件
$("button").click(function () {
// 过滤器中加空格代表从子类中找
console.log("select: " + $("select :selected").val());
// 不加空格从自身找
console.log("radio: " + $("input:checked").val());
$("select :selected").text("选中了");
$("select [selected != 'selected']").text("未选中");
})
})
</script>
</head>
<body>
<select>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>
<br>
<input type="radio" name="sex" value="1">
<input type="radio" name="sex" checked="checked" value="2">
<input type="radio" name="sex" value="3">
<br>
<button>点击</button>
</body>
</html>
使用 jquery 发送 ajax 异步请求。
IDEA 的 jsp 工程代码。
// 服务端端部分代码,父类 DispacherServlet 在前文封装Servlet 工具类中找
@WebServlet("/AjaxServlet/*")
public class AjaxServlet extends DispacherServlet {
public void hello(HttpServletRequest request, HttpServletResponse response) {
// 接收服务端数据 application/x-www-form-urlencoded
String username = request.getParameter("username");
String age = request.getParameter("age");
System.out.println(username + "\t" + age);
// 响应信息到客户端
try {
response.getWriter().write("<html><body><p>Hello</p> <div>Ajax</div></body></html>");
} catch (IOException e) {
e.printStackTrace();
}
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
// 绑定事件
$("#button1").bind("click", function () {
var param = {
type: "POST",
url: "AjaxServlet/hello",
// data: "username=zs&age=23",
data: {
username: "zs",
age: 23
},
// 服务端返回数据的预期类型 text、json、xml等
dataType: "html",
headers: {
"content-type": "application/x-www-form-urlencoded"
},
beforeSend: function (XMLHttpRequest) {
// 发送请求前显示 div2
$("#div2").show();
// 发送请求前执行,优先于 headers 设置
console.log("beforeSend this " + this)
},
success: function (data, textStatus) {
// data 可能是 xmlDoc, jsonObj, html, text, 等等...
console.log("success textStatus " + textStatus);
console.log("success data " + data);
// $("#div1").text(data);
$("#div1").html(data)
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// 通常 textStatus 和 errorThrown 之中 只有一个会包含信息
console.log("error textStatus " + textStatus);
console.log("error errorThrown " + errorThrown);
},
complete: function (XMLHttpRequest, textStatus) {
// 请求成功或失败都会执行
$("#div2").hide();
console.log("complete textStatus " + textStatus);
}
}
// 发送请求
$.ajax(param);
})
})
</script>
</head>
<body>
<button id="button1">异步访问AjaxServlet</button>
<div id="div1" style="border: antiquewhite solid 1px;width: 100px;height: 100px;"></div>
<div id="div2" style="display: none">转圈圈</div>
</body>
</html>