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. IIS部署遇到问题(没有相关资源/权限不足无法读取配置文件)及解决方法

    1:找不到web.config,如下图: 解决办法: 点击目录浏览--打开功能--启用(应用),再次浏览解决 2:再次预览出现别的错误500.19,权限不足,如下图: 解决办法:(右键编辑权限或者右上 ...

  2. 使用 yapi-to-typescript 生成接口响应数据的 TS 类型声明

    TS 是越写越爽,但是很不爽的是接口响应数据一堆,每次要去手写很麻烦. 最近正好后端接口文档从一个垃圾工具切换到了 Yapi,然后去搜了下可以通过接口文档自动生成 TS 类型声明,就自己搞了下,还是很 ...

  3. PEP小学五年级英语下册 mp3 音频和电子书

    链接:https://pan.baidu.com/s/1O805uHU-lsMKog3WLtjRkA 提取码:o8rg 链接:https://pan.baidu.com/s/1Oa4wcM5min83 ...

  4. 福利|GISer需知网站

    一些GISer需知的网站推荐 1.https://www.usgs.gov/ 美国地质调查局 美国地质勘探局(United States Geological Survey,简称USGS),又译美国地 ...

  5. angularJs 指令的用法

    <!DOCTYPE html><html ng-app='app'><!--A attribute属性:当做属性来使用<div xingoo></div ...

  6. 程序语言与编程实践4-> 蓝桥杯C/C++备赛记录2 | 第二周学习训练

    0323,又是一周星期三,按道理该总结了.这周前几天写题比较多,后面事情多了起来,就没怎么写了.主要方向是洛谷的基本语法熟悉,PTA平台数据结构的一些题目. 0323附上: 题目比较多,所以文章可能有 ...

  7. 记录java中常用的英文单词01

    专业缩写 POJO(plain ordinary java object)--简单的java对象 Spring-jdbc--为了使JDBC更加易于使用,spring在JDBC API上定义了一个抽象层 ...

  8. CF 920A Water The Garden

    本题可以看做是一个数学题 因为 在第 1 和第 3 个洒水器之间的 花园灌溉的时间只要 (1 + 3 ) >> 1 - 1 + 1;//这么长的时间 那么我么就可以以此类推到 从而我么可以 ...

  9. Vue中图片的加载方式

    一.前言 VUE项目中图片的加载是必须的,那么vue中图片的加载方式有哪些呢,今天博主就抽点时间来为大家大概地捋一捋. 二.图片的加载方法 1.在本地加载图片(静态加载) 图片存放assets文件夹中 ...

  10. Python的安装与开发环境的选用

    2021快要结束了,这一年我依旧深耕于python的广阔土壤,将重点放在机器人和传感器的角度.也收获了一大批正在学习和期望学习python的朋友. 正在学习的暂且不言,这篇主要是写给期望学习的朋友,同 ...