1.submit.php

<?php

$arr = $_POST;

$arr['msg']=1;

//echo $_POST['uname'];

echo json_encode($arr);

?>

2.index.html

<html>

<head>

<meta charset="utf-8">

<title>Ajax表单提交插件jquery form</title>

<script type="text/javascript" src="jquery.form.min.js"></script>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(function(){

    var options = {

       // target:        '#output',   // target element(s) to be updated with server response

        beforeSubmit:  showRequest,  // pre-submit callback

        success:       showResponse,  // post-submit callback

        resetForm: true,

        dataType:  'json' 

        // other available options:

        //url:       url         // override for form's 'action' attribute

        //type:      type        // 'get' or 'post', override for form's 'method' attribute

        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)

        //clearForm: true        // clear all form fields after successful submit

        //resetForm: true        // reset the form after successful submit 

        // $.ajax options can be used here too, for example:

        //timeout:   3000

    }; 

    // bind to the form's submit event

    $('#my_form').submit(function() {

        // inside event callbacks 'this' is the DOM element so we first

        // wrap it in a jQuery object and then invoke ajaxSubmit

        $(this).ajaxSubmit(options); 

        // !!! Important !!!

        // always return false to prevent standard browser submit and page navigation

        return false;

    });

});

// pre-submit callback

function showRequest(formData, jqForm, options) {

    var uname = $("#uname").val();

    if(uname==""){

        $("#msg").html("姓名不能为空！");

        return false;

    }

    var age = $("#age").val();

    if(age==""){

        $("#msg").html("年龄不能为空！");

        return false;

    }

    $("#msg").html("正在提交...");

    return true;

} 

// post-submit callback

function showResponse(responseText, statusText)  {

    $("#msg").html('提交成功');

    var sex = responseText.sex==1?"男":"女";

    $("#output").html("姓名："+responseText.uname+"&nbsp;性别："+sex+"&nbsp;年龄："+responseText.age);

    // for normal html responses, the first argument to the success callback

    // is the XMLHttpRequest object's responseText property 

    // if the ajaxSubmit method was passed an Options Object with the dataType

    // property set to 'xml' then the first argument to the success callback

    // is the XMLHttpRequest object's responseXML property 

    // if the ajaxSubmit method was passed an Options Object with the dataType

    // property set to 'json' then the first argument to the success callback

    // is the json data object returned by the server 

    //alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +

    //    '\n\nThe output div should have already been updated with the responseText.');

}

</script>

</head>

<body>

<form id="my_form" action="submit.php" method="post">

    <p>姓名：<input type="text" name="uname" id="uname" class="input"></p>

     <p>性别：<input type="radio" name="sex" value="1" checked> 男 <input type="radio" name="sex" value="2"> 女 </p>

     <p>年龄：<input type="text" name="age" id="age" class="input" style="width:50px"></p>

     <p style="margin-left:30px"><input type="submit" class="btn" value="提交"><span id="msg"></span></p>

</form>

div id="output"></div>

</body>

</html>

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hijci0j0b1j

