第一步：

编写基础的 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&lowbar;vim

今天稍微学习以下vim 学习的一些课件: 1. 2. 3. 4. 5.