精华内容
下载资源
问答
  • 昨天,在做一个表单异步提交内容的时候,遇到很奇怪的问题,submit()方法无法进行提交,每次提交都是把 当前给刷新了,网络抓包发现,每次都是 get方式去获取 当前页面,完全没有post 请求,想着以前 遇上这样的问题...
  • 昨天,在做一个表单异步提交内容的时候,遇到很奇怪的问题,submit()方法无法进行提交,每次提交都是把 当前给刷新了,网络抓包发现,每次都是 get方式去获取 当前页面,完全没有post 请求,想着以前 遇上这样的问题...
  • 不使用form表单提交方式提交文件

    千次阅读 2019-06-13 09:13:36
    <body> <input type="file" id="importFile"/> ...input type="button" id="import-submit" value="提交导入文件"/> </body> <script type="text/javascript"> ...

    <body>
            <input type="file" id="importFile"/>
            <input type="button" id="import-submit" value="提交导入文件"/>
        </body>
         <script type="text/javascript">
                $('#import-submit').click(function () {
                      var formData = new FormData();
                    var name = $("#importFile").val();
                    formData.append('file', $("#importFile")[0].files[0]);
                     // 此处可传入多个参数
                    formData.append('name', name);
                    $.ajax({
                      url:  '/collar/import',
                      type: 'post',
                      async: false,
                      data: formData,
                      processData: false,// 告诉jQuery不要去处理发送的数据
                      contentType: false,// 告诉jQuery不要去设置Content-Type请求头
                      beforeSend: function () {//过程...
                          console.log('正在进行,请稍候')
                      },
                      success: function (res) {
                          if (+res === '01') {
                                  console.log('导入成功')
                          } else {
                              console.log('导入失败')
                          }
                       },
                       error:function(){
                               console.log('导入失败')
                       }
                    })
                })
            </script>
     

     

        @RequestMapping("/import")
        public void export(VivoIMEIUp zipRequest, @RequestParam("file") MultipartFile file,
             HttpServletRequest request, HttpServletResponse response) {
            //通过file.getInputStream();处理
        }

    原文:https://blog.csdn.net/weixin_43992507/article/details/85091642 
     

    展开全文
  • 案例 今天有一个需求就是点击按钮时,使用ajax方式提交表单,而且不是直接用form表单下的submit按钮提交,表单中用的校验是dwz 自带的校验方式,表单模板如下: 办公电话:

    案例


    今天有一个需求就是点击按钮时,使用ajax方式提交表单,而且不是直接用form表单下的submit按钮提交,表单中用的校验是dwz 自带的校验方式,表单模板如下:

     <li><div class="data_detail">
                                            <span class="data_name">办公电话:</span>
                                            <div class="data_info">
                                                <input type="text" htitle="办公电话" class="required digits"
                                                    maxlength="12" name="creditcardCustomerJob.tel"
                                                    value="${creditcardCustomerJob.tel}" />
                                            </div>
                                        </div></li>

    ajax调用方式如下:

     //提交表单
                $.ajax({
                    type: $form .method || 'POST',
                    url:$form.attr("action"),
                    data:$form.serializeArray(),
                    dataType:"json",
                    cache: false,
                    success: function(data, textStatus) {
                    	result.msg = data.message;
                        result.flag = true;
                        return result;
                    },
                    error:  function(data,
                            textStatus, errorThrown) {
                    	 result.msg = data.message;
                         result.flag = false;
                         return result;
                    }
                });
                

    发现使用ajax提交方式,并不会调用表单中的校验(class="required digits"),而是直接提交了

    解决方案


    使用Jquery 插件中的valid方法,在js中使用$fom.valid()方式就可以在ajax方式调用form表单中配置的校验方法了

    Jquery 插件中的valid插件

    // http://docs.jquery.com/Plugins/Validation/valid
    	valid: function() {
            if ( $(this[0]).is('form')) {
                return this.validate().form();
            } else {
                var valid = true;
                var validator = $(this[0].form).validate();
                this.each(function() {
    				valid &= validator.element(this);
                });
                return valid;
            }
        }





    例子:
    function submitPersonalInfo(type) {
            var result = new Object();
                var $form = _$("#personal_info_form");
                if (!$form.valid()) {
                     result.flag = false;
                     return result;
                }
                //提交表单
                $.ajax({
                    type: $form .method || 'POST',
                    url:$form.attr("action"),
                    data:$form.serializeArray(),
                    dataType:"json",
                    cache: false,
                    success: function(data, textStatus) {
                    	result.msg = data.message;
                        result.flag = true;
                        return result;
                    },
                    error:  function(data,
                            textStatus, errorThrown) {
                    	 result.msg = data.message;
                         result.flag = false;
                         return result;
                    }
                });
                
                return result;
        }


    Jquery validate插件源码


    $.extend($.fn, {
    	// http://docs.jquery.com/Plugins/Validation/validate
    	validate: function( options ) {
    
    		// if nothing is selected, return nothing; can't chain anyway
    		if (!this.length) {
    			options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );
    			return;
    		}
    
    		// check if a validator for this form was already created
    		var validator = $.data(this[0], 'validator');
    		if ( validator ) {
    			return validator;
    		}
    		
    		validator = new $.validator( options, this[0] );
    		$.data(this[0], 'validator', validator); 
    		
    		return validator;
    	},
    	// http://docs.jquery.com/Plugins/Validation/valid
    	valid: function() {
            if ( $(this[0]).is('form')) {
                return this.validate().form();
            } else {
                var valid = true;
                var validator = $(this[0].form).validate();
                this.each(function() {
    				valid &= validator.element(this);
                });
                return valid;
            }
        },
    	// attributes: space seperated list of attributes to retrieve and remove
    	removeAttrs: function(attributes) {
    		var result = {},
    			$element = this;
    		$.each(attributes.split(/\s/), function(index, value) {
    			result[value] = $element.attr(value);
    			$element.removeAttr(value);
    		});
    		return result;
    	},
    	// http://docs.jquery.com/Plugins/Validation/rules
    	rules: function(command, argument) {
    		var element = this[0];
    		
    		if (command) {
    			var settings = $.data(element.form, 'validator').settings;
    			var staticRules = settings.rules;
    			var existingRules = $.validator.staticRules(element);
    			switch(command) {
    			case "add":
    				$.extend(existingRules, $.validator.normalizeRule(argument));
    				staticRules[element.name] = existingRules;
    				if (argument.messages)
    					settings.messages[element.name] = $.extend( settings.messages[element.name], argument.messages );
    				break;
    			case "remove":
    				if (!argument) {
    					delete staticRules[element.name];
    					return existingRules;
    				}
    				var filtered = {};
    				$.each(argument.split(/\s/), function(index, method) {
    					filtered[method] = existingRules[method];
    					delete existingRules[method];
    				});
    				return filtered;
    			}
    		}
    		
    		var data = $.validator.normalizeRules(
    		$.extend(
    			{},
    			$.validator.metadataRules(element),
    			$.validator.classRules(element),
    			$.validator.attributeRules(element),
    			$.validator.staticRules(element)
    		), element);
    		
    		// make sure required is at front
    		if (data.required) {
    			var param = data.required;
    			delete data.required;
    			data = $.extend({required: param}, data);
    		}
    		
    		return data;
    	}
    });


    展开全文
  • 想实现局部刷新,就能用Sumit了,用Button绑定事件就好了,如果用Sumit绑定事件的话,在触发事件的同事,也会提交表单的button-普通按钮,submit-提交按钮;submit按钮一般出现在网页上需要提交信息到服务器是才...
    想实现局部刷新,就不能用Sumit了,用Button绑定事件就好了,如果用Sumit绑定事件的话,在触发事件的同事,也会提交表单的
    button-普通按钮,submit-提交按钮;submit按钮一般出现在网页上需要提交信息到服务器是才使用,而button按钮是创建一个按钮,对于实现按钮将会发生什么事这个不一定,考页面编辑人员决定,例如在同一天网页表单上,用户输入时可能输入错误或是偏差,则可以在网页上创建一个button-清除(重置)按钮,一张表单可以有多个普通按钮,且至少有一个提交按钮(需提交表单网页

    转载于:https://www.cnblogs.com/yangwenlong/p/7989437.html

    展开全文
  • 给form加上以下配置 onSubmit: Ext.emptyFn, submit:function() { this.getForm().getEl().dom.action = this.url; this.getForm().getEl().do

    给form加上以下配置

    onSubmit: Ext.emptyFn, 
            submit:function() { 
     this.getForm().getEl().dom.action = this.url; 
     this.getForm().getEl().dom.submit(); 
                },

    因为EXTJS的BUTTON就算指定了TYPE为SUBMIT也不能提交,所以,对于需要提交的按钮,要加上事件处理函数:
    handler:function(){ 
                    form1.submit();             
                }

    这样,表单就会以普通方式提交了. 


    参考文档:http://sunhuang.blogbus.com/logs/36463408.html

    展开全文
  • 使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端的控制层,后端会控制页面的跳转及数据传递。 但是当希望页面跳转或者是想要将控制权放在前端,让...
  • http://harttle.com/2015/08/03/form-submit.html ...建议使用button[type=submit]来提交表单,而不是input; 只有单行文本控件时,回车会引发表单提交; 通过onsubmit事件可阻止表单提交。 ...
  • 表单提交方式

    2018-11-15 20:09:03
    刚刚学完Java基础。步入JavaWeb 之前的笔记都是用word文档做的,刚刚尝试发博客来...1、使用submit提交 &amp;lt;form&amp;gt; &amp;lt;input type=&quot;submit&quot; /&amp;gt; &amp
  • 使用Ajax提交form表单

    2020-05-14 19:00:59
    使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候希望页面跳转,或者说想要将控制权放在前端,...
  • 博客转自于 http://harttle.com/2015/08/03/form-submit.html ,同时自己做了稍微改动 ...建议使用button[type=submit]来提交表单,而不是input; 只有单行文本控件时,回车会引发表单提交; 通...
  • 一句话总结:即使js给form对象提供了submit()方法,那也不意为表单中可以写提交按钮这个元素,即form表单依然需要五脏俱全才可以使用js的submit()方法进行提交。 二、js 模拟表单post方式提交 下面是用...
  • 原生提交方式 也就是在form标签上添加action属性 验证 验证非空直接在input标签上...onsubmit返回false不提交表单,返回true表示提交表单。 原生提交方式的验证有两种 在form标签下添加onsubmit="return functionName
  • 之前项目中使用表单提交方式 使用form()方法可以将提交事件脱离submit按钮,绑定到任何事件中 代码如下: function addSubmit(){ $(‘#addForm’).form(‘submit’, { url : _basePath + ‘/@Controller/@...
  • 通过Ajax方式提交含有文件的表单

    万次阅读 2016-03-31 22:33:35
    前言:我们通常使用form...通过这种方式页面将会刷新,但是我们有时需要刷新页面来提交含有文件的表单,这时我们就会想到通过ajax的方式。但是,如何通过ajax来提交含有文件的表单呢?Html代码: 回复内容: 上传
  • 使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候希望页面跳转,或者说想要将控制权放在前端,...
  • 上传表单(包括文件),无论使用的是.net...同样,如果使用mvc的razor 语法生成表单控件及使用form input submit提交,同样也会影响移植性,所以,我们有必要考虑使用一种通用的方式在不同的代码框架下来提交表单(包括
  • 使用ajax 来进行表单就可以了。 使用jQuery的$(“#formId”).serialize();...还有设置提交按钮的type能是submit。function getPHP() { var data = $("#formId").serialize(); console.log(data);
  • 表单提交ajax实现

    千次阅读 2015-12-18 19:41:54
    一、不使用submit按钮的submit提交 这个标题看起来有些别扭,但实际中确实有这样的需求,我们要在提交表单时进行验证,验证通过才提交,否则不提交。可以用下面代码实现: 这是比较基础的一种实现方法。注意这时就...
  • 一般的处理方式为:发布主题然后在submitForm()函数内部进行提交前的判定,最后进行提交或者输出提示后不提交。 但是感觉这样代码混杂度更高,使用onsubmit属性应该会使代码更加简洁。而且也不用手动调用submit()...
  • 使用phpcmsV9表单的时候,一旦点击提交触发submit事件,会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递。 但是很多时候希望页面跳转(体验很不好),或者说想要将控制权...
  • 发送页:send.php ``` <input type="submit" value="SUBMIT" /> ``` ...``` echo $name; ...问题来了,为何在recv.php页面里就得到参数name?相反,如果使用post方式发送,就能获得参数name
  • 在前端想做表单验证,但是一点击提交表单准...这种方式大家应该都熟悉,我就在说了。 2.使用preventDefault() 在标准浏览器中,阻止浏览器默认行为使用event.preventDefault()。示例代码: $(".submit").on
  • 使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候希望页面跳转,或者说想要将控制权放在前端,...
  • 方式1: form action="/order/?act=order" method="post" name="rep1"> ... 该优惠码可用 请输入新优惠码每份菜只能使用一次优惠券请输入优惠码" name="coupon_code">  确定   方式2: for

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 180
精华内容 72
关键字:

不使用submit方式提交表单