百木园1、jquery 中给 dom对象绑定事件：
语法一：
- $(选择器).事件名称( 事件的处理函数);
- $(选择器)：定位 dom 对象，dom 对象可以有多个，一同绑定事件
- 事件名称：就是 js 中事件去掉 on 后的部分，例如 js 中的单击事件 onclick()，对应 jquery 中的事件名称 --- click
- 事件的处理函数：就是一个 function，当事件发生时，会调用这个函数
- 栗子：
//给id是btn的按钮绑定单击事件
$(\"#btn\").click(funtion(){
alert(\"btn按钮单击了\");
})
语法二：
- $(选择器).on( 事件名称 , 事件的处理函数);
- 栗子：
//给id是btn的按钮绑定单击事件
$(\"#btn\").on(\"click\",function() { 处理按钮单击事件 } );
代码练习：
<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\">
<style type=\"text/css\">
div{
background: yellow;
width: 500px;
height: 300px;
}
</style>
<script type=\"text/javascript\" src=\"js/jquery-3.6.0.js\"></script>
<script type=\"text/javascript\">
$(function(){
$(\":button\").click(function(){
//使用append增加dom对象
$(\"div\").append(\"<input id=\'newBtn\' type=\'button\' value=\'我是新来的按钮，来点我啊 ~ \'/>\");
//使用on函数给按钮绑定事件
$(\":button\").on(\"click\",function(){
alert(\"您可真帅 ~ ~ (❁´◡`❁)\");
})
})
})
</script>
</head>
<body>
<div></div>
<input type=\"button\" value=\"利用on函数,给div创建一个子对象(button),再给按钮绑定一个click\" />
<br/>
</body>
</html>
2、使用 jquery 的函数，实现 ajax 请求的处理：
- 使用 XMLHttpRequest 实现 ajax ，有4个步骤，jquery 简化了 ajax 请求的处理
- jQuery 中提供了三个函数可以实现ajax请求的处理：
//$.post()和$.get() 的内部都调用了 $.ajax()
$.ajax();//jquery中实现ajax的核心函数。
$.post();//使用post方式做ajax请求。
$.get();//使用get方式发送ajax请求。
- $.ajax( { name:value, name:value, ... } );
- $.ajax 函数的参数表示请求的url， 请求的方式，参数值等信息
- $.ajax() 中的每一个参数都是 json中的 数据，包含请求方式，数据，回调方法等
参数介绍：
- 主要使用的是 url , data ,dataType, success 。
async ： 布尔值，表示请求是否异步处理，默认是 true【可以不写】。
contentType ：发送数据到服务器时所使用的内容类型【可以不写】。
data：表示要发送到服务器的数据，可以是 string，数组，json。
dataType：表示 期望从服务器端返回的数据格式，可选的有： xml ， html ，text ，json；当我们使用 $.ajax() 发送请求时， 会把 dataType 的值发送给服务器， 那我们的 servlet 能够读取到 dataType的值，就知道你的浏览器需要的是 json 或者 xml 的数据，那么服务器就可以返回你需要的数据格式。
error(xhr,status,error)：如果请求失败要运行的函数,，其中 xhr, status, error 是自定义的形参名（xhr 是 XMLHttpRequest 对象）【可以不写】。
success(result,status,xhr)：当请求成功时运行的函数，其中 result, status, xhr 是自定义的形参名（xhr 是 XMLHttpRequest 对象），对应之前的 XMLHttpRequest 对象（readyState==4 && status==200）。
type：规定请求的类型（get 或 post ），默认是 get【可以不写】。
url：请求的地址。
代码练习：
- 原网站源代码：
- 【JavaWeb-Ajax】网站 --- 通过省份 id 获取省份信息（通过Ajax实现局部刷新）
- 要求：通过 jQuery 优化原网站源代码中的发送 Ajax 请求部分。
<%@ page contentType=\"text/html;charset=UTF-8\" language=\"java\" %>
<html>
<head>
<title>$Title$</title>
<!--先加载jQuery工具包-->
<script type=\"text/javascript\" src=\"js/jquery-3.6.0.js\"></script>
<script type=\"text/javascript\">
$(function () {
$(\"#btn\").click(function () {
//获取省份id
var id = $(\"#provinceId\").val();
//发起Ajax请求
$.ajax({
url: \"queryProvinceMessage\",
data: {
\"provinceId\": id,
},
dataType: \"json\",
success: function (resp) {
//resp是json对象
//将服务端数据打回到相应的文本框中
$(\"#provinceName\").val(resp.provinceName);
$(\"#provinceJianCheng\").val(resp.jianCheng);
$(\"#provinceShengHui\").val(resp.shengHui);
}
});
});
})
</script>
</head>
<body>
<p>通过省份ID来获取省份信息</p>
<table>
<tr>
<td>省份编号：</td>
<td>
<input type=\"text\" id=\"provinceId\">
<input type=\"button\" value=\"搜索\" id=\"btn\">
</td>
</tr>
<tr>
<td>省份名称：</td>
<td><input type=\"text\" id=\"provinceName\"></td>
</tr>
<tr>
<td>省份简称：</td>
<td><input type=\"text\" id=\"provinceJianCheng\"></td>
</tr>
<tr>
<td>省会名称：</td>
<td><input type=\"text\" id=\"provinceShengHui\"></td>
</tr>
</table>
</body>
</html>
来源：https://www.cnblogs.com/Burning-youth/p/16077605.html
本站部分图文来源于网络，如有侵权请联系删除。