Jquery中的Ajax

来源：互联网发布：数据库权限管理编辑：程序博客网时间：2024/06/04 23:22

我们经常不会原生地去写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方法

阅读全文

0 0