jQuery
jQuery与事件
定义元素监听事件
- 语法：$(选择器).监听事件名称(处理函数)，事件名称就是js中出现的事件名称
- 本质：处理函数在底层会被赋值给jQuery对象对应的dom对象的事件句柄
on()绑定事件
-
语法：$(选择器).on(事件名称，事件的处理函数)
-
事件名称：就是js中的事件
-
事件处理函数：当事件发生时执行该函数
-
示例：
<!DOCTYPE html> <html lang="en"> <head> <title>jQuery中on的事件绑定方法</title> <meta charset="UTF-8"> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } #out{ width: 300px; height: 300px; background-color: bisque; } #out div{ width: 300px; height: 150px; } </style> </head> <body> <script src="js/jquery-3.6.0.js"></script> <script> $(function(){ //on()的事件绑定测试 $("#btn1").on("click", function(){ $("#up").css("background", "blue") $("#down").css("background", "purple") }) }) </script> <div id="out"> <div id="up"></div> <div id="down"></div> </div><br> <input type="button" id="btn1" value="on()的事件绑定测试"><br> </body> </html>
jQuery与Ajax
-
jQuery对ajax处理做了封装，使得发送ajax请求更加方便
-
3个函数
$.ajax()：jQuery中实现ajax请求的核心函数 //会在内部调用 $.ajax() $.post()：使用post方式发送ajax请求 $.get()：使用get方式发送ajax请求 -
$.ajax()的使用
//$.ajax()的参数:一个json数据 $.ajax({ async : true, // 默认为true，可以不写 contentType : "application/json", // 一个字符串，表示从浏览器发送给服务器的参数的类型，可以不写 data : {"name" : "xun", "age" : 21, "address" : "芜湖"}, // 可以是字符串，数组，json，表示请求的参数和参数值，常用json格式 dataType : "json", // 表示期望从服务器端返回的数据格式，可选的有：xml，html，text，json error : function(){ // 表示当请求发生错误时，执行的函数 //请求出错时，执行的代码 }, success : function(data){ // 请求成功，从服务器端返回了数据，执行success函数 //data，就是responseText，是jQuery处理之后的数据 }, url : 请求的地址, type : "get" 或者 "post" // 请求的方式，默认为get方式，不区分大小写 }) //常用:url, data, dataType, success -
示例
前端代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用jQuery库发送ajax请求</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; margin-top: 10px; margin-left: 10px; } div{ width: 242px; height: 150px; } </style> </head> <body> <!-- 需求： 1.给定按钮，文本框，显示图层 2.点击按钮发送ajax请求，将文本框里的数据提交给后端 3.将后端返回的数据显示在图层中 --> <script src="/ajax/js/jquery-3.6.0.js"></script> <script> $(function (){ $("#btn1").on("click", function (){ //利用jQuery库发送ajax请求 $.ajax({ url : "/ajax/ajaxRequest01", data : {"username" : $(":text").val()}, //底层会按照数据传送格式将数据传送给后端，格式:name=value&name=value&name=value type : "get", dataType : "json", success : function (json){ //自定义的代码 $("#the-div").html(json.username) $("#the-div").css("background", "purple") } }) }) }) </script> <input type="text" id="username" value="请输入用户名"> <input type="button" id="btn1" value="提交数据"> <div id="the-div">后端数据在这里显示</div> </body> </html>后端代码
package com.examples.ajax.servlet; import com.alibaba.fastjson.JSON; import jakarta.servlet.ServletException; import jakarta.servlet.annotation.WebServlet; import jakarta.servlet.http.HttpServlet; import jakarta.servlet.http.HttpServletRequest; import jakarta.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet("/ajaxRequest01") public class AjaxRequest01 extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //获取前端传来的数据 String username = request.getParameter("username"); //封装数据，并将数据以json格式响应给前端 User user = new User(username); String jsonUser = JSON.toJSONString(user); response.getWriter().write(jsonUser); } } -
$.post
$.post(url, data, function(data){}, dataType) //请求地址 发送的数据(一般为json格式) 请求成功后执行的函数(后端返回的数据) 期望后端返回的数据类型 -
$.get
$.get(url, data, function(data){}, dataType) //请求地址 发送的数据(一般为json格式) 请求成功后执行的函数(后端返回的数据) 期望后端返回的数据类型
相关文章
暂无评论...
致力于称为最好的程序员导航网站