JQuery AJAX基本使用

参考文档：JQuery在线文档

JQuery Ajax使用的四种基本方式

post方式

格式

$.post(url, [data], [callback], [type])

参数1：url，请求路径
参数2：data，请求参数
参数3：callback，回调函数
参数4：type，返回内容格式，默认的是text,xml, html, script, json, text, _default。

例子

获得 test.php 页面返回的 json 格式的内容

$.post("test.php", { "func": "getNameAndTime" }, function(data){alert(data.name); // Johnconsole.log(data.time); //  2pm
}, "json");

get方式

格式

$.get(url, [data], [callback], [type]);

第一个参数：请求的路径如：

${pageContext.request.contextPath}/Servlet1

第二个参数：请求的参数格式：

// JSON数据格式
{key1:value1,key2:value2}

第三个参数：回调函数格式：

function(data){alert(data);
}

第四个参数：返回内容格式：

xml, html, script, json, text, _default。

服务器响应编码为：application/json;charset=UTF-8，回调函数data类型是json对象

服务器响应编码为：text/html;charset=UTF-8，回调函数data类型是字符串。

$.get() 以get请求方式发送ajax除了请求方式不同，使用方式与$.post()完全一致。

.get()和.get()和.post()两种方式书写格式一模一样，只需要修改.get()为.get()为.post()，其余地方不需要改动！

它们的请求方式不同$.get()为get请求，$.post()为post请求。这两种请求方式在处理编码方式上不一样，建议优先使用$.post()请求方式。

例子

显示 test.cgi 返回值(HTML 或 XML，取决于返回值)，添加一组请求参数。

$.get("test.cgi", { name: "John", time: "2pm" }, function(data){alert("Data Loaded: " + data);
});

load方式(少用)

适用于某个HTML元素需要获取服务器发送的响应信息，没有参数的情况下使用get请求，有参数则是POST请求。

格式

load(url, [data], [callback])

url:待装入 HTML 网页网址。
data:发送至服务器的 key/value 数据。
callback:载入成功时回调函数。

例子

加载 feeds.html 文件内容。

// get方式
$("#feeds").load("feeds.html");

// 同上，但是以 POST 形式发送附加参数并在成功时显示信息。
jQuery 代码:$("#feeds").load("feeds.php", {limit: 25}, function(){alert("The last 25 entries in the feed have been loaded");});

ajax方式

格式

$.ajax(url,[settings])

url:一个用来包含发送请求的URL字符串。
settings:AJAX 请求设置。所有选项都是可选的。

例子

检测用户名是否重复

function checkUsername(username) {var value = username.value;$.ajax({type : "POST",  //请求方式url : "${pageContext.request.contextPath}/RegisterServlet",  //请求路径data : {  //请求参数username : value},success : function(msg) {  //异步请求成功执行的回调函数alert("成功了: " + msg);$("#usernameinfo").html(msg);},//ajax引擎一般用不到；状态信息；抛出的异常信息error : function(XMLHttpRequest, textStatus, errorThrown) {alert(textStatus);alert("失败了"+errorThrown)}});
}

PS：要想回写错误信息，只有$.ajax方式。
PS：具体的Settings，可以查该博文首部的文档。

案例：登录验证

验证HTML

<div class="form-group"><label for="username" class="col-sm-2 control-label">用户名</label><div class="col-sm-6"><!-- 绑定一个离焦事件，用于Ajax判定用户名是否合法 --><input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" onblur="checkUserNameJQuery(this)"></div><div class="col-sm-4" id="userNameInfo"><!-- <span class="label label-success">用户名可用</span> <span class="label label-danger">用户名不可用</span> --></div>
</div>

JQuery使用AJAX实现用户名验证

<script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">function checkUserNameJQuery(obj) {// post请求// 参数1：url:发送请求地址// 参数2：[data]:待发送 Key/value 参数// 参数3：[callback([data])]发送成功时回调函数//        [data]回调函数的参数：响应体对象// 参数4：type:返回内容格式，xml, html, script, json, text, _default。$.post("${pageContext.servletContext.contextPath}/CheckUserNameIsExistServlet", {username: obj.value}, function (data) {$("#userNameInfo").html(data);});}
</script>

Servlet方法

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/html;charset=utf-8");request.setCharacterEncoding("utf-8");// 获取用户名参数String username = request.getParameter("username");// 查询用户try {User user = new UserService().getUserByUserName(username);if (user == null) {response.getWriter().write("<span class='label label-success'>用户名可用</span>");} else {response.getWriter().write("<span class='label label-danger'>用户名不可用</span>");}} catch (SQLException e) {e.printStackTrace();}
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);
}

