javascript - 替换并打印 jquery formData 值

Question

我想让jquery插件在ajax之前处理表单提交。

这是我的 jquery 脚本

;(function($,window,document,undefined){
     "use strict";

     $.modalLoad = function(element, options){

         var plugin = this;

         var $element = $(element),
             element = element,
             url = $element.attr('href'),
             target = $element.data('target');

         var defaults   = {
             form: $(this).serializeArray(),
        };

        plugin.init = function(context){
             plugin.settings = $.extend({},defaults, options);
             plugin.add_bindings();
             plugin.create_ajax(context);
    }

         plugin.create_ajax = function(context){
             $('form',context).addClass('modal-form');
             $('.modal-form',context).on('submit',function(e){
                 e.preventDefault();
                 plugin.post_data($(this),context);
             });
         }

         plugin.post_data = function(form,context){

             var loaded = false;
             var throbbed = false;
             var _fd = new FormData();
             var password = hex_sha512($('input[type="password"]',context).val());

             _fd.append('password',password);

             function checkComplete(){
                 if(loaded && throbbed){
                     $('.ajax-loader').remove();
                 }
             }

             function requestComplete(){
                 loaded = true;
                 checkComplete();
             }

             $.ajax({
                 url:form.attr('action'),
                 type: form.attr('method'),
                 data: _fd,
                 contentType: false,
                 cache: false,
                 processData: false,
                 success: function(data){
                    requestComplete();
                    console.log(data);
                 },
                 beforeSend: function(){
                     var loading = "<img src='images/loader.gif' class='ajax-loader'>";
                     $('.modal-footer',context).append(loading);
                     $('.ajax-loader').css({
                        height: '15px',
                        'vertical-align': 'middle',
                        margin: '0px 5px'
                     });
                     setTimeout(function(){
                         throbbed = true;
                         checkComplete();
                     },2000);
                 },
                 complete: requestComplete()
             });
             console.log(plugin.settings.form);
         }

         plugin.init();

     }

     $.fn.modalLoad = function(options){

         return this.each(function(){
             if(undefined == $(this).data('modalLoad')){
                 var plugin = new $.modalLoad(this, options);
                 $(this).data('modalLoad', plugin);
             }
         });

     }
 })(jQuery);

HTML

<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    <div class="modal-dialog">
        <div class="modal-content">
        <form action="<?php echo 'http://'.base_url('authentication.php');?>" method="POST">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Login</h4>
            </div>
            <div class="modal-body">
                <div class="modal-space">
                    <label class="email">
                        <input type="text" name="email" value="" placeholder="Email*" data-constraints="@Required @Email" id="regula-generated-387495">
                    </label>
                </div>
                <div class="modal-space">
                    <label class="password">
                        <input type="password" name="password" value="" placeholder="Password*" data-constraints="@Required @Email" id="regula-generated-387495">
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <input type="submit" class="btn btn-primary btn-1 btn-1__mod-1" value="LOGIN">
            </div>
        </form>
        </div>
    </div>
</div>

现在，我想用 sha512 加密密码字段，然后再用 ajax 发送，如下 this instruction 。

实际上，我将表单数据序列化为数组，并且我想覆盖 defaults.form 对象中设置的密码数组。

但即使我也无法从应该存储表单数据的defaults.form中获取数据。

如果我在console.log中打印defaults.form可以吗？大家能告诉我我必须修复哪一部分吗？另外请告诉我如何整理我的代码？

感谢您的提前

Answer 1

确保在您的 html 代码中，所有输入都在标签表单内。否则，您将从 defaults.form 中的表单数据序列化中获取缺失值。你能在这里展示你的html代码吗？