美文网首页
Intellij IDEA中利用ajax向springmvc发送

Intellij IDEA中利用ajax向springmvc发送

作者: 清_晨_ | 来源:发表于2018-11-20 12:44 被阅读151次

1.新建maven项目

2.填写项目信息

3.一直点next，出现项目地址

4.项目新建完成后的结构如图所示

5.点击pom.xml,添加项目依赖。

<?xml version="1.0" encoding="UTF-8"?>
<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/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.springmvctest</groupId>
  <artifactId>springmvctest</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>
  <name>springmvctest Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>
  <properties>
    <spring-version>4.3.18.RELEASE</spring-version>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.7</maven.compiler.source>
    <maven.compiler.target>1.7</maven.compiler.target>
  </properties>
  <dependencies>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</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-context</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-test</artifactId>
      <version>${spring-version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-orm</artifactId>
      <version>${spring-version}</version>
    </dependency>
  <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
    </dependency>
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.2</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>2.8.2</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.8.2</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-annotations</artifactId>
      <version>2.8.2</version>
    </dependency>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>
  </dependencies>
  <build>
    <finalName>springmvctest</finalName>
    <pluginManagement>
      <plugins>
        <plugin>
          <artifactId>maven-clean-plugin</artifactId>
          <version>3.0.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-resources-plugin</artifactId>
          <version>3.0.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.7.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-surefire-plugin</artifactId>
          <version>2.20.1</version>
        </plugin>
        <plugin>
          <artifactId>maven-war-plugin</artifactId>
          <version>3.2.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-install-plugin</artifactId>
          <version>2.5.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-deploy-plugin</artifactId>
          <version>2.8.2</version>
        </plugin>
      </plugins>
    </pluginManagement>
  </build>
</project>

6.鼠标右键点击项目名称，选择Add Framework Support

7.勾选springmvc，生成springmvc的配置文件。

8.新建com.testcontroller包，右键包名，将其标记为Sources Root


9.新建后的项目包名如图所示

10.配置web.xml

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"

        version="4.0">

    <context-param>

        <param-name>contextConfigLocation</param-name>

        <param-value>/WEB-INF/applicationContext.xml</param-value>

    </context-param>

    <listener>

        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>

    </listener>

    <servlet>

        <servlet-name>dispatcher</servlet-name>

        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

        <load-on-startup>1</load-on-startup>

    </servlet>

    <servlet-mapping>

        <servlet-name>dispatcher</servlet-name>

        <url-pattern>*.do</url-pattern>

    </servlet-mapping>

</web-app>

11.配置dispatcher-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:mvc="http://www.springframework.org/schema/mvc"

xmlns:context="http://www.springframework.org/schema/context"

xmlns:aop="http://www.springframework.org/schema/aop"

xmlns:tx="http://www.springframework.org/schema/tx"

xsi:schemaLocation="http://www.springframework.org/schema/beans

http://www.springframework.org/schema/beans/spring-beans-4.2.xsd

http://www.springframework.org/schema/mvc

http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd

http://www.springframework.org/schema/context

http://www.springframework.org/schema/context/spring-context.xsd

http://www.springframework.org/schema/aop

http://www.springframework.org/schema/aop/spring-aop-4.2.xsd

http://www.springframework.org/schema/tx

        http://www.springframework.org/schema/tx/spring-tx.xsd">

    <context:component-scan base-package="com.testcontroller"/>

<!--开启注解-->

    <mvc:annotation-driven />

<!--指定视图解析器-->

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">

        <property name="prefix" value="/WEB-INF/jsp/"/>

       <property name="suffix" value=".jsp"/>

    </bean>

<!--消息转换器-->

    <bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">

        <property name="messageConverters">

            <list>

                <ref bean="mappingJacksonHttpMessageConverter" />

            </list>

        </property>

    </bean>

    <bean id="mappingJacksonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">

        <property name="supportedMediaTypes">

            <list>

                <value>application/json;charset=UTF-8</value>

                <value>text/html;charset=UTF-8</value>

                <value>text/json;charset=UTF-8</value>

            </list>

        </property>

    </bean>

</beans>

12.新建一个包bean，在下面新建UserLoginIBean


代码如下: 
public class UserLoginIBean {
    private String username;
    private String password;
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username= username;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password= password;
    }
}

13.在controller 包下新建一个TestController类，内容如下


代码如下： 
@Controller

@RequestMapping("/hello")

public class TestController {

    @RequestMapping("/say")

    public String say(Modelmodel) {

        model.addAttribute("name","欢迎进入SpringMVC的世界！"); // 指定Model的值

        model.addAttribute("url","http://www.cnblogs.com/wormday/p/8435617.html"); // 指定Model的值

        return "say";

    }

@RequestMapping(value="login.do" ,method= RequestMethod.POST)

@ResponseBody

public  Map<String,Object> login(@RequestBody UserLoginIBean userLoginIBean) throws IOException {

    System.out.println("用户名：" + userLoginIBean.getUsername() + ',' + "密码：" + userLoginIBean.getPassword());

    Map<String,Object> map = new HashMap<String,Object>();

    if(userLoginIBean.getUsername().equals("123") && userLoginIBean.getPassword().equals("456")){

        System.out.println("用户名和密码都正确");

        map.put("msg", "验证通过");

    }else{

        if(!userLoginIBean.getUsername().equals("123") || !userLoginIBean.getPassword().equals("456")){

            System.out.println("用户名或密码不正确");

        }

        System.out.println("失败");

        map.put("msg", "验证没有通过");

    }

    return map;

}

}

14.在web下新建js文件夹，然后放入jquery.js文件；另外，在WEB-INF路径下新建jsp文件夹，里面新建sqy.jsp页面。

<%@page contentType="text/html;charset=UTF-8"language="java"
pageEncoding="utf-8"
%>
<html>
<head>
    <script type="text/javascript" src="/js/jquery.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8">
    <title>hello-springmvc</title>
    <script type="text/javascript">
        function ajaxTest(){
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            var con = JSON.stringify({"username": username, "password": password});
            $("#result").html(con);
            if (username.length!= 0 && password.length!= 0) {
                $.ajax({
                    type:"POST",
                    dataType:'json',
                    contentType: "application/json",
                    url: "http://localhost:8080/hello/login.do",
                    data:con,
                    error: function (data) {
                      alert("出错了！！:" + data.msg);
                    },
                    success: function (data) {
                      alert("success:" + data.msg);
                        $("#result").html(data.msg);
                    }
                });
            }else {
                    alert("请重新输入！");
                }
}
    </script>
</head>
<body>
hello ！${name}
<br/>  ${url}
<br/>
<input type="text" name="username" id="username" placeholder="用户名"/>
<input type="password" name="password" id="password"  placeholder="密码">
<button type="button" onclick="ajaxTest()">登录</button>
<div id="result"></div>
</body>
</html>

ajax请求页面截图：

15.配置好tomcat，前台输入http://localhost:8080/hello/say.do，如下图所示

输入用户名和密码后显示：

点击登录后，前台显示：

注：如果controller 中springmvc接收请求参数的是HttpServletRequest，那么ajax请求就不用加：1.contentType: "application/json",2.data数据也不用JSON.stringify(）；
如果springmvc接收请求的是一个对象，那么ajax就要加上以上参数，否则会报415。

相关文章

网友评论

      本文标题：Intellij IDEA中利用ajax向springmvc发送

      本文链接：https://www.haomeiwen.com/subject/pabtqqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|Intellij IDEA中利用ajax向springmvc发送|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！