JQuery - 提交表单

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_30888027

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量45

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 开发工具 php ViewUI

原文链接：http://www.cnblogs.com/KTblog/p/5009793.html

本文介绍如何使用JQuery.form.js插件实现表单的异步提交与文件上传功能。通过示例代码展示了设置表单提交方式为异步的具体步骤，并解释了成功与错误回调函数的作用。

[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>';

转载于:https://www.cnblogs.com/KTblog/p/5009793.html