from表单异步处理. 简单处理方法: jQuery做异步提交表单处理, 通过$("#form").serialize()将表单元素的数据转化为字符串, 最后通过$.ajax()执行异步请求资源.

demo示例:

html 文件

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

     <title>信息登记表异步提交</title>

     <style type="text/css">

     .grayBox{

          backGround-color:#e0e0e0;

     }

     table{

         text-align:center;

     }

     </style>

 </head>

 <body>

     <form  onsubmit="return false" id="formAsync">

         <table border="1" rules="all" bordercolor="#000000" >

             <tr>

                 <th colspan="2" height="50">信息登记表</th>

             </tr>

             <tr class="grayBox" height="70">

                 <td width="50" >姓名</td>

                 <td><input type="text" name="username" size="16"/></td>

             </tr>

             <tr height="70">

                 <td>性别</td>

                 <td>

                     <input type="radio" name="sex" value="boy" checked="checked"/>男

                     <input type="radio" name="sex" value="girl"/>女

                 </td>

             </tr>

                 <td colspan="2" height="40">

                     <input type="submit" value="提交信息" onclick="requestAsync()"/>

                     <input type="reset" value="重置"/>

                 </td>

             </tr>

         </table>

     </form>

 </body>

 <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

 <script type="text/javascript">

     function requestAsync() {

         $.ajax({

             type: "POST",

             dataType: "json",

             url: "test.php",

             data: $('#formAsync').serialize(),

             success: function (data) {

                 console.log(data);

                 if(data.code ==200){

                     var username = data.msg +' 姓名:'+data.username

                       alert(username);

                 }else{

                       alert(data.msg);

                 }

             },

             error : function() {

                 alert("操作异常!");

             }

         });

     }

 </script>

 </html>

test.php 文件

 <?php

 $username = !empty($_POST['username']) ? trim($_POST['username']) :'';

 $sex = $_POST['sex'];

 //简单逻辑判断

 if($username){

     msg(200,'异步处理成功.',$username,$sex);

 }else{

     msg(400,'数据处理失败,请输入姓名!');

 }

 function msg($code,$msg,$username='',$sex=''){

     exit(json_encode([

         'code'=> $code,

         'msg' => $msg,

         'username' => $username,

         'sex' => $sex

         ]));

 }

结果打印:

html from表单异步处理的更多相关文章

  1. 使用jQuery.form插件，实现完美的表单异步提交

    传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...

  2. 使用jQuery，实现完美的表单异步提交

    jQuery异步提交表单 <form id="form1" method="post"> <table border="1" ...

  3. yii2 modal弹窗之ActiveForm ajax表单异步验证

    作者:白狼 出处:http://www.manks.top/yii2_modal_activeform_ajax.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位 ...

  4. .net mvc中的表单异步提交

    // // 摘要: // 将 <form> 开始标记写入响应. // // 参数: // ajaxHelper: // AJAX 帮助器. // // actionName: // 将处理 ...

  5. Ajax表单异步上传（包括文件域）

    起因 做前台页面时,需要调用WebAPI的Post请求,发送一些字段和文件(相当于把表单通过ajax异步发送出去,得到返回结果),然后得到返回值判断是否成功. 尝试 先是尝试了一下 "jQu ...

  6. jquery.form.js 使用以及问题（表单异步提交）

    标注:我引用的js后报错 原因:是引用的js有冲突 我引用了两便jQuery: 转载:https://blog.csdn.net/cplvfx/article/details/80455485 使用方 ...

  7. jQuery——表单异步提交

    如果不做任何处理,表单提交时会刷新页面,为了改善体验,可以使用jQuery做到异步提交表单:通过$("#form").serialize()将表单元素的数据转化为字符串,然后通过$ ...

  8. vue中的表单异步校验方法封装

    在vue项目的开发中,表单的验证必不可少,在开发的过程中,用的是vue+iview的一套,我们知道iview的表单验证是基于async-validator,对于async-validator不熟悉的可 ...

  9. jquery让form表单异步提交

    1.监听表单提交事件,并阻止表单提交 $("form").submit(function(e) { return false;//阻止表单提交 }) 2.拿到表单内容 let da ...

随机推荐

  1. vts测试流程

    测试前提: 1.发货user版本 2.selinux:Enable 3.连接ADB,stay awake 4.烧录XXX申请的key 5.外网环境(ipv6) ATV9测试准备(正常准备环境+fast ...

  2. centos 7下安装pycharm专业版

    1.下载pycharm的linux版本的软件包,下载地址: http://www.jetbrains.com/pycharm/download/#section=linux 2.解压 $ tar -x ...

  3. 如何给vue 日期控件赋值

    项目中需要用到日期时间插件,尝试用bootstrap.element的时间插件都各有各的报错,对于一个菜鸟来说真的是很痛苦啊.终于,最后用了layDate实现了需要的功能 最终效果: 使用步骤: 1. ...

  4. 防止XSRF 解决方案

    1.首先在表单提交页面生成校验使用的Token public ActionResult Index() { //Token验证需要使用的token string token = System.Guid ...

  5. docker搭建一个渗透测试环境 bwapp为例

    bwapp是一个渗透测试靶场,他其中中含有100多个Web漏洞  基本涵盖了所有主要的已知Web漏洞,包括OWASP Top 10的各种 首先要去搜索一下  看一下有哪些镜像可以下载    docke ...

  6. python基础-7.2文件内置属性__doc__ __file__ __package__ __cached__ __name__

    __doc__ #py文件开头的注释文字 __file__ #当前py文件的路径 __package__ #包含文件所在包,用 . 分隔,当前文件为None,导入的其他文件:指定文件所在包,用.分隔. ...

  7. docker添加加速器

    通过 Docker 官方镜像加速,中国区用户能够快速访问最流行的 Docker 镜像.该镜像托管于中国大陆,本地用户现在将会享受到更快的下载速度和更强的稳定性,从而能够更敏捷地开发和交付 Docker ...

  8. Dijkstra经典算法注意点

    Dijkstra经典算法注意点 前言 迪杰斯特拉算法,经典模板如下: void dij(int s) { for(int i=1; i<=n; i++) dis[i]=road[s][i]; v ...

  9. Angular.js 使用$http的response得到的phone属性为undefined

    这是个坑~ 先说解决方案:把response打印出来找你的属性 记录一下,经验不足,有些东西想当然了,所有错误出现都应该一步步去排查!!!切记想当然的自以为. 源码: js $scope.phone= ...

  10. 正则表达式RegExp对象

    3.1 正则表达式对象的创建方式 字面量的方式   var patt = /匹配规则/修饰符;     / --> 边界的意思 new关键字     var patt = new RegExp( ...