PS：dao层和service层不再给出，大致逻辑是service调用dao层的查询方法得到User对象，再返回给Servlet。

AJAX搜索下拉菜单案例

搜索HTML

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="float: right;"><form class="navbar-form navbar-right" role="search"><div class="form-group"><input type="text" class="form-control" placeholder="Search" id="searchText"></div><button type="submit" class="btn btn-default">Submit</button></form><!-- 显示查询信息的div --><div id="completeShow" style="display: none;"><ul id='itemul' class='list-group'><!-- <li class='list-group-item'><a href='#'>查询结果1</a></li><li class='list-group-item'><a href='#'>查询结果2</a></li><li class='list-group-item'><a href='#'>查询结果3</a></li><li class='list-group-item'><a href='#'>查询结果4</a></li><li class='list-group-item'><a href='#'>查询结果5</a></li> --></ul></div>
</div>

Javascript函数

高亮函数

// 将关键字高亮
function replaceKeyWord(text, key) {// 关键字出现的索引var index = 0;// 存放关键字出现的索引var arr = new Array();var i = 0;// 获取关键字开始出现的索引while((index = text.indexOf(key, index)) >= 0) {arr[i++] = index;index++;}// 关键字的长度var keyLen = key.length;// 从后往前修改文本for (var j = arr.length - 1; j >= 0; j--) {text = text.substring(0, arr[j]) + "<span style='background-color: yellow;'>" + text.substr(arr[j], keyLen) + "</span>"+ text.substring(arr[j] + keyLen, text.length);}// 测试// alert(text);return text;
}

搜索函数

// Ajax搜索
$(function() {$("#searchText").keyup(function() {// 搜索框绑定一个键盘弹起事件// alert("msg");// 清空子元素$("#itemul").empty();// 不等于空才发送请求if($(this).val() != "") {$.post("${pageContext.servletContext.contextPath}/SearchTextServlet", {"text": this.value}, function(data) {// 测试数据是否已获取// alert(data);// 获取到数据if($(data).size() > 0) {// 显示下拉菜单$("#completeShow").slideDown(200);$.each(data, function() {$("#itemul").append("<li class='list-group-item'><a href='#'>"+ replaceKeyWord(this.word + this.pinyin, $("#searchText").val()) +"</a></li>");});} else {// 隐藏下拉菜单$("#completeShow").slideUp(200);}}, "json");} else {// 隐藏下拉菜单$("#completeShow").slideUp(200);}}).focus(function() {// 聚焦事件，显示下拉菜单// 下拉菜单有元素则显示if($("#itemul li").size() > 0) {// 显示下拉菜单$("#completeShow").slideDown(200);}}).click(function() {// 禁用隐藏下拉菜单事件return false;});// 点击其他区域隐藏下拉菜单$(document).click(function() {$("#completeShow").slideUp(200);});});

SearchTextServlet

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/html;charset=utf-8");request.setCharacterEncoding("utf-8");// 获取表单信息String text = request.getParameter("text");// System.out.println(text);List<Word> words = new ArrayList<>();try {if (text != null && !"".equals(text) && !text.matches("[_%]")) {// 在数据库中搜索，只返回前五条记录words = new WordService().searchText(text.trim());}} catch (SQLException e) {e.printStackTrace();}// 转换成JSON数组对象JSONArray jsonWords = JSONArray.fromObject(words);response.getWriter().write(jsonWords.toString());
}public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);
}

PS：dao层和service层不再给出，大致逻辑是service调用dao层的查询方法得到Word对象集合，再返回给Servlet。