jquery Ajax无刷新提交表单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<form id="Form1" action="1.php" method="post" >
名称:<input name="name" type="text" /><br />
密码:<input name="password" type="password" /><br />
手机:<input name="mobile" type="text" /><br />
说明:<input name="memo" type="text" /><br />
<input type="submit" value="提 交" />
</form>

<script type="text/javascript">

//将form转为AJAX提交
function ajaxSubmit(frm, fn) {
    var dataPara = getFormJson(frm);
    $.ajax({
        url: frm.action,
        type: frm.method,
        data: dataPara,
        success: fn
    });
}

//将form中的值转换为键值对。
function getFormJson(frm) {
    var o = {};
    var a = $(frm).serializeArray();
    $.each(a, function () {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || ‘‘);
        } else {
            o[this.name] = this.value || ‘‘;
        }
    });

    return o;
}
$(document).ready(function(){
    $(‘#Form1‘).bind(‘submit‘, function(e){
        ajaxSubmit(this, function(data){
            alert(data);
        });
        e.preventDefault();
    });
});
</script>
</body>
</html>

服务端

<?php

var_dump($_POST);
时间: 2024-10-05 05:31:43

jquery Ajax无刷新提交表单的相关文章

Ajax无刷新提交表单和显示

ajax无刷新表单提交: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&

HTML无刷新提交表单

通常对于无刷新提交表单,我们都是运用ajax实现的.前段时间跟着老大了解到另一种无刷新提交表单的方法.现在整理出来分享给大家. 第一种: (html页面) <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="utf-8"> <title>无刷新提交表单</title> <style type="text/css&qu

iframe实现面页无刷新提交表单

一.表单提交到了哪里? 这似乎是个无知的问题,我们都知道表单提交到服务器,java,php,asp等服务器,然后由服务器去读.那么之后呢,服务器总要返回点什么吧,要么返回 一个xml或json数据,要么返回一个页面,要么返回一个页面片段,但是返回到哪里了,这些结果在哪里展示?其实这就是常常被忽略的一个问题,尤其是 ajax用多了,觉得无刷新是理所当然的.在默认情况下,在什么页面提交的,就会将返回的数据(json或页面或页面片段)给这个页面.这里的页面指一个 框架,带有<html></ht

无刷新提交表单

有些时候,不能使用ajax来进行提交数据,必须用表单来提交,但是表单提交后刷新页面不可忍受,如何能进行表单无刷新提交呢. 近期在工作中就遇到了这个问题,经过深思熟虑还有和RD的仔细沟通.决定用iframe来解决这个问题. form的target属性不光有_blank,_self, _top, _parent属性,还有自定义属性噢! <form target="xxx"><form> <iframe name='xxx'></iframe>

纯html无刷新提交表单

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="utf-8"> <title>无刷新提交表单</title> <style type="text/css"> ul{ list-style-type:none;} </style> </head> <body> &

使用iframe实现页面无刷新提交表单

iframe提交表单其实比ajax要方便一些,当然ajax也有ajax的好处,只是ajax编码处理有时有些麻烦,虽然经过转码是可以解决中文问题,但如果直接使用iframe不存这些问题了,下面来看看. 最近在做一个项目,用到上传图片功能,发现ajax不能enctype="multipart/form-data" 属性的表单,没办法,只能使用form表单直接提交的方法了,但是form表单直接提交会跳转页面,这样很不友好,也不是项目需求,于是上网搜索了一番,发现可以使用隐藏的iframe来实

无刷新提交表单(非Ajax实现)

HTML代码: <iframe id="fra" name="frm" style="display: none;"></iframe> <form id="frm" method="post" action="@Url.Content("~/Backstage/MachineMng/RoadSet/SaveTrackRoad")?roadId[e

js无刷新提交表单

$("#form1").attr("target", "frameFile"); $("#form1").submit(); <iframe id='frameFile' name='frameFile' style='display: none;'></iframe> 将表单提交目标指向隐藏的iframe,用iframe代替form提交

ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单

有时候,不得不考虑到以下场景问题: 数据库表字段会频繁更改扩展,而流行的重业务的js框架过于依赖json数据接口,导致的问题是,数据库表更改 -> 数据接口更改 -> 前段框架逻辑更改... 一不小心就陷入坑坑洼洼. 这样的话,原来纯ASP.NET MVC绑定的方式,还是可以一用的,因为该方式不用再为那么多js代码烦恼. 不好意思,前面自说自话啊,直接上干货代码了———— Ajax.BeginForm @{ Layout = null; var ajaxOptions = new AjaxOp