jq中关于ajax的方法很多
重点关注打红点的几个
1、首先说说$,ajax(),
其实后面要讲到的$.get(),$.post()等等都是基于$.ajax()的，都可以改写成$.ajax()的形式，
示例：
html:
1 <html>
2 <head>
3 <meta charset="UTF-8">
4 <title>$.ajax()方法</title>
5 <script src="../js/jquery-3.2.1.js"></script>
6 <script>
7 $(function(){
8 $(".btn").click(function(){
9 $.ajax({url:"111的请求数据.txt",success:function(result){
10 $("p").html(result);
11 }
12 })
13 })
14 })
15 </script>
16 </head>
17 <body>
18 <p>这是刷新前的文本</p>
19 <input type="button" class="btn" value="点击实现异步刷新功能">
20 </body>
21 </html>
对应的请求数据（一段文本）：
AJAX is not a programming language. It is just a technique for creating better and more interactive web applications.
2、$.get()方法
html代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <script src="../js/jquery-3.2.1.js"></script>
6 <script>
7 $(function(){
8 $("#btn").click(function(){
9 $.get("222请求的数据.html",function(data){
10 $("#ul1 li").append(data);
11
12 })
13 })
14 })
15 </script>
16 <title></title>
17 </head>
18 <body>
19 <ul id="ul1">
20 <li>黄鹤楼</li>
21 </ul>
22 <button id="btn">click me</button>
23 </body>
24 </html>
请求数据代码：
<li>故人西辞黄鹤楼</li> <li>烟花三月下扬州</li> <li>孤帆远影碧空尽</li> <li>唯见长江天际流</li>
3、$.getJSON方法：
html代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <script src="../js/jquery-3.2.1.js"></script>
6 <script>
7 $(function(){
8 $("#btn1").click(function(){
9 $.getJSON("333请求的数据.json",function(data){
10 //因为是json的格式，所以用点操作符，来一步一步获取指定的数据
11 $(".div1 p").html(data.person1.name)
12 })
13 })
14 })
15 </script>
16 </head>
17 <body>
18 <button id="btn1">click me </button>
19 <div class="div1" style="width:300px;height:200px;border: 1px solid red;">
20 <span>请求结果第一个人的姓名是：</span><br />
21 <p></p>
22 </div>
23 </body>
24 </html>
JSON代码
1 {
2 "person1":{
3 "name":"haha",
4 "age":21,
5 "city":"wuhan"
6 },
7 "person2":{
8 "name":"xiaxiaoyao",
9 "age":23,
10 "city":"beijing"
11 },
12 "person3":{
13 "name":"en",
14 "age":2,
15 "city":"shenzhen"
16 }
17 }
4、用$.ajax()改写其它几个方法
例如，可以使用下面的jQuery代码代替$.getScript方法：
1 $(function(){
2 $(‘#send‘).click(function() {
3 $.ajax({
4 type: "GET",
5 url: "test.js",
6 dataType: "script"
7 });
8 });
9 });
再例如，可以使用以下jQuery代码来代替$.getJSON()方法：
$(function(){
$(‘#send‘).click(function() {
$.ajax({
type: "GET",
url: "test.json",
dataType: "json",
success : function(data){
$(‘#resText‘).empty();
var html = ‘‘;
$.each( data , function(commentIndex, comment) {
html += ‘<div class="comment"><h6>‘ + comment[‘username‘] + ‘:</h6><p class="para">‘ + comment[‘content‘] + ‘</p></div>‘;
});
$(‘#resText‘).html(html);
$(‘#resText‘).val(html);
}
});
});
});
5、$.getScript方法
点我查看
原文地址：https://www.cnblogs.com/xiaoxiaoyao/p/8623810.html
时间： 2024-08-27 16:26:30