Ajax+jQuery

最新推荐文章于 2023-11-20 21:35:13 发布

YD_1989

最新推荐文章于 2023-11-20 21:35:13 发布

阅读量296

点赞数

分类专栏：前端基础文章标签： ajax jquery

本文链接：https://blog.csdn.net/m0_58680865/article/details/119815769

版权

前端基础专栏收录该内容

23 篇文章 1 订阅

订阅专栏

AJAX-异步JavaScript和XML

AJAX原理：异步JavaScript和XML。

什么是Ajax：

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

同步与异步：

异步传输是**面向字符的传输，它的单位是字符；而同步传输是面向比特的传输，它的单位是帧，它传输的时候要求接受方和发送方的时钟是保持一致**的。

AJAX的工作原理：

Ajax的工作原理相当于在**用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据**时再由Ajax引擎代为向服务器提交请求。

注意：AJAX并不是框架，也不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。类似于后端的MVC原理这样的。

传统：通过HTML向后台发送请求(表单、超链接)

AJAX：通过**JavaScript向后台发送请求。(通过XMLHttpRequest**对象向后台发请求)

jQuery框架的AJAX实现案例

后台的控制层

@RestController
@RequestMapping("c")
public class Action02 {
	
    //登录是查询请求，这块儿也可以使用GetMapping
	@RequestMapping("m")
	public boolean m(String username, String password) {
		if (username.equals("abc") && password.equals("123")) {
			return true;
		}
		return false;
	}
}

前台登录页面（a.html）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
      //第一步：导入框架
<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>

<body>
	<h1>登陆页面</h1>
	
    //创建文本框、密码框，接受用户参数和密码参数
	用户<input id="username" type="text" required><br>
	密码<input id="password" type="password" required><br>
	
    //创建登录按钮，在按钮中添加事件，点击登录，用jQuery把用户和密码两个数据传到后端
    //后端返回true，跳到b页面；返回false，弹窗显示用户错误
	<button id="b">登陆</button>

<script>
	$(function(){
        //$(function(){});页面加载事件，jQuery框架的必用事件,页面加载完成后浏览器会自动调用
        //选择单击事件
        //当页面内容加载完之后，浏览器会自动调用，选择button按钮，添加一个单击事件
		$("#b").click(function(){
            //调用ajax方法，参数传的是一个Json数据，花括号形式
			$.ajax({
				type:"post",//发送类型
				url:"http://127.0.0.1:8080/c/m",//发请求的地址（后台）
			data:"username="+$("#username").val()+"&password="+$("#password").val(),
                //回调函数success
                //函数作为参数进行输入到函数中，在主函数中进行顺序执行，就是回调函数。
                //res是后端控制层方法返回的值
				success:function(res){
					if (res==true) {
                        //浏览器地址栏
						location = "http://127.0.0.1:8080/b.html";
					} else {
						alert("登陆失败");
					}
				}
			});
		});
	});
</script>

案例思路总结：

①单击登录按钮，触发了click单机事件，调用事件中的ajax方法。

②ajax引擎通过JavaScript向后台发送请求，需要制定发送类型type，发送地址URL和发送数据data。

③地址正确就会找到后台，参数正确后台就能拿到前台的数据，然后后台进行处理。

④处理完后，通过success方法的参数传进来（即：后台return啥，success中的参数就是啥），true就把直接调转到b页面（地址栏为b页面的地址），false则弹窗告诉用户错误。

jQuery框架

(1)web前端理论基础

jquery框架：JavaScript框架

什么是jQuery：

jQuery库封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

bootstrap框架：CSS框架。

原因1：掌握开发学习方法！！独立查看API文档能力！！

原因2：理解js框架特点。

原因3：开发可能用到。

(2)jQuery框架入门案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
	//第一步：导入框架
    <script src="jquery-3.3.1.js"></script>
</head>
<body>
   <input id="a" type="text">
   <button id="b">按钮</button> 
   <script>
    //jQuery的方法不是我们调用，而是浏览器调用
   // DOM对象封装完成之后浏览器会调用此方法
   // 理解：浏览器加载完页面代码之后会触发调用
   //jQuery语法：$();
   $(function(){ 
       //"#b"：找到id=b的那个节点，$("#b").click()表示：给按钮添加单击事件
       //单击之后要实现的功能（方法）写在click后面的括号内
       $("#b").click(function(){
           alert(a.value);
       });     
   });
    </script>    
</body>
</html>

(3)jQuery选择器(第一步永远是导入框架)

基本选择器

①id选择器

②标签选择器

③类选择器

   <div id="a">111</div>
   <span class="b">222</span>
   <p>333</p>
<script>
   $("#a").css('color','red');//id选择器
   $(".b").css('color','blue');//类选择器
   $("p").css('color','green');//标签选择器
</script>

筛选选择器（特点是冒号）

<ul>
       <li>44</li>
       <li>55</li>
       <li>66</li>
       <li>77</li>
</ul>
<script>		
	  $("ul li:first").css('color','red');//筛选第一个		
      $("ul li:last").css('color','blue');//筛选最后一个		
      $("ul li:even").css('color','red');//筛选奇数行		
      $("ul li:odd").css('color','blue');//筛选偶数行
      $("ul li:eq(0)").css('color','red');//筛选第1行（筛选下标为0的）（数组的下标角度）
      $("ul li:gt(2)").css('color','blue');//筛选下标大于2的所有行
</script>

(4)jquery文档处理

//用的最多的是根据id添加
<table id="t" border="1"></table>
<script>
       $("#t").append("<tr><td>张三</td><td>30</td></tr>");
       $("#t").prepend("<tr><td>李四</td><td>40</td></tr>");//往前面加（内部添加）
       $("#t").before("<input type='radio'>");//往前面加（外部添加）
       $("#t").after("<input type='checkbox'>");//往后面加（外部添加）
</script>

(5)jquery属性

<input id="a" type="text">
<div id="b">你好</div>
<div id="c"><a>你好</a></div>
    
<script>
    $("#a").attr("type","color");//把type属性改成color颜色框
    alert($("#b").text());//取纯文本的内容
    alert($("#c").html());//取超文本的内容（里面包含标签）
    $("#b").html("<font color='red'>张三</font>");//存值（无参就是取值，有参就是存值）
</script>

(6)jQuery事件

   <input id="a" type="text"><br>
   <input id="b" type="text"><br>
  <script> 
       //键盘事件
       //找到事件源"#a"，添加事件.keyup，事件中添加方法
    $("#a").keyup(function(){
        b.value = a.value;
    });   
	 //鼠标事件
    $("#b").mouseover(function(){
        $("#b").css('background-color','red');
    });  
   </script>

(7)jquery效果

<div id="c">内容</div>
    <button id="a">显示</button>
    <button id="b">隐藏</button>
    
  <script>
    $("#a").click(function(){
        $("#c").show();
    });
    $("#b").click(function(){
        $("#c").hide();
    });
  </script>

YD_1989

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax+jQuery

AJAX-异步JavaScript和XMLAJAX原理：异步JavaScript和XML。什么是Ajax：AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。同步与异步：异步传输是**面向字符的传输，它的单位是字符；而同步传输是面向比特的传输，它的单位是帧，它传输的时候要求接受方和发送方的时钟是保持一致**的。AJAX的工作原理：Ajax的工作原理相当于在**用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像
复制链接

扫一扫