zoukankan      html  css  js  c++  java
  • JQuery

    [JavaScript] JQuery异步提交表单与文件上传
    Jquery.form.js是一个可以异步提交表单及上传文件的插件。
    文档地址:http://jquery.malsup.com/form/
    
    index.html
    
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <script type="text/javascript" language="javascript" src="js/jquery-1.10.2.js"></script>
        <script type="text/javascript" language="javascript" src="js/jquery.form.js"></script>
        <script type="text/javascript" language="javascript">
            $(function(){
                //异步提交表单
                $("#ajaxSubmit").on("click",function(){
                    console.log($(this));
                    $("#formToUpdate").ajaxSubmit({
                        type:'post',
                        url:'p.php',
                        success:function(data){
                            console.log(data);
                        },
                        error:function(XmlHttpRequest,textStatus,errorThrown){
                            console.log(XmlHttpRequest);
                            console.log(textStatus);
                            console.log(errorThrown);
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
    
    <form id="formToUpdate" method="post" action="#" enctype="multipart/form-data">
        <input type="text" name="t1"><br />
        <input type="file" name="f1"><br />
        <input id="ajaxSubmit" type="button" value="异步提交">
    </form>
    
    </body>
    </html>
    
    p.php
    
    <?php
    /**
     * Created by JetBrains PhpStorm.
     * User: smeoi
     * Date: 13-11-11
     * Time: 下午12:35
     * To change this template use File | Settings | File Templates.
     */
    
    echo '<pre>';
    print_r($_POST);
    echo '</pre>';
    
    echo '<pre>';
    print_r($_FILES);
    echo '</pre>';
    
  • 相关阅读:
    Android 操作系统架构开篇
    《构建之法》读后感
    《梦断代码》读后感
    学习日报
    学习日报
    记账本开发4
    记账本开发3
    学习日报
    学习日报
    记账本开发2
  • 原文地址:https://www.cnblogs.com/KTblog/p/5009793.html
Copyright © 2011-2022 走看看