广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >Ajax如何提交表单并接收json
  • 530
分享到

Ajax如何提交表单并接收json

2024-04-02 19:04:59 530人浏览 泡泡鱼
摘要

这篇文章主要为大家展示了“ajax如何提交表单并接收JSON”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Ajax如何提交表单并接收json”这篇文章吧。需求:

这篇文章主要为大家展示了“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;
?>

以上是“Ajax如何提交表单并接收json”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网node.js频道!

--结束END--

本文标题: Ajax如何提交表单并接收json

本文链接: https://www.lsjlt.com/news/74070.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Ajax如何提交表单并接收json
    这篇文章主要为大家展示了“Ajax如何提交表单并接收json”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Ajax如何提交表单并接收json”这篇文章吧。需求:...
    99+
    2022-10-19
  • html如何接收表单提交的内容
    在HTML中,可以使用`<form>`元素来接收表单提交的内容。要接收表单数据,需要设置`<form>`元素...
    99+
    2023-08-08
    html
  • php表单提交不能接收如何解决
    这篇文章主要讲解了“php表单提交不能接收如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“php表单提交不能接收如何解决”吧!php表单提交不能接收的解决办法:1、打开php.ini配...
    99+
    2023-07-04
  • ajax如何跨页面提交表单
    这篇文章将为大家详细讲解有关ajax如何跨页面提交表单,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。前面提到过重复提交表单问题,处理token口令校验、重定向之外,还有一...
    99+
    2022-10-19
  • easyui如何验证ajax提交表单
    这篇文章主要介绍“easyui如何验证ajax提交表单”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“easyui如何验证ajax提交表单”文章能帮助大家解决问题。 ...
    99+
    2022-10-19
  • Javascript如何封装from表单数据为json串进行ajax提交
    这篇文章主要介绍了Javascript如何封装from表单数据为json串进行ajax提交,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。摘要...
    99+
    2022-10-19
  • php表单提交不能接收怎么办
    本教程操作环境:Windows7系统、PHP8.1版、Dell G3电脑。php表单提交不能接收怎么办?PHP form表单提交 _POST接收不到PHP新手学习中,记录在学习过程中的问题及解决办法遇到的问题今天在做一个相册管理的小demo...
    99+
    2022-11-25
    php
  • 如何使用ajax异步提交表单
    这篇文章主要介绍如何使用ajax异步提交表单,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!方式一手工收集所有的用户输入,封装为大的“k1=v1&k2=v2…”键值对形式,使用...
    99+
    2022-10-19
  • ajax如何提交数据到后台php接收
    这篇文章主要介绍了ajax如何提交数据到后台php接收,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在网上看了很久,发现数据的利用ajax提...
    99+
    2022-10-19
  • 如何接收ajax传的json数据
    要接收通过AJAX传递的JSON数据,需要使用服务器端的编程语言来处理和解析数据。下面是一个示例,使用PHP来接收AJAX传递的JS...
    99+
    2023-09-13
    ajax json
  • jQuery中Validator如何验证Ajax提交表单和Ajax传参
    这篇文章将为大家详细讲解有关jQuery中Validator如何验证Ajax提交表单和Ajax传参,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。serialize() 方...
    99+
    2022-10-19
  • 如何编写提交表单最简单的AJAX程序
    本篇内容介绍了“如何编写提交表单最简单的AJAX程序”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!复制代码...
    99+
    2022-10-19
  • ajax(或者jquery)如何提交整个form表单
    使用Ajax或者jQuery提交整个form表单可以通过以下几个步骤完成:1. 使用jQuery选择器选中form表单元素,并使用`...
    99+
    2023-08-08
    ajax
  • form表单数据如何封装成json格式并提交给服务器
    小编给大家分享一下form表单数据如何封装成json格式并提交给服务器,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1、jsp代...
    99+
    2022-10-19
  • 如何利用ajax提交form表单到数据库
    这篇文章主要介绍如何利用ajax提交form表单到数据库,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!大家应该都知道,在静态页面提交表单到数据库很简单就是单纯的<form&nb...
    99+
    2022-10-19
  • thinkphp提交表单收不到数据如何解决
    本篇内容主要讲解“thinkphp提交表单收不到数据如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“thinkphp提交表单收不到数据如何解决”吧!原因最常见的情况就是在表单提交时,没有对...
    99+
    2023-07-06
  • 如何使用Ajax方法实现Form表单的提交
    这篇文章主要介绍了如何使用Ajax方法实现Form表单的提交,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。常见的form表单提交方式<...
    99+
    2022-10-19
  • Ajax如何实现提交Form表单及文件上传
    这篇文章主要为大家展示了“Ajax如何实现提交Form表单及文件上传”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Ajax如何实现提交Form表单及文件上传”这...
    99+
    2022-10-19
  • ajax post方式表单提交setRequestHeader报错如何解决
    本篇内容介绍了“ajax post方式表单提交setRequestHeader报错如何解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希...
    99+
    2022-10-19
  • 纯javascript中ajax如何实现php异步提交表单
    这篇文章将为大家详细讲解有关纯javascript中ajax如何实现php异步提交表单,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。很多时候需要异步提交表单,当表单太多是时候,一个个getElementB...
    99+
    2023-06-08
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作