jQuery 03: 事件与Ajax


jQuery

jQuery与事件

定义元素监听事件

  1. 语法:$(选择器).监听事件名称(处理函数),事件名称就是js中出现的事件名称
  2. 本质:处理函数在底层会被赋值给jQuery对象对应的dom对象的事件句柄

on()绑定事件

  1. 语法:$(选择器).on(事件名称,事件的处理函数)

  2. 事件名称:就是js中的事件

  3. 事件处理函数:当事件发生时执行该函数

  4. 示例:

    <!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

  1. jQuery对ajax处理做了封装,使得发送ajax请求更加方便

  2. 3个函数

    $.ajax():jQuery中实现ajax请求的核心函数
    
    //会在内部调用 $.ajax()
    $.post():使用post方式发送ajax请求
    $.get():使用get方式发送ajax请求
    
  3. $.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
    
  4. 示例

    前端代码

    <!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);
        }
    }
    
  5. $.post

    $.post(url, data, function(data){}, dataType)
    //请求地址    发送的数据(一般为json格式)  请求成功后执行的函数(后端返回的数据) 期望后端返回的数据类型
    
  6. $.get

    $.get(url, data, function(data){}, dataType)
    //请求地址    发送的数据(一般为json格式)  请求成功后执行的函数(后端返回的数据) 期望后端返回的数据类型
    

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/279011.html

(0)
上一篇 2022年8月5日
下一篇 2022年8月5日

相关推荐

发表回复

登录后才能评论