补充内容
Ajax技术是后端开发人员必备的重点技术
注意:${pageContext.request.contextPath}为绝对路径;理解为:
http://localhost:8080/项目名
在绝对路径后面必须要加上/斜杠然后在加上controller的访问地址
${pageContext.request.contextPath}/jss/jquery-1.8.3.js
这个涉及到静态资源的知识这里就不多说了,路径的意思就是:访问项目下的jss目录下的jQuery文件
以下是本篇文章正文内容,下面案例可供参考
一、Ajax是什么?
Ajax是在浏览器上发送一个请求,而不用刷新浏览器
例如:浏览器输入一个字它会有很多选项弹出来
初学的时候一直要请求转发和重定向 代码量太大 使用Ajax技术大大降低开发时间
二、使用步骤
1.引入JQuery文件
代码如下(示例):
<script type="text/javascript" src="${pageContext.request.contextPath}/jss/jquery-1.8.3.js"></script>
2.Ajax使用的格式
代码如下(示例):
Ajax的格式有很多种:这里只展示两种(一种帮助理解,一种是开发常用)
实现功能:
第一种:
优点:仅次于初学者理解
缺点:繁琐的操作 反正就是代码多就麻烦
$.ajax({
type:"post", //post请求方式, 如果不写默认是get
url:"${pageContext.request.contextPath}/abc", //此处是请求的Controller路径
dataType:"json",//ajax传输的数据类型 json,text,html等 本人只记得这几个
data:{"key":"value"}, //一个json数据的格式(键值对的形式)
//回调函数 success成功的 意思就是请求成功就会执行这个回调函数
success:function(data){
console.log(data); //浏览器控制台输出controller return的数据
},
//回调函数 error 见名识意 请求失败会调用此函数,新手建议写上
error(){
},
})
第二种:(开发适用)
优点:格式简单,思路清晰、
缺点:初学者不容易理解
<script type="text/javascript">
function a1() {
$.post("${pageContext.request.contextPath}/jsonn",{"name":$("#name").val()},function (data) {
$("#sp").html(data);
})
}
</script>
另外所有的代码奉上(环境得你自己搭建哈,主要就是搭建好静态资源的访问就行了)
我使用的是SpringMVC开发所以springmvc的静态资源访问配置
不做过多说明,不能偏题哈
<!-- 访问静态资源 -->
<!-- 默认的注解映射的支持 -->
<mvc:annotation-driven>
<!-- 处理请求返回json字符串的中文乱码问题 -->
<mvc:message-converters>
<bean class="org.springframework.http.converter.StringHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/html;charset=UTF-8</value>
<value>application/json;charset=UTF-8</value>
</list>
</property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
<!-- 对静态资源文件的访问 -->
<mvc:resources mapping="/html/**" location="/WEB-INF/html/" ></mvc:resources>
<mvc:resources mapping="/img/**" location="/WEB-INF/img/"></mvc:resources>
<mvc:resources mapping="/jss/**" location="/WEB-INF/jss/"></mvc:resources>
接下来是Controller的
package com.controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.stereotype.Controller;
@Controller
public class HelloController {
@RequestMapping("/jsonss")//访问这个controller中的jsonss 跳转到json.jsp上去
public String json(){
return "json";
}
@RequestMapping("/jsonn")//Ajax请求的路径
@ResponseBody
public String ujson(String name){//Ajax传过来的参数 参数名要和传过来的Key一致
System.out.println(name);//控制台打印验证
String msg = "";//一个空字符串
if (null!=name){//判空操作
if (name.equals("admin")){//如果我的传输数据是admin就设置msg的值为ok否则为错误
msg = "ok";
}else {
msg = "错误";
}
}
return msg;//然后返回这个字符串
}
}
该展示一下json.jsp了
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<head>
<title>Title</title>
</head>
<!-- 这里是引入JQuery文件 文章最前面的补充有说明 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jss/jquery-1.8.3.js"></script>
<body>
<form>
<!-- 一个文本输入框 onblur失去焦点调用a1()函数 -->
<input type="text" name="name" id="name" onblur="a1()">
<!-- 用于展示效果的标签 如果是admin会显示ok 否则是错误 -->
<span id="sp" style="color: red">1</span>
</form>
</body>
<script type="text/javascript">
function a1() {//函数
$.post("${pageContext.request.contextPath}/jsonn",{"name":$("#name").val()},function (data) {
$("#sp").html(data);
})
}
</script>
</html>
效果图:
初始化的界面:
成功的:
错误的:
总结
以上就是今天要讲的内容,本文仅仅简单介绍了Ajax的使用,Ajax技术其实很简单,也就是发送一个请求,获取controller返回的数据。上述例子就是最常见的注册时的用户名是否已存在,然后 立即给出提示
学会了吗?学会就点个赞吧!感谢分享