JQuery的Ajax实现+SpringMVC

最新推荐文章于 2021-11-22 23:39:09 发布

木偶线

最新推荐文章于 2021-11-22 23:39:09 发布

阅读量1.4k

点赞数

分类专栏： SSH学习 Ajax

本文链接：https://blog.csdn.net/qq_31796663/article/details/71591338

版权

SSH学习同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

Ajax

3 篇文章 0 订阅

订阅专栏

Ajax概述

Ajax是Asynchronous JavaScript and XML的缩写，也叫做异步的JavaScript和XML。

同步和异步的区别

同步：当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面进入假死状态，当这个AJAX执行完毕后才会继续运行其他代码，页面假死状态才会解除。也就是说，如果用ajax的话，同步那就没有什么意义了。

异步：当JS代码加载到当前的AJAX的时候，这时候浏览器在发送请求的同时，也在解析页面的代码，也就是说浏览器同时在做两件事。

JQuery中的ajax

我们都知道JQuery是对js的一种封装，通过它可以很熟练的使用jQuery来操作DOM对象，实现对页面的动态渲染。同样的JQuery中也对原生态的js中的Ajax进行了封装，封装成了一个方法ajax()。通过各这个方法传递参数，就可以实现异步请求。至于方法中的参数，大家可以去查阅资料JQuery中的Ajax，在这里就是使用一些常见的方法参数。

测试页面testAjax1.jsp：

方法与之前的不不变，只是页面中进行了修改

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'login.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="${pageContext.request.contextPath }/js/jquery-1.9.1.min.js"></script>
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

	<script type="text/javascript">
		$(function() {
			$("#username").blur(function() {
				$.ajax({
					type: "POST",
					url: "${pageContext.request.contextPath}/ajax/testAjax.do?time=" + new Date(),
					data: {
						username: $("#username").val(),
					},
					async: true,
					dataType: "text",
					success: function(result) {
						$("#red").html(result);
					}
				});
			});
		});
	</script>
	

  </head>
  
  <body>
    <form>
    	username:<input type="text" name="username" id="username"><span id="red"></span><br />
    	password:<input type="password" name="password"><br />
    	address:<input type="text" name="address"><br />
    	<input type="submit" value="login">
    </form>
  </body>
</html>

总结：

注意引入JQuery的js文件，否则会报错的。
async：true，表示是异步请求，也只有为true的时候，ajax才会有意义。
后台请求路径的方法和原生态的js中的Controller是同一个方法
至于Struts2中的异步请求和这个一样，只是修改路径和页面。

木偶线

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery的Ajax实现+SpringMVC

Ajax概述Ajax是Asynchronous JavaScript and XML的缩写，也叫做异步的JavaScript和XML。同步和异步的区别同步：当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面进入假死状态，当这个AJAX执行完毕后才会继续运行其他代码，页面假死状态才会解除。也就是说，如果用ajax的话，同步那就没有什么意义了。异步：当JS代码加载
复制链接

扫一扫