Rumah > hujung hadapan web > tutorial js > Ajax提交表单并接收json方法

Ajax提交表单并接收json方法

小云云
Lepaskan: 2017-12-19 14:09:03
asal
1900 orang telah melayarinya

实现点击按钮后,数据以表单形式提交至服务器,并接收来自服务器的返回数据。过程中页面不刷新。本文主要介绍了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>
Salin selepas log masuk

js代码


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

后端php代码


<?php
  $name = $_POST[&#39;xingming&#39;];
  $age = $_POST[&#39;nianling&#39;];
  $myarray = array("name"=>$name, "age"=>$age);
  $myjson = json_encode($myarray);
  echo $myjson;
?>
Salin selepas log masuk

相关推荐:

jquery实现ajax提交表单的两种方法

Ajax 技术一 ajax提交表单 jquery ajax教程 js ajax

php HTML无刷新提交表单 form表单提交 ajax提交表单 js提交表

Atas ialah kandungan terperinci Ajax提交表单并接收json方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan