使用spring将表单数据从angular js发送到mysql db时没有响应答案

【问题标题】：No reponse while sendind form data from angular js to mysql db using spring使用spring将表单数据从angular js发送到mysql db时没有响应
【发布时间】：2016-09-30 23:59:31
【问题描述】：

大家好，我是 Angular 的新手，我正在努力学习它。我开发了一个应用程序，它从 angular 获取输入数据并完成验证，并使用 spring 作为控制器将数据发布到我的服务器。

我的控制器类

@Autowired
UserRegistrationDao userDao;

@RequestMapping(value = "/save", method = RequestMethod.POST)
public ModelAndView saveUser(@ModelAttribute("userReg") UserRegistration userReg) {
    System.out.println("hi");
    userDao.registerUser(userReg);
    return new ModelAndView("redirect:/index.jsp");
}

我的示例.js

    var app = angular.module('ngMailChimp', []);

app.controller('SignUpController',[ '$scope', '$http', function($scope, $http) {

    $scope.list = [];
        $scope.headerText = 'AngularJS Post Form Spring MVC example: Submit below form';
        $scope.submit = function() {

            var formData = {
                    "firstName" : $scope.ctrl.newCustomer.firstName,
                    "lastName" : $scope.ctrl.newCustomer.lastName,
                    "streetName" : $scope.ctrl.newCustomer.streetName,
                    "aptName" : $scope.ctrl.newCustomer.aptName,
                    "cityName" : $scopectrl.newCustomer.cityName,
                    "stateName" : $scope.ctrl.newCustomer.stateName,
                    "countryName" : $scope.ctrl.newCustomer.countryName,
                    "zipName" : $scope.ctrl.newCustomer.zipName,
                    "userName" : $scope.ctrl.newCustomer.userName,
                    "password" : $scope.ctrl.newCustomer.password,
            };

            var response = $http.post('save', formData);
            response.success(function(data, status, headers, config) {
                $scope.list.push(data);
            });
            response.error(function(data, status, headers, config) {
                alert( "Exception details: " + JSON.stringify({data: data}));
            });

            $scope.list = [];

        };
    }]);

我的示例.jsp

<body  ng-app="ngMailChimp" ng-controller="SignUpController as ctrl">
    <div class="signup-wrapper">
        <div class="logo">
            <img src="resources/assets/images/Untitled.png" alt="Logo"/>
        </div>
        <div class="alert alert-success message-animation" role="alert" ng-if="ctrl.showSubmittedPrompt">
            Thank you! Your account has been created.
        </div>
        <form name="ctrl.signupForm" ng-submit="submit()">/*ctrl.signup()*/

        <div class="form-group" ng-class="{'has-error':ctrl.hasErrorClass('firstName')}">
                <label for="firstName"><strong>First Name</strong></label>
                <input id="firstName" name="firstName" class="form-control" type="text" required
                       ng-model="ctrl.newCustomer.firstName" ng-model-options="{ updateOn : 'default blur' }"
                       ng-focus="ctrl.toggleFirstNamePrompt(true)" ng-blur="ctrl.toggleFirstNamePrompt(false)"/>

                <div class="my-messages">
                    <div class="prompt message-animation" ng-if="ctrl.showFirstNamePrompt">
                        Please Enter your First Name.
                    </div>
                </div>

                <div class="my-messages" ng-messages="ctrl.signupForm.firstName.$error" ng-if="ctrl.showMessages('firstName')">
                    <div class="message-animation" ng-message="required">
                        This field is required.<br>
                    </div>
                </div>

                <div class="form-group" ng-class="{'has-error':ctrl.hasErrorClass('lastName')}">
                <br><label for="lastName"><strong>Last Name</strong></label>
                <input id="lastName" name="lastName" class="form-control" type="text" required
                       ng-model="ctrl.newCustomer.lastName" ng-model-options="{ updateOn : 'default blur' }"
                       ng-focus="ctrl.toggleLastNamePrompt(true)" ng-blur="ctrl.toggleLastNamePrompt(false)"/>

                <div class="my-messages">
                    <div class="prompt message-animation" ng-if="ctrl.showLastNamePrompt">
                        Please Enter your Last Name.
                    </div>
                </div>

                <div class="my-messages" ng-messages="ctrl.signupForm.lastName.$error" ng-if="ctrl.showMessages('lastName')">
                    <div class="message-animation" ng-message="required">
                        This field is required.<br>
                    </div>
                </div>
  <button class="btn btn-primary" type="submit">Create My Account</button>
        </form>
    </div>

we-servlet.xml

<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
    http://www.springframework.org/schema/beans
    http://www.springframework.org/schema/beans/spring-beans.xsd
    http://www.springframework.org/schema/mvc
    http://www.springframework.org/schema/mvc/spring-mvc.xsd
    http://www.springframework.org/schema/context
    http://www.springframework.org/schema/context/spring-context.xsd">


<context:component-scan base-package="org.weber.xxx.controller"></context:component-scan>


<mvc:resources mapping="/resources/**" location="/resources/"
    cache-period="31556926" />


<bean
    class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="/WEB-INF/jsp/"></property>
    <property name="suffix" value=".jsp"></property>
</bean>

<bean id="ds"
    class="org.springframework.jdbc.datasource.DriverManagerDataSource">
    <property name="driverClassName" value="com.mysql.jdbc.Driver" />
    <property name="url" value="jdbc:mysql://localhost:3301/weber" />
    <property name="username" value="root" />
    <property name="password" value="xxxx" />
</bean>

<bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate">
    <property name="dataSource" ref="ds"></property>
</bean>

<bean id="userDao"
    class="org.weber.xxx.user.registration.dao.UserRegistrationDaoImpl">
    <property name="template" ref="jdbcTemplate"></property>
</bean>

web.xml

<servlet>
    <servlet-name>weber</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>

<context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>WEB-INF/weber-servlet.xml</param-value>
</context-param>

<servlet-mapping>
    <servlet-name>weber</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
</web-app>

它甚至没有击中我的弹簧控制器。我要去哪里磨损g.请帮帮我

谢谢

【问题讨论】：

标签： java angularjs json spring

【解决方案1】：

如果你没有点击你的控制器，显然你的表单没有被提交。

我不熟悉 AngularJS，但是通过查看您的 JSP 文件，您在表单标签中缺少几个属性：

action=the_url_of_your_controller
方法=POST

像这样：

<form action="the_url_of_your_controller" method="POST">

如果下一行：

var response = $http.post('save', formData);

负责用AngularJS发布你的表单，那么你需要添加一个完整的web服务器地址，让我们这样说：

var response = $http.post('http://localhost:8080/your_webapp_name/save', formData);

【讨论】：

这适用于 servlet 使用，但我想将请求路由到我的 spring 控制器
我上面的建议在弹簧控制器上工作得很好。如果您想要一种更好的方法来解析 Spring 控制器的 URL，请尝试使用 spring:url 标签，您需要导入适当的 taglib。
我认为 Angular 直接为我们提供了对象。我尝试了上述方法，但我再次必须在 spring/servlet 中为其创建对象。我正在尝试将它与范围一起使用。
我改进了答案，试试我在你的 js 文件中写的内容
不幸的是它没有击中控制器。