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. 反射、静态代理、动态代理（jdk、cglib）

    一.反射 反射在之前的文章中详细的解释过了,简单概括就是:可以动态的获取到一个类内部的所有的信息,动态的去创建对象和使用对象以及可以操作对象的属性和方法. 二.代理 首先解释一下代理:使用一个代理对象 ...

  2. 2020.11.2 异步IO 协程

    异步IO 同步IO在一个线程中,CPU执行代码的速度极快,然而,一旦遇到IO操作,如读写文件.发送网络数据时,就需要等待IO操作完成,才能继续进行下一步操作. 在IO操作的过程中,当前线程被挂起,而其 ...

  3. Tableau绘图一热图、日历图、人口金字塔、标靶图、凹凸图、帕累托图

    Tableau绘图一热图.日历图.人口金字塔.标靶图.凹凸图.帕累托图 本文首发于博客冰山一树Sankey,去博客浏览效果更好.直接右上角搜索该标题即可 一.热图 例子:示例超市 可以通过更改颜色来改 ...

  4. vue--按需加载的3种方式（解决网页首次加载速度慢的问题）

    一.vue的异步组件加载 使用异步组件加载,打包的时候会将每个组件分开打包到不同的js文件中: {path: '/index', name: 'index', meta:{ title:'首页', r ...

  5. 树莓派4B安装 百度飞桨paddlelite 做视频检测 （一、环境安装）

    前言: 当前准备重新在树莓派4B8G 上面搭载训练模型进行识别检测,训练采用了百度飞桨的PaddleX再也不用为训练部署环境各种报错发愁了,推荐大家使用. 关于在树莓派4B上面paddlelite的文 ...

  6. out与err输出流

    System.in.System.out与System.err 当我们查阅文档可知,out与err都是Java中的输出流,in是"标准"输入流,System.out是"标 ...

  7. LGP3349口胡

    建议改为:如何使用FWT直接把反演题草过去 需要清楚 FWT 的本质是什么. 首先我们有一个明显的 DP: 设 \(dp[u][x][S]\) 代表 \(u\) 在图中为 \(x\),子树包含集合 \ ...

  8. redis规范（实用）

    redis功能强大,数据类型丰富,再快的系统,也经不住疯狂的滥用.通过禁用部分高风险功能,并挂上开发的枷锁,业务更能够以简洁.通用的思想去考虑问题,而不是绑定在某种实现上. Redis 根据不同的用途 ...

  9. Netty之DefaultAttributeMap与AttributeKey的机制和原理

    一.介绍和原理分析 1.什么是 DefaultAttributeMap? DefaultAttributeMap 是一个 数组 + 链表 结构的线程安全Map. 2.什么是 AttributeKey? ...

  10. 整理分布式锁：业务场景&分布式锁家族&实现原理

    1.引入业务场景 业务场景一出现: 因为小T刚接手项目,正在吭哧吭哧对熟悉着代码.部署架构.在看代码过程中发现,下单这块代码可能会出现问题,这可是分布式部署的,如果多个用户同时购买同一个商品,就可能导 ...