• 技术文章 >web前端 >js教程

    怎样用Ajax提交表单并接收其中的json数据

    php中世界最好的语言php中世界最好的语言2018-03-31 13:43:49原创1567
    这次给大家带来怎样用Ajax提交表单并接收其中的json数据,用Ajax提交表单并接收其中json数据的注意事项有哪些,下面就是实战案例,一起来看一下。

    需求:

    实现点击按钮后,数据以表单形式提交至服务器,并接收来自服务器的返回数据。过程中页面不刷新。

    html代码

    <html xmlns="http://www.w3.org/1999/xhtml">
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
     <script src="./testajaxjs.js"></script>
     <head>
     </head>
     <body>
      <form id="form1">
       <p>xingming:<input type="text" name="xingming"/></p>
       <p>nianling:<input type="text" name="nianling"/></p>
      </form>
      <button type="button" id="mybt" onclick="mysubmmit()">
       ajax提交
      </button>
     </body>
    </html>

    js代码

    function mysubmmit(){
     $.ajax({
      type: "POST",
      url: "testajaxend.php",
      data: $('#form1').serialize(),
      async: false,
      success: function(databack){
       //console.log("chenggong");
       console.log(databack);
      },
      error: function(request){
       console.log("shibaile");
      }
     });
    }

    后端php代码

    <?php
      $name = $_POST['xingming'];
      $age = $_POST['nianling'];
      $myarray = array("name"=>$name, "age"=>$age);
      $myjson = json_encode($myarray);
      echo $myjson;
    ?>

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    原生ajax与封装的ajax使用方法(附代码)

    Ajax方法实现Form表单提交的方法

    以上就是怎样用Ajax提交表单并接收其中的json数据的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript Ajax 接收
    上一篇:实现列表无限加载与二级下拉菜单选项的Ajax(附代码) 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 一文详解Node中的模块化、文件系统与环境变量• 为什么要用debugger来调试代码?这样你能读懂各种源码!• 一文聊聊Node包管理发展的五个阶段• 一文探究Angular中的服务端渲染(SSR)• 带你了解Angular组件间进行通信的几种方法
    1/1

    PHP中文网