Ajax请求

Posted 2021-05-25 有何和不可

1、ajax请求

后台

java提供接口数据

<!--通过这个依赖可以把集合和对象转为json格式-->
<dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.8</version>
</dependency>

controller

/*
后台通过controller给前台返回数据
*/
//通过ObjectMapper
ObjectMapper mapper = new ObjectMapper();//转换json格式

json乱码解决

<!--
  在springmvc配置，添加之前导入一个依赖jackson-databind 否则会报错  
-->
<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>

跨域解决

跨域问题的出现

/*
协议、ip、端口号三者其中一个不相同就会引起跨域问题。
*/

/*
由于前台我用的工具是webstorm
地址为：http://localhost:63343/

后台地址为：http://localhost:8080/
由于端口不同导致跨域问题。

跨域解决步骤：https://blog.csdn.net/justry_deng/article/details/81949846
*/

最有效的解决方法

//博客：https://blog.csdn.net/jiafujun_fx/article/details/105285977

<!--导入依赖-->
<dependency>
    <groupId>com.thetransactioncompany</groupId>
    <artifactId>cors-filter</artifactId>
    <version>2.5</version>
</dependency>

<!--
web.xml配置
这个配置就完成可以解决跨域问题。
-->
<filter>
     <filter-name>CORS</filter-name>
     <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
     <init-param>
         <param-name>cors.allowOrigin</param-name>
         <param-value>*</param-value>
     </init-param>
     <init-param>
         <param-name>cors.supportedMethods</param-name>
         <param-value>GET, POST, HEAD, PUT, DELETE</param-value>
     </init-param>
     <init-param>
         <param-name>cors.supportedHeaders</param-name>
         <param-value>Authorization,Content-Type,Depth,User-Agent,X-File-Size,X-Requested-With,X-Requested-By,If-Modified-Since,X-File-Name,X-File-Type,Cache-Control,Origin,Accept</param-value>
     </init-param>
     <init-param>
         <param-name>cors.exposedHeaders</param-name>
         <param-value>Set-Cookie</param-value>
     </init-param>
     <init-param>
         <param-name>cors.supportsCredentials</param-name>
         <param-value>true</param-value>
     </init-param>
    <init-param>
        <param-name>cors.maxAge</param-name>
        <param-value>3600</param-value>
    </init-param>
 </filter>
 <filter-mapping>
     <filter-name>CORS</filter-name>
     <url-pattern>/*</url-pattern>
 </filter-mapping>

前台发生Ajax请求

$.ajax()

 $.ajax({
            url: \'http://localhost:8080/Studywj/main/mainDan\',
            data: {punSon:\'19827562\'},
            type: "POST",
            success: function (data) {
                console.log(data.toString());
      }
});

$.post() 和 $.get()

/*
参数
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。
*/

 $.post({
            url:\'http://localhost:8080/Studywj/main/mainDan\',
            data: {punSon:\'19827562\'},
            success: function (data) {
                console.log(data.toString());
            }
});

今日疑问：

10年、20年后如果这个记录还在，当自己再看到时会不会觉得自己有点傻。

时间：2021-05-25 21点50分