首页 > 其他分享> 文章详细

jQuery 03: 事件与Ajax

2022-08-05 09:04:54 阅读：122 来源： 互联网

标签：jQuery 03 请求 function json Ajax ajax data

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

标签：jQuery,03,请求,function,json,Ajax,ajax,data
来源： https://www.cnblogs.com/nefu-wangxun/p/16512538.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jQuery 03: 事件与Ajax

jQuery

jQuery与事件

定义元素监听事件

on()绑定事件

jQuery与Ajax