Ajax提交表單并接收json實(shí)例代碼
需求:
實(shí)現(xiàn)點(diǎn)擊按鈕后,數(shù)據(jù)以表單形式提交至服務(wù)器,并接收來(lái)自服務(wù)器的返回?cái)?shù)據(jù)。過(guò)程中頁(yè)面不刷新。
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實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
jQuery AJAX中readyState與status的區(qū)別與聯(lián)系
這篇文章主要介紹了 jQuery AJAX中readyState與status的區(qū)別與聯(lián)系,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03使用加載圖片解決在Ajax數(shù)據(jù)加載中頁(yè)面出現(xiàn)短暫空白的問(wèn)題(推薦)
在項(xiàng)目中用ajax異步獲取數(shù)據(jù)后有時(shí)會(huì)因?yàn)閿?shù)據(jù)問(wèn)題或者網(wǎng)絡(luò)問(wèn)題,頁(yè)面一直顯示空白,現(xiàn)在用加載圖片來(lái)過(guò)渡這種狀態(tài),具體實(shí)例代碼通過(guò)本文一起學(xué)習(xí)吧2016-12-12Ajax修改數(shù)據(jù)即時(shí)顯示篇實(shí)現(xiàn)代碼
上一篇我們講了如何使用ajax向數(shù)據(jù)庫(kù)添加數(shù)據(jù),今天我們要大家學(xué)習(xí)的課程是:使用ajax修改數(shù)據(jù)庫(kù)數(shù)據(jù),并在客戶網(wǎng)頁(yè)立即顯示新的內(nèi)容.當(dāng)然在修改的過(guò)程中同樣不會(huì)有刷新網(wǎng)頁(yè)的情況發(fā)生!2010-10-10滑輪滾動(dòng)到頁(yè)面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討
滾動(dòng)下拉到頁(yè)面底部加載數(shù)據(jù)是很多瀑布流網(wǎng)站的做法,那來(lái)看看配合jsonp是如何實(shí)現(xiàn)的吧,小菜總結(jié)記錄之用特在此與大家一起分享,感興趣的朋友可以參考下哈2013-05-05ajax實(shí)現(xiàn)點(diǎn)擊不同的鏈接讓返回的內(nèi)容顯示在特定div里
過(guò)ajax實(shí)現(xiàn)在一個(gè)web頁(yè)面點(diǎn)擊不同的鏈接,然后將返回的結(jié)果顯示在該頁(yè)面固定的div里2014-06-06通過(guò)Ajax方式綁定select選項(xiàng)數(shù)據(jù)的實(shí)例
今天小編就為大家分享一篇通過(guò)Ajax方式綁定select選項(xiàng)數(shù)據(jù)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08