看程序学jquery9-AJAX

最新推荐文章于 2024-07-05 14:21:58 发布

涂家豪

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量149

点赞数 1

分类专栏： jquery

本文链接：https://blog.csdn.net/tujiahao1/article/details/93339694

版权

jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

示例 1 : 提交AJAX请求

<script src="http://how2j.cn/study/jquery.min.js"></script>
 
<div id="checkResult"></div>
  
输入账号 :<input id="name" type="text">
  
<script>
$(function(){
   $("#name").keyup(function(){
     var page = "/study/checkName.jsp";
     var value = $(this).val();
        $.ajax({
            url: page,
            data:{"name":value},
            success: function(result){
              $("#checkResult").html(result);
            }
        });
   });
});
 
</script>

示例 2 : 使用get方式提交ajax

<script src="http://how2j.cn/study/jquery.min.js"></script>
 
<div id="checkResult"></div>
  
输入账号 :<input id="name" type="text">
  
<script>
$(function(){
   $("#name").keyup(function(){
     var page = "/study/checkName.jsp";
     var value = $(this).val();
 
        $.get(
            page,
            {"name":value},
            function(result){
              $("#checkResult").html(result);
            }
        );
   });
});
 
</script>

示例 3 : 使用post方式提交ajax

<script src="http://how2j.cn/study/jquery.min.js"></script>
  
<div id="checkResult"></div>
   
输入账号 :<input id="name" type="text">
   
<script>
$(function(){
   $("#name").keyup(function(){
     var page = "/study/checkName.jsp";
     var value = $(this).val();
  
        $.post(
            page,
            {"name":value},
            function(result){
              $("#checkResult").html(result);
            }
        );
   });
});
  
</script>

示例 4 : 最简单的调用ajax的方式

<script src="http://how2j.cn/study/jquery.min.js"></script>
   
<div id="checkResult"></div>
    
输入账号 :<input id="name" type="text">
    
<script>
$(function(){
   $("#name").keyup(function(){
     var value = $(this).val();
     var page = "/study/checkName.jsp?name="+value;
     $("#checkResult").load(page);
   });
});
   
</script>

示例 5 : 格式化form下的输入数据

<script src="http://how2j.cn/study/jquery.min.js"></script>
    
<div id="checkResult"></div>
<div id="data"></div>
<a href="http://how2j.cn/study/checkName.jsp">http://how2j.cn/study/checkName.jsp</a>
 
<form id="form">   
输入账号 :<input id="name" type="text" name="name"> <br>
输入年龄 :<input id="age" type="text" name="age"> <br>
输入手机号码 :<input id="mobile" type="text" name="mobile"> <br>
     
</form>
 
<script>
$(function(){
   $("input").keyup(function(){
      var data = $("#form").serialize();
      var url = "http://how2j.cn/study/checkName.jsp";
      var link = url+"?"+ data;
      $("a").html(link);
      $("a").attr("href",link);
   });
});
    
</script>