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

JQuery - 提交表单的更多相关文章

  1. jquery提交表单，回调函数

    1.使用jquery 绑定事件,执行以下代码,提交单并使用回调函数 $form.serialize():serialize()序列号表单参数 var $form = $("#form&quo ...

  2. jQuery:提交表单前判断表单是否被修改过

    表单加载完成后执行 : //表单中包含input(text,checkbox,hidden),select,radio,   $("#editWithdrawAutoApprovedConf ...

  3. 使用JQuery提交表单的两种方式选择

    有一个表单,如果使用JQuery提交的话,可以使用下面2中方式,但他们的区别却是根据实际需求需要进行选择的. 第一种:表单按照action路径提交后,页面会刷新. $("#id") ...

  4. jQuery提交表单的几种方式

    方式一: $.post('../Ajax/GoodsAjax.ashx?cmd=getGsList', function (result) {   var result = eval('(' + re ...

  5. 在jsp提交表单的参数封装到一个方法里

    建议去看一下孤傲苍狼写的Servlet+JSP+JavaBean开发模式(http://www.cnblogs.com/xdp-gacl/p/3902537.html), 最好把他JavaWeb学习总 ...

  6. 使用Angular提交表单

    使用Angular提交表单 我们准备在之前使用的<script>标签中设置我们的Angular应用.所以删除里面的内容,我们就可以开始了. 设置一个Angular应用 步骤为: 1. 加载 ...

  7. jquery 通过submit()方法 提交表单示例

    jquery 通过submit()方法 提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...

  8. Jquery ajax提交表单几种方法

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...

  9. jQuery使用ajaxSubmit()提交表单示例

    ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件.如下所示:   代码如下: <script src=" ...

随机推荐

  1. BZOJ 1096

    const maxm=1e100; maxn=; ..maxn] of int64; q:..maxn] of longint; n,i,h,t:longint; function calc(j,i: ...

  2. Libev学习笔记2

    这一节根据官方文档给出的简单示例,深入代码内部,了解其实现机制.示例代码如下: int main (void) { struct ev_loop *loop = EV_DEFAULT; ev_io_i ...

  3. ZYB's Game(博弈)

    ZYB's Game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  4. c#Winform程序的toolStripButton自己定义背景应用演示样例源代码

    C# Winform程序的toolStrip中toolStripButton的背景是蓝色的,怎样改变背景及边框的颜色和样式呢? 实现此功能须要重写toolStripButton的Paint方法 这里仅 ...

  5. DevExpress ASP.NET 使用经验谈（3）-XPO对象的使用(使用指定数据连接)

    首先,我们贴出上一节Users类XPO对象的保存代码,直接建立的XPO Session会话,因为没有与我们所期望的数据层建立绑定, 所以程序自动创建了一个Access数据库,作为默认数据库操作对象来使 ...

  6. javascripts小结

    1 NAN-isNaN():判断是否数值 2 数值转换 Number()-任何数据类型,parseInt(),parseFloat()-字符串 3数组转字符串 var a=["red&quo ...

  7. LeetCode 二叉树后序遍历（binary-tree-postorder-traversal）

    Given a binary tree, return the postorder traversal of its nodes' values. For example:Given binary t ...

  8. HDU 4548 美素数（打表）

    HDU  4548  美素数(打表)解题报告 题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=88159#problem/H 题目 ...

  9. sdl2-2.04 读取位图并显示

    // sdl2_win32.cpp : Defines the entry point for the console application.//// 假定SDL的库文件和头文件和VC的工程文件在一 ...

  10. VS2010 .net4.0 登录QQ 获取QQ空间日志 右键选中直接打开日志 免积分 源码下载

    代码有一部分是原来写的  最近翻代码 看到了  就改了一下 CSDN上传源码 上传了几次都没 成功 郁闷   不知道怎么回事 上传不了 想要的留 邮箱 或加群77877965 下载地址在下面 演示地址 ...