通过 Ajax 调取后台接口将返回的 json 数据绑定在页面上
第一步:
编写基础的 html 框架内容,并引入 jquery:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>测试Ajax</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script> </script>
</head>
<body> </body>
</html>
第二步:
在 “<body></body>” 中间插入要点击的按钮和用来显示数据的<p>标签,并编写对应的 function:
“ajax的使用往往配合事件操作进行调用”
<body>
<button id="btn">点击获取数据</button>
<p id="ganmao"></p>
</body>
function:
<script>
$(function(){
$("#btn").on("click", function(){
//调用 ajax
});
})
</script>
第三步:
使用 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);
});
合在一起的代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>测试Ajax</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(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);
});
});
})
</script>
</head>
<body>
<button id="btn">点击获取数据</button>
<p id="ganmao"></p>
</body>
</html>
运行效果:
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
PS:
过程中遇到了报错:“Failed to load http://localhost:53087/test/ajax: No 'Access-Control-Allow-Origin’ header is present on the requested resource” 无响应解决方法。百度找到好像是跨域问题,解决方法是 在config里面加上:
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>
<add name="Access-Control-Allow-Headers" value="x-requested-with"/>
<add name="Access-Control-Allow-Origin" value="*" />//表示允许所有来源进行跨域访问
</customHeaders>
</httpProtocol>
</system.webServer>
补充学习:
前端处理 json 数据通常有3步:
1、得到 json 数据
2、解析 json 数据 (可使用 js 中的 eval 函数解析 json 数据,但要为 json 数据加上括号)
3、在页面上显示数据
通过 Ajax 调取后台接口将返回的 json 数据绑定在页面上的更多相关文章
- 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 跨域请求 ---
以下测试------ <php $ch = curl_init(); $str = '';//此处为接口地址以及传参------- curl_setopt($ch, CURLOPT_URL, $ ...
随机推荐
- Django使用指南
一.安装Django 1.命令行安装 pip3 install django(默认安装最新稳定版本) pip3 install django==版本号(指定版本安装) 2.Pycharm安装 在Pyc ...
- oracle 生成随机日期+时间
oracle 生成随机日期+时间 SELECT to_date(TRUNC(DBMS_RANDOM.VALUE(to_number(to_char(to_date('20110101','yyyymm ...
- 数据库去空格 去table 去回车符号 去重
1 update bd_prod_cate c set c.cate_name = replace(c.cate_name,chr(9),'')//去掉tab符号的 2 update bd_prod_ ...
- Luogu5290 [十二省联考2019] 春节十二响 【贪心】【堆】
题目分析: 对于一个根,假设我们对每个子树分别求出了一种答案,那么怎么合并答案是最小的呢? 首先考虑这些答案里面最大的那个数字,它肯定要融合其它组里面的最大数字.以此类推 所以最好的合并方式是,每个子 ...
- vs2015工程转化为vs2010
转换的步骤如下: (1)将工程是.sln用记事本打开后,更换以下信息如下: Microsoft Visual Studio Solution File, Format Version 11.00 ...
- 正则表达式字符&使用
正则详细解说:https://juejin.im/post/5965943ff265da6c30653879 一.正则表达式中的字符含意 \ 做为转义,即通常在"\"后面的字符不按 ...
- c# 串行化事件
- ubuntu16搭建LAMP环境
准备工作: 安装ubuntu16虚拟机,可以正常访问网络 更新为国内源(下载快一些) 1.安装apache sudo apt-get install apache2 然后打开我们的浏览器,访问一下 1 ...
- python_ joinablequeue详解
2019-5-20未命名文件 新建模板小书匠 欢迎使用 小书匠(xiaoshujiang)编辑器,您可以通过 小书匠主按钮>模板 里的模板管理来改变新建文章的内容. joinablequeue实 ...
- shell 文本替换 ---出现--- sed:-e 表达式 #1,字符 8:“s”的未知选项
需要替换的行为: monitor.url=http://192.168.25.100:8443/rest 查询资料得知,报错是因为替换的字符串包含有分隔符/ 所以这行改一下分隔符就可以解决问题了 ( ...