ajax调取json接口,通过 Ajax 调取后台接口将返回的 json 数据绑定在页面上
第一步：
編寫基礎的 html 框架內容，并引入 jquery：
測試Ajax第二步：
在 “
” 中間插入要點擊的按鈕和用來顯示數據的標簽，并編寫對應的?function：
“ajax的使用往往配合事件操作進行調用”
點擊獲取數據
function：
$(function(){
$("#btn").on("click", function(){
//調用 ajax
});
})
第三步：
使用 ajax 調用后臺接口并處理數據：
$.ajax({
url: 'http://localhost:53087/test/ajax', //后端程序的url地址
type: 'get',
dataType: 'json',
data:{ //發送給服務器的數據，如果是get請求，也可以寫在url地址的?后面
"city":'鄭州',
}
})
.done(function(resp){ //請求成功以后的操作(resp是后端返回的json數據，值為：{"city":"鄭州"})
console.log(resp);
var data = eval('(' + resp + ')'); //data為json數據轉換成的對象，值為：{city: "鄭州"}
console.log(data);
var city = data['city'];
console.log(city);
$('#ganmao').html(city)
})
.fail(function(error){ //請求失敗以后的操作
console.log(error);
});
合在一起的代碼：
測試Ajax$(function(){
$("#btn").on("click", function(){
$.ajax({
//后端程序的url地址
url: 'http://localhost:53087/test/ajax',
type: 'get',
dataType: 'json',
data:{ //發送給服務器的數據，如果是get請求，也可以寫在url地址的?后面
"city":'鄭州',
}
})
.done(function(resp){ //請求成功以后的操作
console.log(resp);
var data = eval('(' + resp + ')');
console.log(data);
var city = data['city'];
console.log(city);
$('#ganmao').html(city)
})
.fail(function(error){ //請求失敗以后的操作
console.log(error);
});
});
})
點擊獲取數據
運行效果：
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
PS：
過程中遇到了報錯：“Failed to load http://localhost:53087/test/ajax: No 'Access-Control-Allow-Origin’ header is present on the requested resource”?無響應解決方法。百度找到好像是跨域問題，解決方法是 在config里面加上：
//表示允許所有來源進行跨域訪問
補充學習：
前端處理 json 數據通常有3步：
1、得到 json 數據
2、解析 json 數據 (可使用 js 中的 eval 函數解析 json 數據，但要為 json 數據加上括號)
3、在頁面上顯示數據
thinkjs學習-this.assign傳遞數據和ajax調用后臺接口
在頁面加載時,就需要顯示在頁面上的數據,可以在后臺使用this.assign賦值,在前臺通過ejs等模板獲取:用戶點擊按鈕,或者觸發某些事件和后臺進行交互時,就需要用到ajax調用后臺接口.本文通過一 ...
前后端通信中使用Ajax與后臺接口api交互(以登錄功能為例)
一.查閱開發文檔 首先,要做這個功能前,我們必須先查閱后臺接口文檔,了解使用登錄接口時,需要提交哪些參數,并且接口使用返回的數據.?這里我使用了一個返回json格式數據的登錄接口為例,講解怎么使用Aj ...
用ajax獲取后臺數據，返回json數據，怎么在前臺使用？
用ajax獲取后臺數據,返回json數據,怎么在前臺使用呢?后臺 C# code ? ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if?(dataType?==?&qu ...
調試接口，返回的json數據，我定義了一個類，用來序列化，其中有一個字段定義為string 然后序列化的時候報錯
調試接口,返回的json數據,我定義了一個類,用來序列化,其中有一個字段定義為string 然后序列化的時候報錯 在需要解析的類型類上加上聲明 eg:
ajax 如何接受 PHP頁面返回的json數組
JSON JSON(JavaScript Object Notation)是Douglas Crockford提出的.他是一個輕量級的數據交換格式,基于JavaScript對象字面量. 我們可以將之前 ...
phpStudy4——前端頁面使用Ajax請求并解析php返回的json數據
項目需求: 在html頁面顯示所有用戶列表信息. 需求分析: 1. html頁面使用ajax向后端php請求用戶數據 2. php腳本查詢數據庫,并將查詢后的結果以json格式返回前端html頁面 3 ...
【11】ajax請求后臺接口數據與返回值處理js寫法
$.ajax({ url:?"/test.php",//后臺提供的接口 type:?"post",???//請求方式是post data:{"type ...
ajax 調用后臺接口示例
$(function(){ var _del_time_list = $("select[name='del_time_list']"); var _del_table_name ...
PHP拿到接口數據返回的json以及傳參-----ajax 跨域請求 ---
以下測試------
隨機推薦
Android之什么是Activity和常用的ADB命令以及Android項目結構的認識
總結一下之前學習Android的一些內容 一: ?Android常用的ADB命令(adb android調試橋) ? ? ?1.adb devices? ?查看模擬器設備并重新連接. 2.adb ki ...
Arch Linux LibreOffice 中文輸入法不能切換
From: http://blog.csdn.net/shallowgrave/article/details/8501629 卸載libreoffice-kde4 # pacman -R libre ...
10月21日下午PHP常用函數
函數四要素:返回類型 ?函數名 ?參數列表 ?函數體 //最簡單的函數定義方式 function Show() { echo "hello"; } Show();//輸出結果為he ...
HDU 1023 Traning Problem (2) 高精度卡特蘭數
Train Problem II Time Limit:?1000MS ? Memory Limit:?32768KB ? 64bit IO Format:?%I64d & %I64u Sub ...
bootstrap-datetimepicker時間控件
歡迎各種吐槽. 本人小前端,學習過程中,某日遇到做時間控件的需求,于是無休止的召喚了度娘,發現看不太懂.算是為自己做個筆記,也便于菜鳥級別的看的懂. 首先,我們看看點擊選擇時間的時候的展示頁面吧 年? ...
計算機技能get(windows系統)
1.快速打開程序,比如計算器,注冊表,先按win鍵(不用再按win+r啦),輸入程序名字,如calc,regedit等,直接打開. 2.自動左右分屏,win+上下左右方向鍵,win+↑ 最大化,win ...
HDOJ 2167 Pebbles (狀態壓縮dp)
題意:給你一個n*n的矩陣,讓你從矩陣中選擇一些數是的他們的和最大,規則是:相鄰的兩個數不能同時取,位置為(i,j)的數與(i+1,j),(i-1,j),(i,j+1),(i,j-1),(i+1,j+ ...
Python數據基礎--列表、元組、字典、函數
一.數據結構 列表(List)和元組 序列是Python中最基本的數據結構.序列中的每個元素都分配一個數字 - 它的位置,或索引,第一個索引是0,第二個索引是1,依此類推. Python有6個序列的內 ...
Codeforces Round #441 D. Sorting the Coins(模擬)
http://codeforces.com/contest/876/problem/D 題意:題意真是難懂,就是給一串序列,第i次操作會在p[x](1<=x<=i)這些位置放上硬幣,然后從 ...
linux_vim
今天稍微學習以下vim 學習的一些課件: 1. 2. 3. 4. 5.
總結
以上是生活随笔為你收集整理的ajax调取json接口,通过 Ajax 调取后台接口将返回的 json 数据绑定在页面上的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 怎么查输卵管通不通
- 下一篇： c# tcp显示服务器图片,C# TCP