jQuery 03: 事件与Ajax

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格式)  请求成功后执行的函数(后端返回的数据) 期望后端返回的数据类型

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

jQuery 03: 事件与Ajax

jQuery

jQuery与事件

定义元素监听事件

on()绑定事件

jQuery与Ajax

相关推荐

发表回复