因為單位用的是servlet+jsp+jdbc 放下SSM框架很久了,怕以后沒有突破所以拿起SSM簡單練練手,發現確實生疏了不少,廢話不多說,直奔主題,由於原先使用的是表單submit同步提交,對於用戶體驗來說確實不好,於是乎想練練ajax實現異步傳輸
首先是web.xml配置文件
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"> <display-name>Archetype Created Web Application</display-name> <!-- 中文亂碼解析器 --> <filter> <filter-name>encodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> </filter> <filter-mapping> <filter-name>encodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <!-- 上下文監聽 --> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:applicationContext.xml</param-value> </context-param> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!-- The front controller of this Spring Web application, responsible for handling all application requests --> <servlet> <servlet-name>springDispatcherServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:applicationContext.xml</param-value> </init-param> </servlet> <!-- Map all requests to the DispatcherServlet for handling --> <servlet-mapping> <servlet-name>springDispatcherServlet</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> </web-app>
其次是pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>ssm</groupId> <artifactId>ssm</artifactId> <packaging>war</packaging> <version>0.0.1-SNAPSHOT</version> <name>ssm Maven Webapp</name> <properties> <!-- spring版本號 --> <spring.version>4.0.2.RELEASE</spring.version> <!-- mybatis版本號 --> <mybatis.version>3.2.6</mybatis.version> <!-- log4j日志文件管理包版本 --> <slf4j.version>1.7.7</slf4j.version> <log4j.version>1.2.17</log4j.version> </properties> <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.11</version> <!-- 表示開發的時候引入,發布的時候不會加載此包 --> <scope>test</scope> </dependency> <!-- spring核心包 --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-core</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-oxm</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-tx</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aop</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context-support</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-test</artifactId> <version>${spring.version}</version> </dependency> <!-- mybatis核心包 --> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>${mybatis.version}</version> </dependency> <!-- mybatis/spring包 --> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>1.2.2</version> </dependency> <!-- 導入java ee jar 包 --> <dependency> <groupId>javax</groupId> <artifactId>javaee-api</artifactId> <version>7.0</version> </dependency> <!-- 導入Mysql數據庫鏈接jar包 --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.30</version> </dependency> <!-- 導入dbcp的jar包,用來在applicationContext.xml中配置數據庫 --> <dependency> <groupId>commons-dbcp</groupId> <artifactId>commons-dbcp</artifactId> <version>1.2.2</version> </dependency> <!-- JSTL標簽類 --> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <!-- 日志文件管理包 --> <!-- log start --> <dependency> <groupId>log4j</groupId> <artifactId>log4j</artifactId> <version>${log4j.version}</version> </dependency> <!-- 格式化對象,方便輸出日志 --> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.1.41</version> </dependency> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</artifactId> <version>${slf4j.version}</version> </dependency> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-log4j12</artifactId> <version>${slf4j.version}</version> </dependency> <!-- log end --> <!-- 映入JSON --> <dependency> <groupId>org.codehaus.jackson</groupId> <artifactId>jackson-mapper-asl</artifactId> <version>1.9.13</version> </dependency>
<!-- 這里是前后台傳遞json需要的jar包 -->
<dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.8.8</version> </dependency> <!-- 上傳組件包 --> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.4</version> </dependency> <dependency> <groupId>commons-codec</groupId> <artifactId>commons-codec</artifactId> <version>1.9</version> </dependency> </dependencies> <!-- 這邊是由於當時死活無法找到dao層接口映射的方法而添加的,如果出現沒辦法找到dao層的方法可以用這個配置看看-->
<build> <finalName>ssm</finalName> <resources> <resource> <directory>src/main/java</directory> <includes> <include>**/*.xml</include> </includes> <filtering>true</filtering> </resource> </resources> </build> </project>
再來是applicationcontext.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:aop="http://www.springframework.org/schema/aop" xmlns:c="http://www.springframework.org/schema/c" xmlns:cache="http://www.springframework.org/schema/cache" xmlns:context="http://www.springframework.org/schema/context" xmlns:jdbc="http://www.springframework.org/schema/jdbc" xmlns:p="http://www.springframework.org/schema/p" xmlns:tx="http://www.springframework.org/schema/tx" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd http://www.springframework.org/schema/cache http://www.springframework.org/schema/cache/spring-cache-4.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-4.0.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd"> <!-- 注解掃描 --> <context:component-scan base-package="bus.*"/> <!-- 驅動 --> <tx:annotation-driven transaction-manager="transactionManager"/> <!-- basicDataSource --> <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource"> <property name="driverClassName" value="com.mysql.jdbc.Driver" /> <property name="url" value="jdbc:mysql://localhost:3306/inputsystem" /> <property name="username" value="root"/> <property name="password" value="root"/> </bean> <!-- SqlSessionFactory --> <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <property name="dataSource" ref="dataSource"/> </bean> <!-- 事物處理 --> <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"> <property name="dataSource" ref="dataSource"/> </bean> <!-- 試圖解析 --> <bean id="resourceView" class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/"/> <property name="suffix" value=".jsp"/> </bean> <!-- mapper掃描 --> <bean id="mapperScannerConfigurer" class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <property name="basePackage" value="bus.dao"/> </bean> </beans>
問題來了如果前台是用ajax傳json的話,ajax可以這么寫,因為獲取的“sid”數據是一個變量,而且這邊遇到一個坑,如果編碼不轉的話會出現前台傳id="";到后台之后可能會變成id=%20%20,這個%20%20就是雙引號的編碼,所以這邊需要做編碼的轉換
<%@ page contentType="text/html;charset=UTF-8" language="java"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> var $tb; $(document).ready(function(){
$tb=$("#tb1");
$("#search").click(function(){
alert($("#sid").val());
var id={"id":$("#sid").val()};
alert(id);
$.ajax({ "url":"findbysid", "type":"post", "data":JSON.stringify(id), "datatype":"json", "contentType" : "application/json;charset=utf-8", "success":function getPage(jsonArray){ html=""; var jsonarray= $.parseJSON(jsonArray); for (var i = 0; i < jsonarray.length; i++) { $("<tr><td>"+jsonarray[i].id+"</td><td>"+jsonarray[i].userName+"</td><td>"+jsonarray[i].passWord+"</td></tr>").appendTo($tb) } } }) }) }) </script> </head> <body> <div style="margin-top: 25px"> 請輸入所要查詢的學號:<input type="text" id="sid" name="sid" /> <input id="search" style="margin-left: 10px" type="button" value="搜索"><br /> </div> <div style="margin-top: 50px"> <table border="1"> <thead> <tr> <td>id</td> <td>用戶</td> <td>密碼</td> </tr> </thead> <tbody id="tb1"> </tbody> <div id="conten"></div> </table> </div> </body> </html>
正題來了,當json返回的時候本人呵呵噠的直接return 了一個JSONARRAY,結果可想而知前台沒反應,F12出現406的錯誤,果斷百度,可還是沒法解決,沒辦法只能靜下心來好好思考一下,哎!!!問題的關鍵就是響應頭里面的content-type:text/html;charset=utf-8,我看網上有解釋和html有關的,又說和@responsebody有關的,確實不同的問題不同的解決辦法,我考慮了一下TEXT文本類型,我穿的是JSONARRAY,總感覺好像哪里不妥,感覺任何事情都要嘗試,於是乎直接把JSONARRAY有轉成了String類型,后台返回也返回了String類型,這樣就能和content-type:text/html;charset=utf-8,同樣也解決了406這個問題,當然也可能是很長時間沒有寫了,這塊代碼確實丟了不少,看來以后還是需要多多練習。如果@responsebody 要求返回的是JONSOBJECT的話,額還沒嘗試,回頭玩玩看。
當然在練習的過程中也出現了415,我出現這個問題是因為缺少了json的相關jar包(一共3個,這個可以隨意百度,都有解決方法)導致傳輸的內容無法識別,在maven中配置好相關的json就可以解決了,具體可以看我maven中對json那塊的配置。
第一次寫,也是給自己做一個筆記,希望后面遇到同樣的問題不要在花1個小時去解決,同時希望遇到類似問題的童鞋,也可以快速的解決,太TM浪費時間了。
