简单使用ajax（get方式）

最新推荐文章于 2020-11-27 04:16:00 发布

karen_wang

最新推荐文章于 2020-11-27 04:16:00 发布

阅读量837

点赞数

CC 4.0 BY-SA版权

分类专栏： js相关文章标签： ajax xmlhttprequest function javascript string input

本文链接：https://blog.youkuaiyun.com/karen_wang/article/details/6285977

js相关专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个简单的Ajax应用实例，通过Ajax实现用户信息查询并实时更新显示结果。具体包括前端页面设计、Ajax调用及后端处理流程。

ajax的使用，老是查了忘，忘了查，这里记录一下简单使用的情况：

需求：

输入账号，查询该账号的相关属性，为了使效果好看一点，这里使用ajax，将查询出来的结果直接放在输入框下边显示。

代码如下：

1、selectUser.jsp

<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>Insert title here</title> </head> <mce:script type="text/javascript" language="javascript"></mce:script> <body> <p>1、根据passport查用户信息</p> <form name="form1" method="post" action=""> <p>passport： <input type="text" name="passport"> <input type="button" name="Submit" value="查询" onClick="return selectByPassport()"> </p> <div id="res"></div> </form> </body> </html>

2、SelectByPassport.java是一个Serverlet，具体完成的事情是，取得对应p的相关信息，返回给浏览器。主要代码如下：

StringBuffer re_buffer=new StringBuffer(""); if(r.size()>0){ re_buffer.append("通行证:"+p+"<br>"); }else{ re_buffer.append("通行证"+p+"-- 未查到对应记录"); } for(KeyValue kv:r.raw()){ re_buffer.append(new String(kv.getColumn())+":"+new String(kv.getValue())+"<br>"); } resp.setCharacterEncoding("utf-8"); PrintWriter out=resp.getWriter(); out.write(re_buffer.toString()); out.flush(); out.close();