广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > html >ajax中怎么通过异步加载实现局部刷新
  • 926

0
分享到

ajax中怎么通过异步加载实现局部刷新

2024-04-02 19:04:59 926人浏览 安东尼
摘要

这篇文章给大家介绍ajax中怎么通过异步加载实现局部刷新，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。[html] view plain copy <sc

这篇文章给大家介绍ajax中怎么通过异步加载实现局部刷新，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

[html] view plain copy

  1. <script type="text/javascript" src="${pageContext.request.contextPath }/js/Jquery-2.1.0.js"></script>  

  2. <script type="text/javascript">  

  3.     $(function(){  

  4.         $("#inp1").blur(function(){  

  5.             var name=$(this).val();  

  6.             $.ajax({  

  7.                 url:"${pageContext.request.contextPath}/demo",  

  8.                 data:{"uname":name,"upwd":"jack123","age":12},  

  9.                 cache:"false",  

  10.                 async:"true",  

  11.                 dataType:"JSON",  

  12.                 type:"post",  

  13.                 success:function(data){  

  14.                   

  15.                     if(data.flag=="1"){  

  16.                         $("#sp").html("用户名存在");  

  17.                     }else{  

  18.                         $("#sp").html("");  

  19.                     }  

  20.                 },  

  21.                 error:function(){  

  22.                     alert("服务器端异常");  

  23.                 }  

  24.                   

  25.                   

  26.                   

  27.             });  

  28.               

  29.               

  30.               

  31.         });  

  32.       

  33.           

  34.           

  35.           

  36.     })  

  37.   

  38.   

  39.   

  40. </script>  

  41.   

  42.   

  43. <title>Insert title here</title>  

  44. </head>  

  45. <body>  

  46. <input type="text" value="" id="inp1"><span id="sp"></span>  

  47. </body>  

  48. </html>  

jquery封装的ajax 进行数据交互，  实现异步加载

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-2.1.0.js"></script>


<script type="text/javascript">
var json={
"flag":"1" 
};
//alert(json.flag);
$(function(){
//$.get(url,data,success(data,status,xhr),dataType)
$("#btn").click(function(){
$.get(
"${pageContext.request.contextPath}/demo",
{"uname":"jack","upwd":"123","age":12},
function(data,status){
//var data={"flag":"1"}
alert(data);

if(data.flag=="1"){
$("#sp").html("用户名已经被占用").CSS("color","red");
}else{
$("#sp").html("用户名可以使用").css("color","green");
}

},
"json"
);
})
});
</script>
</head>
<body>
<input type="button" id="btn" value="$.get异步请求服务器"><span id="sp">
</body>

关于ajax中怎么通过异步加载实现局部刷新就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: ajax中怎么通过异步加载实现局部刷新

本文链接: https://www.lsjlt.com/news/77191.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • ajax中怎么通过异步加载实现局部刷新
    这篇文章给大家介绍ajax中怎么通过异步加载实现局部刷新，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。[html] view plain copy <sc...
    99+
    2022-10-19
  • AJAX怎么实现异步和局部刷新
    小编给大家分享一下AJAX怎么实现异步和局部刷新，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！Overriew： onReady...
    99+
    2022-10-19
  • 如何实现AJAX异步调用和局部刷新
    这篇文章主要为大家展示了“如何实现AJAX异步调用和局部刷新”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何实现AJAX异步调用和局部刷新”这篇文章吧。引言要完整实现一个AJAX异步调用和局部...
    99+
    2023-06-29
  • 实现AJAX异步调用和局部刷新的基本步骤
    目录引言1、创建XMLHttpRequest对象2、创建HTTP请求3、设置响应HTTP请求状态变化的函数4、设置获取服务器返回数据的语句5、发送HTTP请求6、局部更新7、完整的A...
    99+
    2022-11-13
  • 怎么使用Ajax实现异步刷新
    小编给大家分享一下怎么使用Ajax实现异步刷新，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！所谓的异步刷新，就是不刷新整个网页进行更新数据。只有通过js才能实现A...
    99+
    2023-06-08
  • layui中使用checbox怎么实现在Ajax局部刷新
    本篇文章给大家分享的是有关layui中使用checbox怎么实现在Ajax局部刷新，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。1.需要添加一行代码（渲染后的checkbox代...
    99+
    2023-06-08
  • asp.net中怎么利用 jquery和ajax实现异步刷新
    本篇文章为大家展示了asp.net中怎么利用 jquery和ajax实现异步刷新，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。代码如下:<!DOCTYPE h...
    99+
    2022-10-19
  • Ajax怎么实现静态刷新页面过程带加载旋转图片
    这篇文章主要介绍“Ajax怎么实现静态刷新页面过程带加载旋转图片”，在日常操作中，相信很多人在Ajax怎么实现静态刷新页面过程带加载旋转图片问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望...
    99+
    2022-10-19
  • 使用ajax怎么实现一个页面局部加载功能
    今天就跟大家聊聊有关使用ajax怎么实现一个页面局部加载功能，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。什么是ajaxajax是一种在无需重新加载整个网页的情况下，能够更新部分网页...
    99+
    2023-06-08
  • webpack2中怎么实现异步加载
    本篇文章为大家展示了webpack2中怎么实现异步加载，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。webpack提供的一个非常强大的功能就是code spliti...
    99+
    2022-10-19
  • vue.js表格分页及ajax异步加载数据怎么实现
    这篇“vue.js表格分页及ajax异步加载数据怎么实现”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue.js表格分页及...
    99+
    2023-07-04
  • Android中怎么实现底图局部加载移动
    今天就跟大家聊聊有关Android中怎么实现底图局部加载移动，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。具体如下：public class MapMgr&nbs...
    99+
    2023-05-30
    android
  • VueJs中怎么实现异步动态加载块
    本篇文章给大家分享的是有关VueJs中怎么实现异步动态加载块，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。首先定义组件为异步加载define(...
    99+
    2022-10-19
  • Android中怎么通过自定义控件实现下拉刷新效果
    本篇文章给大家分享的是有关Android中怎么通过自定义控件实现下拉刷新效果，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。@Override  protec...
    99+
    2023-05-30
    android
  • react native中怎么利用FlatList实现下拉刷新上拉加载功能
    本篇文章为大家展示了react native中怎么利用FlatList实现下拉刷新上拉加载功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。android效果图总体...
    99+
    2022-10-19
  • Flutter中怎么利用listview实现下拉刷新上拉加载更多功能
    这期内容当中小编将会给大家带来有关Flutter中怎么利用listview实现下拉刷新上拉加载更多功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。下拉刷新在Flutter中系统已经为我们提供了googl...
    99+
    2023-06-20
  • Android中怎么通过自定义view实现进度条加载效果
    Android中怎么通过自定义view实现进度条加载效果，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。分析图:代码如下:package com.example.d...
    99+
    2023-05-30
    android view
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作