js 中的submit 回调函数的更多相关文章

  1. js中replace的回调函数使用。

    这只是一个小问题,但是之前并没有发现.这个问题就是replace的第二个函数是支持回调函数的. var ext = new RegExp('f','g'); 1.str.replace(ext ,1) ...

  2. Node.js自学笔记之回调函数

    写在前面:如果你是一个前端程序员,你不懂得像PHP.Python或Ruby等动态编程语言,然后你想创建自己的服务,那么Node.js是一个非常好的选择.这段时间对node.js进行了简单的学习,在这里 ...

  3. JS中的自执行函数

    本来规划的是2013年,狠狠的将JS学习下,谁知计划赶不上变化,计划泡汤了.13年的我对JS来说可以说是属于跟风,对它的理解和认识也仅仅是皮毛而已,也是因为要完成<ArcGIS API for ...

  4. main.js中封装全局登录函数

    1. 在 main.js 中封装全局登录函数 通过 vue 对象的原型扩展,可以扩展一个函数,这样这个函数就可以在每一个界面通过类似指向对象的方式,去访问这个函数. 如下是 main.js 扩展的函数 ...

  5. [教程]Delphi 中三种回调函数形式解析

    Delphi 支持三种形式的回调函数 全局函数这种方式几乎是所有的语言都支持的,类的静态函数也可以归为此类,它保存的只是一个函数的代码起始地址指针( Pointer ).在 Delphi 中声明一般为 ...

  6. js中的三种函数写法

    js中的三种函数写法 <script type="text/javascript"> //普通的声明方式 function myFun(m,n){ alert(m+n) ...

  7. JS中构造函数和普通函数有什么区别

    JS中构造函数有普通函数有什么区别? 1.一般规则 构造函数都应该以 一个大写字母开头,eg: function Person(){...} 而非构造函数则应该以一个小写字母开头,eg: functi ...

  8. asp.net类似于js中的setTimeOut()的函数作用?

    asp.net类似于js中的setTimeOut()的函数作用? 插入这行即可,定时2秒,再运行下一步: System.Threading.Thread.Sleep(); 加个随机数 Random r ...

  9. JS中的高阶函数

    JS中的高阶函数 高阶函数是指以函数作为参数的函数,并且可以将函数作为结果返回的函数. 1. 高阶函数 接受一个或多个函数作为输入 输出一个函数 至少满足以上一个条件的函数 在js的内置对象中同样存在 ...

随机推荐

  1. ASP.NET Core 6框架揭秘实例演示[15]：针对控制台的日志输出

    针对控制台的ILogger实现类型为ConsoleLogger,对应的ILoggerProvider实现类型为ConsoleLoggerProvider,这两个类型都定义在 NuGet包"M ...

  2. Java：命令行参数的传入和调用

    1.传入 传入时机:执行时 格式: //编译 javac Main.java //执行并传入命令行参数 -version java Main -version 此时,参数-version就以Strin ...

  3. MySQL从卸载到安装！图文详细版(你想知道的全都有！！)

    2. MySQL的下载.安装.配置 2.1 MySQL的四大版本 MySQL Community Server社区版本,开源免费,自由下载,但不提供官方技术支持,适用于大多数普通用户. MySQL E ...

  4. 微信小程序文件上传结合lin ul

    html <l-form name="goods" l-form-btn-class="l-form-btn-class" bind:linsubmit= ...

  5. Dcate Admin 的使用

    1:laravel安装框架 composer create-project --prefer-dist laravel/laravel 项目名称 2:配置数据库 DB_CONNECTION=mysql ...

  6. 微信小程序清除缓冲

    1:wxml定义一个清除缓冲的按钮,并绑定触摸事件 <button bindtap="clear">清空缓冲</button> 2:wxjs定义方法: // ...

  7. php 23种设计模式 - 迭代器模式

    迭代器模式 迭代器模式 (Iterator),又叫做游标(Cursor)模式.提供一种方法访问一个容器(Container)对象中各个元素,而又不需暴露该对象的内部细节. 当你需要访问一个聚合对象,而 ...

  8. php 23种设计模型 - 代理模式

    代理模式(Proxy) 在代理模式(Proxy Pattern)中,一个类代表另一个类的功能.这种类型的设计模式属于结构型模式. 在代理模式中,我们创建具有现有对象的对象,以便向外界提供功能接口. 介 ...

  9. BBS项目分布搭建二(个人站点相关)

    BBS项目分布搭建二 1. 首页详情补充 # 在home.html文件中 body标签内补充: <div class="container-fluid"> <di ...

  10. DOS命令基础

    DOS命令 打开CMD win+R,输入cmd. 桌面任何地方按住shift+鼠标右键 ,点击powershell. 我的电脑文件路径前cmd+空格. 开始+系统. 关闭CMD alt+空格+C. 常 ...