文章目录
一、iframe伪造
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe体验</title>
<script>
function go() {
let url = document.getElementById("url").value;
document.getElementById("iframe1").src=url;
}
</script>
</head>
<body>
<div>
<p>请输入地址：</p>
<p>
<input type="text" id="url">
<input type="button" value="提交" onclick="go()">
</p>
</div>
<div>
<!-- src="https://blog.csdn.net/Anna_with_mask/article/details/126143553?spm=1001.2014.3001.5502" frameborder="0"-->
<iframe id="iframe1" style="width: 100%;height: 500px"></iframe>
</div>
</body>
</html>
二、JQuery实现Ajax
1. 创建一个springmvc的项目实现ajax过程
- 创建maven项目，添加web支持，以及所需要的依赖
- 配置web.xml和applicationContext.xml
- 目录创建，并在项目结构中Artifacts中加入lib包并把jar包导入
- 在web.statics.js下导入jquery-3.6.0.js文件
- 编写html或jsp页面
- 编写controller
2. jsp页面或者html使用方法
- html使用前导入
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
- 使用方法
<script>
function a(){
//方法一：直接在括号内输入
jQuery.ajax("${pageContext.request.contextPath}/请求","其他option内容")
//方法二：逐个参数编写
$.ajax({
url:"${pageContext.request.contextPath}/请求",
data:{"param-Name":"value"},
type:"post/get",
success:function (data) {...},
error:function (msg) {...},
})
//方法三：将请求类型直接表示
$.post({
...
})
}
</script>
-
参数说明 jQuery.ajax(…)
-
url：请求地址
-
type：请求方式，GET、POST（1.9.0之后用method）
-
headers：请求头
-
data：要发送的数据
-
contentType：即将发送信息至服务器的内容编码类型(默认: “application/x-www-form-urlencoded; charset=UTF-8”)
-
async：是否异步
-
timeout：设置请求超时时间（毫秒）
-
beforeSend：发送请求前执行的函数(全局)
-
complete：完成之后执行的回调函数(全局)
-
success：成功之后执行的回调函数(全局)
-
error：失败之后执行的回调函数(全局)
-
accepts：通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型
-
dataType：将服务器端返回的数据转换成指定类型
- “xml”: 将服务器端返回的内容转换成xml格式
- “text”: 将服务器端返回的内容转换成普通文本格式
- “html”: 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
- “script”: 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
- “json”: 将服务器端返回的内容转换成相应的JavaScript对象
- “jsonp”: JSONP 格式使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数
-
三、初识Ajax异步刷新
1. 异步刷新过程
- input失去焦点 ->
- 触发function a() ->
- a()函数里执行ajax.post 发送请求url，并传递参数data ->
- controller响应请求后，返回数据 ->
- ajax 接收响应success的数据并处理
2. 代码编写
- index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
<script>
function a(){
$.post({
url:"${pageContext.request.contextPath}/a1",
data:{"name":$("#username").val()},
success:function (data) {
alert(data);
}
})
}
</script>
</head>
<body>
<%-- 失去焦点的时候 发起一个请求 --%>
用户名：<input type="text" id="username" οnblur="a()">
</body>
</html>
- AjaxController
@RequestMapping("/a1")
public void a1(String name, HttpServletResponse response) throws IOException {
System.out.println("name=>"+name);
if ("admin".equals(name)){
response.getWriter().print("true");
}else{
response.getWriter().print("false");
}
}
四、展示后端传来数据
将后端获得的数据，由前端ajax获取，然后由ajax来控制展示在页面
1.后端编写一个请求，返回一个userlist
- User
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private String name;
private int age;
private String sex;
}
- controll（伪造数据）
@RequestMapping("/a2")
public List<User> a2(){
ArrayList<User> list = new ArrayList<User>();
//添加数据
list.add(new User("palen",1,"male"));
list.add(new User("Yvonne",1,"女"));
list.add(new User("anna",1,"male"));
return list;
}
2.前端test2.jsp页面编写ajax，以及一个table
- ajax
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
<script>
$(function () {
$("#btn").click(function () {
$.post("${pageContext.request.contextPath}/a2",function (data) {
console.log(data);
let html = "";
for (let i = 0 ; i< data.length; i++ ){
html += "<tr>"+
"<td>"+data[i].name+"</td>"+
"<td>"+data[i].age+"</td>"+
"<td>"+data[i].sex+"</td>"+
"</tr>"
}//for
$("#userlist").html(html);
})//ajax
})//click
})//function
</script>
- table(实现一个按钮，点击，就会显示后端传来的userlist数据)
<input type="button" value="加载数据" id="btn">
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tbody id="userlist"></tbody>
</table>
3.测试结果
五、验证输入信息
实现用户输入用户名和密码，失焦的时候，开始验证用户信息，输入框后面有提示信息
1.编写controller，实现验证
- controller
@RequestMapping("/login")
public String login(String name,String pwd){
String msg = "";
if(name!=null){
if ("palen".equals(name)){
msg = "ok";
}else {
msg = "用户名错误";
}
}
if(pwd!=null){
if ("123456".equals(pwd)){
msg = "ok";
}else {
msg = "密码错误";
}
}
return msg;
}
- 前端msg若中文乱码，可在applicationContext.xml加入中文乱码解决
<mvc:annotation-driven>
<mvc:message-converters register-defaults="true">
<bean class="org.springframework.http.converter.StringHttpMessageConverter">
<constructor-arg value="UTF-8"/>
</bean>
<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
<property name="objectMapper">
<bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
<property name="failOnEmptyBeans" value="false"/>
</bean>
</property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
2.编写jsp实现
- input
用户名： <input type="text" name="userName" id="userName" οnblur="login1()">
<span id="userNameInfo"></span><br>
密码：<input type="password" name="pwd" id="pwd" οnblur="login2()">
<span id="pwdInfo"></span><br>
- ajax
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
<script>
function login1() {
$.post({
url:"${pageContext.request.contextPath}/login",
data:{"name":$("#userName").val()},
success:function (msg) {
console.log(msg);
if (msg.toString()=='ok'){
$("#userNameInfo").css("color","green");
}else {
$("#userNameInfo").css("color","red");
}
$("#userNameInfo").html(msg);
}//success
})//post
}//login1
function login2() {
$.post({
url:"${pageContext.request.contextPath}/login",
data:{"pwd":$("#pwd").val()},
success:function (msg) {
console.log(msg);
if (msg.toString()=='ok'){
$("#pwdInfo").css("color","green");
}else {
$("#pwdInfo").css("color","red");
}
$("#pwdInfo").html(msg);
}//success
})//post
}
</script>
3.测试结果
278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
