使用jQuery简化Ajax-优快云博客

本文链接：https://blog.youkuaiyun.com/Get_More/article/details/76691963

我们经常不会原生地去写Ajax，常常会在页面中使用第三方的JS库，比如说jQuery,这些JS库已经封装了类似于Ajax请求的这些方法，这样我们就不用关心浏览器的兼容性和不同的实现，我们可以很方便地调用第三方库里的一些方法，大大简化我们的操作。

这里写图片描述
jsp页面中案例：
第二个最常见

jsp的头文件省略,MyEclipse自动生成的

    <script type="text/javascript" src="<%=basePath%>js/jquery-1.6.4.min.js"></script>   
  </head>   
  <script type="text/javascript">   
     function ajaxrequest(){   
        $.ajax({   
           type:"get",   
           url:"lpm",   
           dataType:"text",   
           data:"name=hello world&age=15",   
           success:function(msg){   
              $("#name").val(msg);   
           }   
        });   
     }   
     function ajaxre2(){   
        $.get("lpm",{name:"lpm",age:"25"},function(msg){   
           $("#wenben").val(msg);   
        });   
     }   

  </script>   

  <body>   
    <input type="button" id="name" value="按钮" onclick="ajaxrequest()" />   
    <input type="text" id="wenben" onfocus="ajaxre2()"/>   
  </body>   
</html>

jsp的头文件省略,MyEclipse自动生成的
<script type="text/javascript"  src="js/jquery-1.3.2.min.js"></script>
  </head>
  <script type="text/javascript">
  $(function(){
  /* blur意思就是不聚焦的时候触发，val()返回textName的内容，如果val()有参数就是给textName赋值，
     val() 方法返回或设置被选元素的值 */
      $("#textName").blur(function(){
        $.post("ajax.do",{'name':$("#textName").val()},function(data){
            alert(data);
        })  
      }
    )
  });
  </script>
  <body>
  用户名  <input type="text"  id="textName"><br>
  </body>
</html>

调试记载：

1 .

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

其实在src前不用加工程路径，因为在Myeclipse的头文件中

<base href="<%=basePath%>">

已经默认前缀了，而且末尾是带/号的，不用再src路径下以/开头

2 .

<script type="text/javascript">

</script>

里面的片段会变成白色，看起来十分难受，Myeclipse设置
这里写图片描述

3 . $(function(){}）相当于$ (document).ready(function(){})
jQuery里面入口方法，相当于java的main方法

Jquery中的Ajax