闲话ajax，例ajax轮询，ajax上传文件[开发篇]

发布时间：2020-05-25 03:33:18 所属栏目：PHP 来源：互联网

导读：引语：ajax这门技术早已见怪不怪了，我本人也只是就自己真实的经验去总结一些不足道的话。供不是特别了解的朋友参考参考！本来早就想写一篇关于ajax的文章的，但是前段时间一直很忙，就搁置了，趁着元旦放假，赶紧补上吧！ajax的出现，可以出给用户带来了很好

　　引语：ajax这门技术早已见怪不怪了，我本人也只是就自己真实的经验去总结一些不足道的话。供不是特别了解的朋友参考参考！

　　本来早就想写一篇关于ajax的文章的，但是前段时间一直很忙，就搁置了，趁着元旦放假，赶紧补上吧！

　　ajax的出现，可以出给用户带来了很好的体验，证据如下：

　　　　1、感觉：以前要给用户呈现新的内容，就必须要刷新当前页面，结果往往是这样:用户看着看着，唰...，然后又重头看起，我勒个去，这谁受得了; 自从有了ajax后，就是这样的，用户关注哪一块，变化哪一块，我们就更新那一块，完全看不出差别。

　　　　2、时间：如果有的内容要显示出现将会是非常耗时的，如统计数据一类，按照以前，都是等待所有数据都准备完全了，半天之后，终于可以一起显示了; 自从有了ajax之后，这点耗时的东西就交给他吧，把主要的类型快速显示出来，用户完全没感觉啊！

　　　　3、隐性错误：如果服务器发生了一些500错误，在以前，那整个网页就绝对不行了; 有了ajax后，如果仅是ajax部分错误，对其他地方将完全无影响，但是你最好尽快修复好错误！

　　ajax的意义大概就在于这些吧，具体的应用场景根据情况而定，应用好ajax技术，给用户一个极致的体验！

　　下面是本文分享的两个点，ajax轮询，ajax上传文件(因为这两个看起来稍微有点意义):

　　　　1、ajax轮询

　　　　　　ajax作为异步和服务器交互，作轮询，不停接收服务器内容是个不错的选择，用于做一些简单的消息通知，定时刷新局部信息都有着不错的功效！

　　　　2、ajax上传文件

　　　　　　每每说到上传文件，都是头疼的事，因为为考虑到服务器安全，要求必须使用表单进行同步提交。而现有的包括本文描述的所谓异步上传文件，也只是换了一种用户看不到的form表单提交方式而已（如：提交到一个隐藏的iframe中）。不过不管怎么样，能实现效果就行。咱们要的，是结果，不是过程！

　　　　　　这里，主要用到两个插件，jquery.validate.js,jquery.form.js,用到表单验证只是为了正常场景下一些操作以及自己不设置提交项，jquery.form.js则是一个可异步的表单提交插件，主要使用方法为 ajaxSubmit. 代码如下：

Ajax--轮询--上传文件举例 //表单验证

$('#Form1').validate({
errorClass : 'color-red',　 //设置错误的class
 rules : { 　　　　　　　　　　　　//规则，只是演示
 cate_name : {required:true},sort : { digits:true }
},messages : {　　　　　　　　　　 //提示内容，只是演示
 cate_name : {required:'  *分类名必填'},sort : {digits:"  排序必须是正整数"}
},submitHandler : function(form){submitForm(form);}
});
});

    </span><span style="background-color: #f5f5f5; color: #008000;"&gt;//</span><span style="background-color: #f5f5f5; color: #008000;"&gt;表单ajax提交,fn为提交成功后要执行的回调函数，没有则刷新当前页面</span>
    <span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt; submitForm(form,fn){
        $(form).ajaxSubmit({
            success : </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt;(response,statusText){
                </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;if</span><span style="background-color: #f5f5f5; color: #000000;"&gt;(response.status </span><span style="background-color: #f5f5f5; color: #000000;"&gt;== </span><span style="background-color: #f5f5f5; color: #000000;"&gt;1</span><span style="background-color: #f5f5f5; color: #000000;"&gt;){
                    </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; info </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; response.info </span><span style="background-color: #f5f5f5; color: #000000;"&gt;?</span><span style="background-color: #f5f5f5; color: #000000;"&gt; response.info : </span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;提交成功...</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;
                    alert(info);
                    setTimeout(</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt;(){
                        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;if</span><span style="background-color: #f5f5f5; color: #000000;"&gt;(</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;typeof</span><span style="background-color: #f5f5f5; color: #000000;"&gt;(fn) </span><span style="background-color: #f5f5f5; color: #000000;"&gt;===</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;){fn(response);}</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;else</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{window.location.reload(</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;true</span><span style="background-color: #f5f5f5; color: #000000;"&gt;);}
                    },</span><span style="background-color: #f5f5f5; color: #000000;"&gt;1</span><span style="background-color: #f5f5f5; color: #000000;"&gt;);
                }</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;else</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{
                    console.log(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;提交失败</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;)
                }
            },beforeSubmit : </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt; (formData,jqForm,options) {
                console.log(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;数据提交中...</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;);
            },complete: </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt;(data){
                console.log(data);
            }
        });
    }
</span><span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;script</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;style</span><span style="color: #0000ff;"&gt;></span><span style="background-color: #f5f5f5; color: #800000;"&gt;
    html,body</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;margin</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt; height</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 100%</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}</span><span style="background-color: #f5f5f5; color: #800000;"&gt;
    .wrap</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;width</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 50%</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt; margin</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 0 auto</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;background</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; #048E6A</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt; height</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 100%</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;text-align</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; center</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt; position</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; relative</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}</span><span style="background-color: #f5f5f5; color: #800000;"&gt;
    .container</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;padding</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 20px</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt; line-height</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 40px</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}</span><span style="background-color: #f5f5f5; color: #800000;"&gt;
    .container.with-back</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;background</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; #46ff50</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}</span><span style="background-color: #f5f5f5; color: #800000;"&gt;
    .ext-container ul</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;width</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 100%</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt; margin</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt; padding</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}</span><span style="background-color: #f5f5f5; color: #800000;"&gt;
    ul li</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;list-style-type</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; none</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}</span><span style="background-color: #f5f5f5; color: #800000;"&gt;
    .ext-container ul li</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;background</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; #F38A66</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt; padding</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 3px</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}</span><span style="background-color: #f5f5f5; color: #800000;"&gt;
    .ext-container ul li:hover</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;background</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; #3E9054</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}</span><span style="background-color: #f5f5f5; color: #800000;"&gt;
    .ext-container ul.list li a</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;text-decoration</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; none</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt; color</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; #ffffff</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;display</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; block</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}</span>
<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;style</span><span style="color: #0000ff;"&gt;></span>

（编辑：安卓应用网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!