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>‘;
时间: 2024-10-19 02:20:37

JQuery - 提交表单的相关文章

jquery 提交表单bug

今天在用jquery提交表单的时候,遇到一个问题,当提交一个<input type="text" name=submit  /> 的dom对象时候,是提交失败,我试验过 jQuery v1.10.2 ,  jQuery JavaScript Library v1.7.2,都有这个BUG,我怀疑jquery 在 继承对象的时候,submit Dom对象把 submit fn对象给覆盖不,所以产生了这个bug, 但是不知道怎么修复这个BUG,我粘贴上测试代码 <form

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

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

去哪网实习总结:JavaWeb中使用jquery提交表单(JavaWeb)

本来是以做数据挖掘的目的进去哪网的,结构却成了系统开发... 不过还是比较认真的做了三个月,老师很认同我的工作态度和成果... 实习马上就要结束了,总结一下几点之前没有注意过的变成习惯和问题,分享给大家. 同时打个广告:去哪网内审部招JavaWeb开发实习生,时间非常自由,每周一天.周六周日甚至都可以,时间充裕的小伙伴给我留言啊,挣个零花钱,还能长点经验....(保研的.想工作的大四狗最合适不过了...) <span style="white-space:pre"> <

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

建议去看一下孤傲苍狼写的Servlet+JSP+JavaBean开发模式(http://www.cnblogs.com/xdp-gacl/p/3902537.html), 最好把他JavaWeb学习总结全部看完会有很大的收获哦! 而把jsp专递的参数封装到一个方法里面也是从他那里学到的. 我觉得特别有用,尤其是在做项目的时候能省很多的代码  一: 需要的包 根据上一篇JDBC+Servlet+jsp(http://www.cnblogs.com/zhu520/p/6913650.html)的内容

使用Angular提交表单

使用Angular提交表单 我们准备在之前使用的<script>标签中设置我们的Angular应用.所以删除里面的内容,我们就可以开始了. 设置一个Angular应用 步骤为: 1. 加载Angular 2. 设置module 3. 这是controller 4. 将module和controller应用于HTML 5. 设置双向变量绑定 6. 这是错误和信息 看起来好像是很多内容,但是最终,我们会用非常少的代码,并且看起来会非常简洁.另外,创建带有更多输入更大的表单,也会更容易. Angul

使用jQuery实现跨域提交表单数据

我们在WEB开发中有时会遇到这种情况,比如要从A网站收集用户信息,提交给B网站处理,这个时候就会涉及到跨域提交数据的问题.本文将给您介绍如何使用jQuery来实现异步跨域提交表单数据. 在jQuery中,我们使用json数据类型,通过getJSON方法来实现从服务端获取或发送数据,而当要向不同远程服务器端提交或者获取数据时,要采用jsonp数据类型.使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面.服务器端应当在JSON数据前加上回调函数名,以便

Jquery form表单提交

起因 由于项目中原先提交from是通过JavaScript指定action,在submit提交的,使用的方式,也不是很标准,造成除了ie之外的浏览器都不能正常的提交数据,做web项目还是要考虑到浏览器的兼容性的. 1.序列化form,通过Ajax提交 $.ajax({ cache: false, type: "POST", url: "readImage.do", data: $('#ff').serialize(), //序列化表单数据 async: true,

jquery验证表单 提交表单

问题: jquery中使用submit提交按钮时,当return false后,依然会提交表单. 解决: 使用button按钮,而不是submit按钮 <script type="text/javascript" src="scripts/jquery-2.0.2.js"></script> <script type="text/javascript"> function check(){ var npassw

Jquery异步提交表单到Action

转载请注明出处:jiq?钦's technical Blog 一 需求 出于兴趣最近在做分布式注册中心的管理界面,其中一个模块是左边的树显示所有ZooKeeper节点,使用的ztree实现,点击树节点的时候会查询后台action返回节点数据,显示在右边区域,为了不刷整个页面,所以采用的是Jquery的异步请求Action返回JSON数据,参考我的这篇文章,然后使用Jquery的load函数载入显示节点信息的nodeInfo.jsp,以返回的JSON数据为参数. 效果如下: 现在的需求是:我要在编