JAVAWEB23[AJAX]

最新推荐文章于 2024-11-04 22:26:34 发布

败酔

最新推荐文章于 2024-11-04 22:26:34 发布

阅读量797

点赞数

文章标签： java

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_63985180/article/details/123779025

版权

一、$.ajax()

问题：什么是Ajax? 答: 只刷新局部页面的技术

1、AJAX的运用

搜索自动提示功能

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>

<script type="text/javascript">
   $(function() {
       //给文本框失去焦点事件
       $("#sname").keyup(function(){//keyup 键盘事件
           //让div显示
           $("#bb").show();
           //获取文本框的值
           var name = $("#sname").val();
           //二、$.post()
           $.post("autoFill.do", {iname:name}, function(data){
               //JSON格式的对象数组的字符串
               //需遍历将JSON格式的对象数组字符串-->js的对象数组
               //var ss=eval(data); js方式
               var ss = $.parseJSON(data);//JQuery方式
               var sb="<ul>";
               //遍历集合
               $.each(ss,function(i,u){
                   sb+="<li οnclick=\"myf('"+u.uname+"')\" οnmοuseοver=\"this.className='xx'\" οnmοuseοut=\"this.className='yy'\" >"+u.uname+"</li>";
               });
               sb+="</ul>";
               //给div赋值
               $("#bb").html(sb);
           },"text")
       });
   })

   function myf(name){
       $("#sname").val(name);
       //让div隐藏
       $("#bb").hide();
   }
</script>
</head>
<body>
   <h2>使用jQuery的ajax+json实现自动补全功能</h2>
   <input type="text" id="sname" style="width:400px;">
   <div id="bb"></div>
</body>

Ajax参数表

常用参数说明

url

一个用来包含发送请求的URL字符串(请求地址)

type

请求方式 (“POST” 或 “GET“[默认])

data

发送到服务器的数据(参数)

dataType

预期服务器返回的数据类型(xml、json、text)

success(data)

请求成功的回调函数

error

请求失败的回调函数

2、AJAX的好处

答：无刷新：不刷新整个页面，只刷新局部。这样能有效利用带宽，提高用户体验

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。