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

demo示例:

html 文件

  1.  <html>
  2.  <head>
  3.      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  4.      <title>信息登记表异步提交</title>
  5.      <style type="text/css">
  6.      .grayBox{
  7.           backGround-color:#e0e0e0;
  8.      }
  9.      table{
  10.          text-align:center;
  11.      }
  12.      </style>
  13.  </head>
  14.  
  15.  <body>
  16.      <form  onsubmit="return false" id="formAsync">
  17.          <table border="1" rules="all" bordercolor="#000000" >
  18.              <tr>
  19.                  <th colspan="2" height="50">信息登记表</th>
  20.              </tr>
  21.              <tr class="grayBox" height="70">
  22.                  <td width="50" >姓名</td>
  23.                  <td><input type="text" name="username" size="16"/></td>
  24.              </tr>
  25.              <tr height="70">
  26.                  <td>性别</td>
  27.                  <td>
  28.                      <input type="radio" name="sex" value="boy" checked="checked"/>男
  29.                      <input type="radio" name="sex" value="girl"/>女
  30.                  </td>
  31.              </tr>
  32.                  <td colspan="2" height="40">
  33.                      <input type="submit" value="提交信息" onclick="requestAsync()"/>
  34.                      <input type="reset" value="重置"/>
  35.                  </td>
  36.              </tr>
  37.          </table>
  38.      </form>
  39.  </body>
  40.  
  41.  <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  42.  <script type="text/javascript">
  43.      function requestAsync() {
  44.          $.ajax({
  45.              type: "POST",
  46.              dataType: "json",
  47.              url: "test.php",
  48.              data: $('#formAsync').serialize(),
  49.              success: function (data) {
  50.                  console.log(data);
  51.                  if(data.code ==200){
  52.                      var username = data.msg +' 姓名:'+data.username
  53.                        alert(username);
  54.                  }else{
  55.                        alert(data.msg);
  56.                  }
  57.              },
  58.              error : function() {
  59.                  alert("操作异常!");
  60.              }
  61.          });
  62.      }
  63.  </script>
  64.  </html>

test.php 文件

  1.  <?php
  2.  $username = !empty($_POST['username']) ? trim($_POST['username']) :'';
  3.  $sex = $_POST['sex'];
  4.  
  5.  //简单逻辑判断
  6.  if($username){
  7.      msg(200,'异步处理成功.',$username,$sex);
  8.  }else{
  9.      msg(400,'数据处理失败,请输入姓名!');
  10.  }
  11.  
  12.  function msg($code,$msg,$username='',$sex=''){
  13.      exit(json_encode([
  14.          'code'=> $code,
  15.          'msg' => $msg,
  16.          'username' => $username,
  17.          'sex' => $sex
  18.          ]));
  19.  }

结果打印:

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. 16/7/7_PHP-访问控制

    访问控制 前面的小节,我们已经接触过访问控制了,访问控制通过关键字public,protected和private来实现.被定义为公有的类成员可以在任何地方被访问.被定义为受保护的类成员则可以被其自身 ...

  2. css：设置div边框透明+渐变

    写作背景: 觅兼职--登陆页面,UI给的原型图很漂亮,其中有一个图要求div外面有一圈透明度为0.37且带有渐变的边框.效果图如下: 在写的时候遇到了一点小小的问题:无法给同一个div设置圆角的透明+ ...

  3. [19/05/08-星期三] JDBC(Java DataBase Connectivity)_ORM(Object Relationship Mapping， 对象关系映射)

    一.概念 基本思想: – 表结构跟类对应: 表中字段和类的属性对应:表中记录和对象对应: – 让javabean的属性名和类型尽量和数据库保持一致! – 一条记录对应一个对象.将这些查询到的对象放到容 ...

  4. 设计模式：单例模式(Singletion)

    单例模式(Singletion):保证一个类仅有一个实例,并提供一个访问该实例的全局访问点. 单例模式主要作用是保证唯一的实例,可以严格地控制客户端怎样访问该实例以及何时访问它.可以简单的理解为对唯一 ...

  5. HDU 6070题解(二分+线段树)

    题面 传送门 此题的题意不是很清晰,要注意的一点是在区间[L,R]中,默认题目编号最后一次出现的时候是AC的 比如1 2 1 2 3 ,在区间[1,4]中,第3次提交时AC第1题,第4次提交时AC第2 ...

  6. HDU 6631 line symmetric（枚举）

    首先能想到的是至少有一对相邻点或者中间间隔一个点的点对满足轴对称,那么接下来只需要枚举剩下的点对是否满足至多移动一个点可以满足要求. 第一种情况,对于所有点对都满足要求,那么Yes. 第二种情况,有一 ...

  7. Cocos Creator-TypeScript与JS快速过渡

    目前的H5游戏开发引擎,国内主流的是Cocos Creator.Laya Box.Egret, 这3种引擎又有各自的开发语言,JavaScript.TypeScript.AS3 . 不同的公司采用的引 ...

  8. SQL在Oracle内部的具体处理流程

         下图显示了SQL在Oracle内部处理的一般阶段:解析.优化.产生行源和执行.数据库可能会忽略某些步骤,这取决于具体的语句.                                 ...

  9. Elasticsearch学习，请先看这一篇！

    原文:Elasticsearch学习,请先看这一篇! 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn ...

  10. SQL Server 查找字符串中指定字符出现的次数

    要查找某个指定的字符在字符串中出现的位置,方法比较简单,使用 len() 函数和 replace() 函数结合就可以. SELECT TOP 200 approveInfo approveInfo2, ...