jQuery如何操作ajax

最新推荐文章于 2022-10-05 01:06:56 发布

Recar

最新推荐文章于 2022-10-05 01:06:56 发布

阅读量386

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Ajax 文章标签： jquery ajax

本文链接：https://blog.youkuaiyun.com/qq_28295425/article/details/53982197

Ajax 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用 jQuery 的 $.ajax 方法简化 AJAX 操作流程，并通过两个示例演示如何获取数据及验证用户名唯一性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery 操作ajax

$.ajax()-->XMLHttpRequest

就是 $.ajax({usrl:,type:get});

实现之前的

<!-- 引入jQ函数库 -->
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>


<script type="text/javascript">

    $(function(){//这个是页面加载完毕才开始执行的
         $("#showBtn").click(function(){
         alert('test');

   });         // id选择器 
    });
</script>
<body>

<b id="showBtn">点击查看上证指数</b>

<br>
<span id="msg"></span>

要注意的就是为什么要多写个 $(function(){});
因为这个的方法是在页面加载完毕后才执行的。如果不写这个直接写的话。js执行但是页面并没有加载完毕。就会失败。

如何操作！

$.ajax({
url:请求地址,
type:请求类型 post|get,
data：提交的数据，
async：同步或异步处理true|false,
dataType:预期服务器返回结果类型,
success：成功回调函数,
error:失败回调函数,
beforeSend:请求发送前回调函数
});

对之前的改成jQ的

$(function(){//这个是页面加载完毕才开始执行的
         $("#showBtn").click(function(){// id选择器 

         $.ajax({
         url:"servlet/demoservlet",
         type:"get",
         success:function(result){
         //result等价于 xhr.responseText
         //result就是服务器返回的内容
         $("#msg").html(result);
//html()方法就是把result以html的方式赋值给
//还可以text()就是以文本的形式
         }
         });

和之前的效果一样。但是却简单了很多。

对应的第二个检测用户名是否占用的

<script type="text/javascript">
    $(function (){
    $("#username").blur(function(){
    var username = $("#username").val()
         $.ajax({
         url:"servlet/Checkname",
         type:"post",
         data:{"username":username},
         success:function(result){
         //result等价于 xhr.responseText
         //result就是服务器返回的内容
         $("#check").html(result);
         }
         });

    });

    });

</script>