jquery和ajax总结

最新推荐文章于 2023-11-15 15:09:21 发布

路远·情长

最新推荐文章于 2023-11-15 15:09:21 发布

阅读量133

点赞数 1

分类专栏： JQuery 文章标签： ajax jquery

本文链接：https://blog.csdn.net/weixin_43973940/article/details/116590931

版权

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言：材料来自菜鸟教程，侵权立即删除。

1、语法：

$(selector).load(URL,data,callback);

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

必需的 URL 参数规定您希望加载的 URL

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

2、使用：

这是示例文件（"demo_test.txt"）的内容：

<h2>jQuery AJAX 是个非常棒的功能！</h2> <p id="p1">这是段落的一些文本。</p>

下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中：

<script>
$(document).ready(function(){
	$("button").click(function(){
		$("#div1").load("/try/ajax/demo_test.txt");
	});
});
</script>

二、

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息：

三、jQuery - AJAX get() 和 post() 方法

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

get使用：

<script>
$(document).ready(function(){
	$("button").click(function(){
		$.get("/try/ajax/demo_test.php",
			  function(data,status){
			alert("数据: " + data + "\n状态: " + status);
		});
	});
});
</script>

post使用：

<script>
$(document).ready(function(){
	$("button").click(function(){
		$.post("/try/ajax/demo_test_post.php",{
			name:"菜鸟教程",
			url:"http://www.runoob.com"
		},
		function(data,status){
			alert("数据: \n" + data + "\n状态: " + status);
		});
	});
});
</script>

四、粒子特效实例：

<iframe width="100%" height="300" 
src="https://c.runoob.com/iframe/4506" 
allowfullscreen="allowfullscreen" frameborder="0">
</iframe>

引用到自己的html，就可以看效果。

五、AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。

方法	描述
$.ajax()	执行异步 AJAX 请求

$.get()

使用 AJAX 的 HTTP GET 请求从服务器加载数据

$.post()

使用 AJAX 的 HTTP POST 请求从服务器加载数据

六、ajax和java后端结合使用：

function a1(){
            $.ajax({
                //请求将文本输出的值，
    url:"${pageContext.request.contextPath}/ajax/a1",
                // 发送给服务器，#txtName注意是#
                data:{"name":$("#txtName").val()},
                // 接受服务器返回的数据
                sucess:function (data,status){
                    alert(data)
                    alert(status)
                }
            });

用户名：
<input type="text" id="txtName" onblur="a1()">

注释：注意，这个前端取值的方式，在data中是取值的过程，一个键值对，key的取值，是和后端接口的属性相对应，使用

${#txtName},代表去的是id属性为txtName的值，最重要的是调用了val();函数，否则取不到值，和model存值，在前端取值不一样。

七、用ajax实现登录注册：

java 后端controller层：

@ResponseBody
@RequestMapping("/a3")
public String ajax3(String name,String pwd){
    String msg="";
    if(name!=null){
        if("admin".equals(name)){
            msg="ok";
        }else{
            msg="name is error.";
        }
    }
    if(pwd!=null){
        if("123456".equals(pwd)){
            msg="ok";
        }else{
            msg="password is false.";
        }
    }
    return msg;
}

jsp页面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录注册</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>
    <script>
        function a1(){
            $.post({url:"${pageContext.request.contextPath}/ajax/a3",
                data:{"name":$("#name").val()},
                    success:function (data){
                        if (data.toString()=="ok"){//信息核对成功
                            $('#userInfo').css("color","green");
                        }else{
                            $('#userInfo').css("color","red");
                        }
                        $("#userInfo").html(data);
            }
            })
            {
            }
        }
        function a2(){
            $.post({
                url:"${pageContext.request.contextPath}/ajax/a3",
                data:{"pwd":$("#pwd").val()},
                success:function (data){
                    if (data.toString()=="ok"){//信息核对成功
                        $('#pwdInfo').css("color","green");
                    }else{
                        $('#pwdInfo').css("color","red");
                    }
                    $("#pwdInfo").html(data);
                }
            })
            }
    </script>
</head>
<body>
<p>
    用户名:
    <input type="text" id="name" onblur="a1()">
    <span id="userInfo"></span>
</p>
<p>
    密码:
    <input type="text" id="pwd" onblur="a2()">
    <span id="pwdInfo"></span>
</p>
</body>
</html>

路远·情长

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery和ajax总结

前言：材料来自菜鸟教程，侵权立即删除。1、语法：$(selector).load(URL,data,callback);load() 方法从服务器加载数据，并把返回的数据放入被选元素中。必需的URL参数规定您希望加载的 URL可选的data参数规定与请求一同发送的查询字符串键/值对集合。可选的callback参数是 load() 方法完成后所执行的函数名称。2、使用：这是示例文件（"demo_test.txt"）的内容：<h2>jQuery A...
复制链接

扫一扫