【JavaWeb-jQuery】笔记(3)--- jQuery中给dom对象绑定事件;通过jQuery实现Ajax请求的处理

2022年1月16日 6点热度 0条评论 来源: 猿头猿脑的王狗蛋

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:请求的地址。

 

代码练习:

<%@ 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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。