分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

jq中的ajax合集总结

发布时间:2023-09-06 01:46责任编辑:熊小新关键词:暂无标签

参考原文

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方法

点我查看

jq中的ajax合集总结

原文地址:https://www.cnblogs.com/xiaoxiaoyao/p/8623810.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved