jquery ajax

来源：互联网发布：java web发布到服务器编辑：程序博客网时间：2024/06/14 18:43

我们只需要一行简单的代码，就可以实现 AJAX 功能。主要有以下四种方法：

1、load方法

作用：从服务器加载数据，并把返回的数据放入被选元素中；语法：$(selector).load(URL,data,callback);
例如：$("#div1").load("demo_test.txt"); 把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中

2、两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。先看get方法：

3、post方法：同get方法

4、ajax方法：jQuery.ajax([settings])
该方法是 jQuery 底层 AJAX 实现，简单易用的高层实现见 $.get, $.post 等

综合举例：

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><script type="text/javascript" src="js/jquery-3.2.1.min.js"></script></head><body><div class="div1"></div><script>/*$(".div1").load("stu.json",function(){//1、load方法;//var str=JSON.stringify(data);$(".div1").html(str);});*//*$.get("stu.json",function(data){//2、get方法var str=JSON.stringify(data);$(".div1").html(str);});*//*$.post();  //3、post方法*//*$.ajax({   //4、ajax方法type: "get",url: "stu.json",async: true,success: function(data) {var str = JSON.stringify(data);$(".div1").html(str);}});*/</script></body></html>

例：前面一篇博客通过js使用ajax实现图片轮番滚动，现在通过jquery使用ajax来实现同样的效果：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script></head><style>.container {width: 400px;height: 800px;margin: auto;//background-color: pink;}.imgdiv {width: 100%;height: 30%;background-color: pink;}.dotdiv {width: 100%;height: 10%;margin: auto;//background-color: palegoldenrod;}.main {width: 50%;height: 100%;margin-left: 25%;margin-right: 25%;//background-color: red;}img {width: 100%;height: 100%;}ul li {width: 50px;height: 20%;color: orange;float: left;list-style-type: circle;}.dot1 {width: 10px;height: 10px;background-color: wheat;border-radius: 50%;float: left;margin-left: 10%;}.dot {/*dot为选中的*/width: 10px;height: 10px;background-color: gray;border-radius: 50%;float: left;margin-left: 10%;}</style><body><div class="container"><div class="imgdiv"><img  id="tp" onmousemove="over()"/></div><div class="dotdiv"><div class="main"><button class="dot" onmouseover="click1(0)"></button><button class="dot1" onmouseover="click1(1)"></button><button class="dot1" onmouseover="click1(2)"></button></div></div></div><script>var jon;$.ajax({type:"get",url:"imgsrc.json",async:true,success:function(data){jon=data;}});var img = document.getElementById("tp");var j = 0;     /*这里ajax异步请求是有时差的，setIntervar()函数应该在ajax之前执行，之所以fun函数里jon已经有值，     也是因为setInterval定时补上了这个时间差*/function fun() {//alert(jon.length);if(j == jon.length - 1) {j = 0;} else {j++;}img.src = jon[j].src;var dot = document.getElementsByClassName("dot");for(var i = 0; i < dot.length; i++) {dot[i].className = "dot1"; //清空所有的点为未选中}var dots = document.getElementsByClassName("dot1");dots[j].className = "dot";}var a=setInterval(fun, 1000);function click1(v){clearInterval(a);    //alert(v);var dot = document.getElementsByClassName("dot");for(var i = 0; i < dot.length; i++) {dot[i].className = "dot1"; //清空所有的点为未选中}var dots = document.getElementsByClassName("dot1");dots[v].className = "dot";document.getElementById("tp").src=jon[v].src;a=setInterval(fun, 2000);}</script></body></html>

效果：

阅读全文

0 0