AngularJS 提交表单的方式(2)

使用jQuery提交表单

现在,让我们来使用jQuery处理表单提交。我会将所有的代码添加到空的<script>标签中

<!-- index.html -->

...

<!-- PROCESS FORM WITH AJAX (OLD) -->
    <script>
        $(document).ready(function() {

// process the form
            $('form').submit(function(event) {

// remove the past errors
                $('#name-group').removeClass('has-error');
                $('#name-group .help-block').empty();
                $('#superhero-group').removeClass('has-error');
                $('#superhero-group .help-block').empty();

// remove success messages
                $('#messages').removeClass('alert alert-success').empty();

// get the form data
                var formData = {
                    'name'                : $('input[name=name]').val(),
                    'superheroAlias'    : $('input[name=superheroAlias]').val()
                };

// process the form
                $.ajax({
                    type        : 'POST',
                    url        : 'process.php',
                    data        : formData,
                    dataType    : 'json',
                    success    : function(data) {

// log data to the console so we can see
                        console.log(data);

// if validation fails
                        // add the error class to show a red input
                        // add the error message to the help block under the input
                        if ( ! data.success) {

if (data.errors.name) {
                                $('#name-group').addClass('has-error');
                                $('#name-group .help-block').html(data.errors.name);
                            }

if (data.errors.superheroAlias) {
                                $('#superhero-group').addClass('has-error');
                                $('#superhero-group .help-block').html(data.errors.superheroAlias);
                            }

} else {

// if validation is good add success message
                            $('#messages').addClass('alert alert-success').append('<p>' + data.message + '</p>');
                        }
                    }
                });

// stop the form from submitting and refreshing
                event.preventDefault();
            });

});
    </script>

...

这里处理表单有不少的代码。我们有获取表单中变量的代码,有使用AJAX将数据发送至我们的表单的代码,有检查是否有错和显示成功提示的代码。除此之外,我们希望每次表单提交之后,过去的错误信息都会被清除。确实是不少代码。

现在,如果表单中含有错误,则:

submitting-error

如果提交成功:

submit-success

现在,让我们看使用Angular来提交相同的表单。记住,我们不需要更改任何关于我们的PHP如何处理表单的内容,我们的应用依然会具备相同的功能(在同一个地方展示错误和成功信息)。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/ad14b4b29c442f6426882ecd5a95cbfc.html