通过 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, $ ...
随机推荐
- Gitlab服务不能启动postgresql
源博文:http://www.zxmseed.com/blog/911081 1.查看启动的服务 -sh-4.1$ gitlab-ctl status warning: gitlab-workhors ...
- webpack 3.1 升级webpack 4.0
webpack 3.1 升级webpack 4.0 为了提升打包速度以及跟上主流技术步伐,前段时间把项目的webpack 升级到4.0版本以上 webpack 官网:https://webpack.j ...
- Lambda 表达式动态拼接.
背景: 项目使用EF 查询时需要手动判断条件写.觉得太麻烦就Google 如何动态生成Linq.最后找到了 System.Linq.Dynamic.Core. 这个东西. Scott Guthrie ...
- Extjs 兼容IE8常见问题及解决方法
1. 在IE8中整个页面都打不开,一般情况是: 页面组件中最后一个属性出现了逗号 没有多余的逗号,就很有可能是组件中没有设置renderTo:Ext.getBody(); 2. 页面按钮颜色失效 自定 ...
- H5表单新特性
1.HTML5表单新特性之——新的input type <input type=" "> HTML5之前已有的input type: text.password.rad ...
- 【前端适配】vw单位移动端适配方案
近些年移动端的强势崛起,导致移动端适配越来越重要,个人之前一直使用的是rem进行适配,但是发现并不是非常完美,给力的是大漠老师写了一篇<如何在Vue项目中使用vw实现移动端适配>,比较完美 ...
- 【Zookeeper】本地ZK的搭建
很久没有写了..最近看书的笔记都记在有道云上面..框架的使用觉得还是有必要写一下 1.下载 官网:https://www.apache.org/dyn/closer.cgi 清华镜像:https:// ...
- WMware Workstation——网络类型:NAT、bridge、host-only
bridge NAT host-only 总结: NAT和host-only都需要虚拟网卡(WMware Adapter Card)实现物理机和虚拟机互访. NAT和bridge都可以访问外网 NAT ...
- Windows Server 2008 用户管理
默认用户和组 默认用户 默认只有来宾用户(Guest)和管理员(Administrator) 默认组 创建账户 图形界面创建用户 创建用户选项解析 对于公司新员工,分配给他的电脑,应该让其有一定的自主 ...
- Python基础——细琐知识点
注释 Python注释有两种方式 使用# 类似于Shell脚本的注释方式,单行注释 使用'''或者""" 使用成对的'''或者""".这种注 ...