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. Anaconda 下 Jupyter 更改默认启动路径方法(转)

    https://www.cnblogs.com/awakenedy/p/9075712.html

  2. appium滚动查找屏幕外的控件

    嗯,还是把自己做的实验保存一下 Appium1.12.1+python2.7 实验滚动,查找屏幕外控件以及控制seekbar scroll() 是根据页面中两个元素位置之间的距离进行滑动. 滑动寻找屏 ...

  3. WPF页面后台代码InitializeComponent()报错

    InitializeComponent(); 报错: 查看对应的前台xaml文件中,主标签中是否缺失引用: x:class="命名空间.类名"

  4. Spring Boot项目微信云托管入门部署

    微信云托管本身是一个服务器,里面的软件都已经配置好了,直接使用即可,适用于一些简单部署的项目.直接把项目直接上传到服务器即可.无需各种繁琐的软件配置和打包,微信云托管统统给你搞定.而且系统会根据使用量 ...

  5. ASP.NET Core 6框架揭秘实例演示[18]：HttpClient处理管道

    我们知道ASP.NET的核心就是由中间件组成的请求处理管道,HttpClient也采用了类似的设计.HttpClient管道由一组HttpMessageHandler对象构成,这些HttpMessag ...

  6. Mysql基础语法-建库-建表(增、删、改、查、表关联及子查询)

    前言:MySQL是一个数据库管理系统,也是一个关系数据库.它是由Oracle支持的开源软件,MySQL可以在各种平台上运行UNIX,Linux,Windows等.可以将其安装在服务器甚至桌面系统上. ...

  7. php7废弃mcrypt加密，使用openssl替换

    概要: php从7.0升级到7.1废弃了一个扩展,即mcrypt扩展,虽然安装上扩展也能正常使用,但是会发出警告,告诉我们mcrypt相关方法已经被废弃,到了7.2,已经被移除,因此不建议继续使用. ...

  8. hive从入门到放弃(二)——DDL数据定义

    前一篇文章,介绍了什么是 hive,以及 hive 的架构.数据类型,没看的可以点击阅读:hive从入门到放弃(一)--初识hive 今天讲一下 hive 的 DDL 数据定义 创建数据库 CREAT ...

  9. CSS 选择器学习总结

    1.id 选择器 #idname{color:red;} 2.class选择器 .classname{} 3.标签选择器 div{} 4.通配符选择器 *{} 5. 属性选择器 [id]{ } 5.选 ...

  10. Net之线程池的优点

     使用线程池的好处:     1.减少在创建和销毁线程上所花的时间以及系统资源的开销     2.如不使用线程池,有可能造成系统创建大量线程而导致消耗完系统内存以及"过度切换".