u013308612
Chouke-Chungyoung
采纳率0%
2016-05-15 13:49 阅读 2.6k

jQuery easyUI form ajax提交是假的吗??

5

今天学习easyUI的form表单,说他有个ajax提交数据的功能,我在服务器端设置了一道屏障,如果不是ajax请求则跳转到404页面。
结果,每次提交表单都是404了,看了下请求头,根本不是ajax提交。
我对比了一下其他ajax请求头,成功的都会有个 X-Request-With:"XMLHttpRequest" , 但是form的ajax方式就没有easyUI所说的ajax提交是不是假的啊???

我把官方给的几种使用方式都试了,不行啊!!!
别骂我,我只是个刚入门的孩子,什么高级的底层的,一概不懂,只是想知道怎么做才能通过我在服务器端设置的非ajax请求跳转到404的屏障。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

4条回答 默认 最新

  • showbo GoCityPass新加坡曼谷通票 2016-05-16 04:55

    easyui的form使用iframe来模拟的,并不是实际的ajax请求,没有X-Request-With这个请求头。。

    去掉你这个验证不就好了,干嘛非得验证X-Request-With这个请求头。一定要ajax自己添加onSubmit事件return false阻止表单提交,然后用jQuery.ajax发送表单数据

            $('#ff').form('submit', {
                    url: 'xxxxxxx',
                    onSubmit: function(){
                        var isValid = $(this).form('validate');
                        if (!isValid){
                            $.messager.progress('close');   // hide progress bar while the form is invalid
                        }
    ///////////ajax提交
                        $.ajax({url:"xxxxxx",data:$(this).serialize(),type:'POST'/*...其他配置*/})
                        return false;   
                    }
    
    点赞 1 评论 复制链接分享
  • devmiao devmiao 2016-05-15 15:41

    是不是跨域了???

    点赞 评论 复制链接分享
  • qq_33688394 qq_33688394 2016-05-16 01:33

    应该是假的?!?!?!?!?

    点赞 评论 复制链接分享
  • FarAwayWL awaken233 2017-10-09 02:40

    赞同showbo的回答. 查看源码 easyui-form的源码(1.4.2版本的jquery.form.js)

     //...省略...
            function ajaxSubmit(target, options){
            var opts = $.data(target, 'form').options;
            $.extend(opts, options||{});
    
            var param = $.extend({}, opts.queryParams);
            if (opts.onSubmit.call(target, param) == false){return;}
            $(target).find('.textbox-text:focus').blur();
            //构造了一个iframe
            var frameId = 'easyui_frame_' + (new Date().getTime());
            var frame = $('<iframe id='+frameId+' name='+frameId+'></iframe>').appendTo('body')
            frame.attr('src', window.ActiveXObject ? 'javascript:false' : 'about:blank');
            frame.css({
                position:'absolute',
                top:-1000,//让我们看不到它
                left:-1000
            });
            frame.bind('load', cb);
    
            submit(param);
    
            function submit(param){
                var form = $(target);
                if (opts.url){
                    form.attr('action', opts.url);
                }
                var t = form.attr('target'), a = form.attr('action');
                form.attr('target', frameId);//把我们要提交的form的target指向构造出来的那个iframe
                var paramFields = $();
                try {
                    for(var n in param){
                        var field = $('<input type="hidden" name="' + n + '">').val(param[n]).appendTo(form);
                        paramFields = paramFields.add(field);
                    }
                    checkState();
                    form[0].submit();
                } finally {
                    form.attr('action', a);
                    t ? form.attr('target', t) : form.removeAttr('target');
                    paramFields.remove();
                }
             //...省略...
    

    看到easyui的作者写了一个ajaxSubmit方法(不仔细看内容还真以为是一个ajax方法呢)。方法里面动态构造了一个隐藏的iframe,然后把我们要提交的form的target指向了构造出来的这个隐藏的iframe,给这个iframe设置了load事件回调方法用来处理响应。重要的是那句“form[0].submit()”,这是什么,这就是直接在提交表单啊,哪儿有什么ajax,只是保证了页面无刷新。

    点赞 评论 复制链接分享

相关推荐