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