ajax 异步刷新实例
2013-09-26 17:11
162 查看
1 在网上下载jquery.js
2 写第一个jsp页面
index.jsp
query.js
query.jsp 被访问的页面
index.jsp 页面->query.js触发访问->query.jsp 得到结果并返回到query.js中->使用返回的结果来回写index.jsp页面数据
2 写第一个jsp页面
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <% System.out.println("进入调用页面"); %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type = "text/javascript" src = "jquery.js"></script> 加入jquery.js文件,否则不能识别js中的那些格式 <script type="text/javascript" src = "query.js"></script> </head> <body> This is my JSP pagess. <br> name:<input type = "text" id = "name" name = "name" value = "myname"/><br/> tel :<input type = "text" id = "tel" name = "tel" /><br/> <input type = "button" id = "queryok" name = "queryok" value = "query" onclic = "query()"/> </body> </html>
query.js
$(document).ready(function(){ $("#queryok").click(function() { var oldname = $("#name").val(); $.ajax({ type: "post", //请求方式 url: "query.jsp", //请求页面路径 async:false, // cache:false, data: //传过去的参数,可以通过request来取得 { getname:"queryname", gettel:"querytel" }, dataType: "json", //请求页面返回的字符串结果类型 success:function(datatmp) //成功后,返回的结果存在datatmp变量中 { $("#name").val(datatmp.name); $("#tel").val(datatmp.tel); }, error:function() { oldname = 'newsdd'; } }); }); });
query.jsp 被访问的页面
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <% String myname = "wangdian"; String mytel = "123321"; String json = "{\"name\":\"" + myname + "\"," + "\"tel\":\"" + mytel + "\"}"; System.out.println("json:" + json); out.print(json); %>
index.jsp 页面->query.js触发访问->query.jsp 得到结果并返回到query.js中->使用返回的结果来回写index.jsp页面数据
相关文章推荐
- ajax实现无刷新上传附件并且显示进度条的实例
- php+ajax实时刷新简单实例
- 页面无刷新更新数据(ajax异步加载)
- JQuery的Ajax请求实现局部刷新的简单实例
- 如何手写Ajax实现异步刷新
- 关于ajax结合分部视图实现异步刷新
- AJAX+jsp无刷新【验证码】实例
- ajax异步上传到又拍云的实例教程
- ajax同步异步详解与回调带参数实例测试
- ajax实现自动刷新页面实例
- spring mvc 和ajax异步交互完整实例代码
- Ajax简单实例----无刷新求和运算
- Ajax异步提交表单数据的说明及方法实例
- ajax无翻页刷新简单实例
- php+jquery Ajax异步上传图片(ajaxSubmit)实例
- Ajax同步、异步、异步刷新
- ajax无页面刷新效果实例
- Ajax实现异步刷新验证用户名是否已存在的具体方法
- Ajax实现异步刷新验证用户名是否已存在的具体方法
- AJAX+jsp无刷新验证码实例