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. js 把x,y轴两个数组变成[[x,y],[x,y]]的二维数组

    例如有X轴数组xarr=[2006,2007,2008],Y轴数组yarr=[12,15,18],代码如下: //调用 mergexy([2006,2007,2008],[12,15,18]); // ...

  2. Excel VBA中写SQL，这些问题的方法你一定要牢记

    小爬之前的文章 [Excel VBA中写SQL,这些问题你一定为此头痛过]中详细讲诉了一些常见的VBA 中使用SQL遇到的问题,这里再补充两个常见的问题场景及对应的解决方案,希望你们看了后能够思路开阔 ...

  3. Bugku CTF_web3

    1.打开网页,得到信息如下 2.在hackbar里构造url如下 3.得到flag 4.本题的考点在于读的懂PHP代码,并且学会构造get参数.

  4. 云e办笔记（删减）

    1JwtTokenUtils工具 2公共返回对象 3Admin实现UserDetails 4AdminLoginParam 5AdminLoginController 6SecurityConfig ...

  5. 自己动手写Vector【Cherno C++教程】

    动手写一个Vector 本文是对<最好的C++教程>的动手写数据结构部分的一个整理,主要包含91p动手写Array数组和92p动手写Vector数组的内容. 自己动手来写这些数据结构是学习 ...

  6. 前端（react）上传到阿里云OSS存储 实例

    需求背景 由于现有的后台管理系统,上传的视频越来越大,加上上传视频较慢,后端小哥提出直接从前端上传视频或者其他文件到阿里云OSS存储. 阿里云OSS 阿里云OSS文档介绍,这里不做过多赘述 安装 原本 ...

  7. PicGo+Typora配置gitee图床

    1 .下载Typora Typora官网地址:https://www.typora.io/#windows 本文使用的Typora版本为 0.11.2 根据自己的要求进行安装即可! 2.下载PicGo ...

  8. 空间插值生物X适宜性分析

    1 前言 这期博主将根据示例大概讲一下插值分析. 2 问题阐述 根据要求,完成以下操作: (1)请就以上条件确定此地区适合X的生活范围,并制作专题图.专题图内容要求以地形和水系作为背景,且给出适宜区域 ...

  9. 原生 JS 实现 VS Code 自动切换输入法状态！这次没有AHK

    上一篇文章:使用 AHK 在 VS Code 中根据上下文自动切换输入法状态 给出一个使用 ahk 在 VSCode 自动切换输入法的方法.不过这个方法实际上很蹩脚,一点都不优(zhuang)雅(bi ...

  10. spring——通过xml文件配置IOC容器

    创建相关的类(这里是直接在之前类的基础上进行修改) package com.guan.dao; public interface Fruit { String getFruit(); } packag ...