1.将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高效率
2.异步上传文件
type
类型：String
默认值: "GET")。请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
url
类型：String
默认值: 当前页地址。发送请求的地址。
success
类型：Function
请求成功后的回调函数。
参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
这是一个 Ajax 事件
success
当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
dataType 选项还可以指定其他不同数据处理方式。除了单纯的 XML，还可以指定 html、json、jsonp、script 或者 text,
text 和 xml 类型返回的数据不会经过处理。数据仅仅简单的将 XMLHttpRequest 的 responseText 或 responseHTML 属性传递给 success 回调函数.
发送数据到服务器
默认情况下，Ajax 请求使用 GET 方法。如果要使用 POST 方法，可以设定 type 参数值。这个选项也会影响 data 选项中的内容如何发送到服务器。
data 选项既可以包含一个查询字符串，比如 key1=value1&key2=value2 ，也可以是一个映射，比如 {key1: 'value1', key2: 'value2'} 。如果使用了后者的形式，则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置 processData 选项为 false 来回避。如果我们希望发送一个 XML 对象给服务器时，这种处理可能并不合适。并且在这种情况下，我们也应当改变 contentType 选项的值，用其他合适的 MIME 类型来取代默认的 application/x-www-form-urlencoded
login.jsp
< script type="text/javascript" src="resources/js/jquery-1.8.3.js">< /script>
< script type="text/javascript">
$().ready(function(){
$('#btn').click(function(){
$.ajax({
url:"toLogin",
type:"post",
data:$('#frm').serialize(),
dataType:"text",
success:function(data){
if(data="ok"){
alert("登录成功");
location.href="main";
}else{
alert("用户名/密码错误");
}
}
});
});
});
</script>
</head>
<body>
<form id="frm">
<input type="text" name="username">
<input type="password" name="password">
<input type="button" value="登录" id="btn">
</form>
</body>
main.jsp
<body>
欢迎登录${user.name}
<a href="show">点击查看个人信息</a>
</body>
regist.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$().ready(function(){
$('#btn').click(function(){
$.ajax({
url:"upload",
type:"post",
data:new FormData(document.getElementById('frm')),//$('#frm')[0]
dataType:"text",
processData: false, // jQuery不要去处理发送的数据
contentType: false, // jQuery不要去设置Content-Type请求头
success:function(data){
if(data=="ok"){
alert("注册成功");
location.href="login";
}
}
});
});
});
</script>
</head>
<body>
<form id="frm" action="upload" method="post" enctype="multipart/form-data">
用户名：<input type="text" name="username"><br>
密码：<input type="text" name="password"><br>
真实姓名：<input type="text" name="name"><br>
头像：<input type="file" name="img"><br>
<input type="button" value="注册" id="btn">
</form>
</body>
</html>
show.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$().ready(function(){
var table = $('#t')[0];
$.ajax({
url:"toShow",
type:"post",
dataType:"json",
success:function(data){
table.insertRow(0).innerHTML="<td>用户名</td><td>"+data.username+"</td>"
table.insertRow(1).innerHTML="<td>密码</td><td>"+data.password+"</td>"
table.insertRow(2).innerHTML="<td>姓名</td><td>"+data.name+"</td>"
table.insertRow(3).innerHTML="<td>头像</td><td><img src='"+data.img+"' width='100' style='border-radius:50%'></td>"
}
});
});
</script>
</head>
<body>
<table id="t">
</table>
</body>
</html>
mymvc-servlet.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd">
<!-- 开启注解扫描 -->
<mvc:annotation-driven/>
<!-- 指定要扫描的包，其中被配置的控制器会被识别出来 -->
<context:component-scan base-package="com.chinasofti.controller"/>
<!-- 配置要用到的HandlerMapping的实现类 -->
<bean class="org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping"></bean>
<!-- 配置HandlerAdapter -->
<bean class="org.springframework.web.servlet.mvc.SimpleControllerHandlerAdapter"></bean>
<!-- 配置ViewResolver,视图解析器，将响应发送到jsp进行呈现 -->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<!-- 支持视图中使用jstl -->
<property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
<property name="prefix" value="/WEB-INF/jsp/"/>
<property name="suffix" value=".jsp"/>
</bean>
<!-- 设置multipartResolver才能完成文件上传 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="5000000"></property>
</bean>
<mvc:resources location="/resources/" mapping="/resources/**"></mvc:resources>
</beans>
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">
<display-name>UserAjax</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>mymvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>mymvc</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
UserController
package com.chinasofti.controller;
import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import org.apache.commons.io.FileUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import com.chinasofti.data.Data;
@Controller
public class UserController {
@RequestMapping("/login")
public String login() {
return "login";
}
@RequestMapping("/regist")
public String regist() {
return "regist";
}
@RequestMapping("/main")
public String main() {
return "main";
}
@RequestMapping("/show")
public String show() {
return "show";
}
@RequestMapping("/upload")
@ResponseBody
public String upload(MultipartFile img,String username,String password,String name,HttpServletRequest request) {
String path = "d:/upFiles";
String fileName = UUID.randomUUID().toString().replaceAll("-","")+img.getOriginalFilename().substring(img.getOriginalFilename().lastIndexOf("."));
Map<String,String> user = new HashMap<>();
user.put("username",username);
user.put("password",password);
user.put("name",name);
user.put("img","http://127.0.0.1:8080/photo/"+fileName);
Data.list.add(user);
File file = new File(path+"/"+fileName);
try {
FileUtils.copyInputStreamToFile(img.getInputStream(),file);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return "ok";
}
@RequestMapping("/toLogin")
@ResponseBody
public String toLogin(String username,String password,HttpSession session) {
for(Map<String,String> map:Data.list) {
if(map.get("username").equals(username) && map.get("password").equals(password)) {
session.setAttribute("user",map);
return "ok";
}
}
return "no";
}
@RequestMapping("/toShow")
@ResponseBody
public Map<String, String> toShow(HttpSession session){
Map<String, String> user = (Map<String, String>) session.getAttribute("user");
return user;
}
}
data.java
package com.chinasofti.data;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
public class Data {
public static List<Map<String,String>> list = new ArrayList<>();
}
EncodingFilter
package com.chinasofti.filter;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet Filter implementation class EncodingFilter
*/
@WebFilter("/*")
public class EncodingFilter implements Filter {
/**
* Default constructor.
*/
public EncodingFilter() {
// TODO Auto-generated constructor stub
}
/**
* @see Filter#destroy()
*/
public void destroy() {
// TODO Auto-generated method stub
}
/**
* @see Filter#doFilter(ServletRequest, ServletResponse, FilterChain)
*/
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
// TODO Auto-generated method stub
// place your code here
// pass the request along the filter chain
HttpServletRequest req = (HttpServletRequest) request;
HttpServletResponse res = (HttpServletResponse) response;
req.setCharacterEncoding("UTF-8");
res.setCharacterEncoding("UTF-8");
System.out.println("执行过滤器");
chain.doFilter(request, response);
}
/**
* @see Filter#init(FilterConfig)
*/
public void init(FilterConfig fConfig) throws ServletException {
// TODO Auto-generated method stub
}
}
扫一扫
449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
