第一步:

  编写基础的 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 数据绑定在页面上的更多相关文章

  1. thinkjs学习-this.assign传递数据和ajax调用后台接口

    在页面加载时,就需要显示在页面上的数据,可以在后台使用this.assign赋值,在前台通过ejs等模板获取:用户点击按钮,或者触发某些事件和后台进行交互时,就需要用到ajax调用后台接口.本文通过一 ...

  2. 前后端通信中使用Ajax与后台接口api交互(以登录功能为例)

    一.查阅开发文档 首先,要做这个功能前,我们必须先查阅后台接口文档,了解使用登录接口时,需要提交哪些参数,并且接口使用返回的数据. 这里我使用了一个返回json格式数据的登录接口为例,讲解怎么使用Aj ...

  3. 用ajax获取后台数据,返回json数据,怎么在前台使用?

    用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...

  4. 调试接口,返回的json数据,我定义了一个类,用来序列化,其中有一个字段定义为string 然后序列化的时候报错

    调试接口,返回的json数据,我定义了一个类,用来序列化,其中有一个字段定义为string 然后序列化的时候报错 在需要解析的类型类上加上声明 eg:

  5. ajax 如何接受 PHP页面返回的json数组

    JSON JSON(JavaScript Object Notation)是Douglas Crockford提出的.他是一个轻量级的数据交换格式,基于JavaScript对象字面量. 我们可以将之前 ...

  6. phpStudy4——前端页面使用Ajax请求并解析php返回的json数据

    项目需求: 在html页面显示所有用户列表信息. 需求分析: 1. html页面使用ajax向后端php请求用户数据 2. php脚本查询数据库,并将查询后的结果以json格式返回前端html页面 3 ...

  7. 【11】ajax请求后台接口数据与返回值处理js写法

    $.ajax({ url: "/test.php",//后台提供的接口 type: "post",   //请求方式是post data:{"type ...

  8. ajax 调用后台接口示例

    $(function(){ var _del_time_list = $("select[name='del_time_list']"); var _del_table_name ...

  9. PHP拿到接口数据返回的json以及传参-----ajax 跨域请求 ---

    以下测试------ <php $ch = curl_init(); $str = '';//此处为接口地址以及传参------- curl_setopt($ch, CURLOPT_URL, $ ...

随机推荐

  1. Django使用指南

    一.安装Django 1.命令行安装 pip3 install django(默认安装最新稳定版本) pip3 install django==版本号(指定版本安装) 2.Pycharm安装 在Pyc ...

  2. oracle 生成随机日期+时间

    oracle 生成随机日期+时间 SELECT to_date(TRUNC(DBMS_RANDOM.VALUE(to_number(to_char(to_date('20110101','yyyymm ...

  3. 数据库去空格 去table 去回车符号 去重

    1 update bd_prod_cate c set c.cate_name = replace(c.cate_name,chr(9),'')//去掉tab符号的 2 update bd_prod_ ...

  4. Luogu5290 [十二省联考2019] 春节十二响 【贪心】【堆】

    题目分析: 对于一个根,假设我们对每个子树分别求出了一种答案,那么怎么合并答案是最小的呢? 首先考虑这些答案里面最大的那个数字,它肯定要融合其它组里面的最大数字.以此类推 所以最好的合并方式是,每个子 ...

  5. vs2015工程转化为vs2010

    转换的步骤如下: (1)将工程是.sln用记事本打开后,更换以下信息如下:   Microsoft Visual Studio Solution File, Format Version 11.00 ...

  6. 正则表达式字符&使用

    正则详细解说:https://juejin.im/post/5965943ff265da6c30653879 一.正则表达式中的字符含意 \ 做为转义,即通常在"\"后面的字符不按 ...

  7. c# 串行化事件

  8. ubuntu16搭建LAMP环境

    准备工作: 安装ubuntu16虚拟机,可以正常访问网络 更新为国内源(下载快一些) 1.安装apache sudo apt-get install apache2 然后打开我们的浏览器,访问一下 1 ...

  9. python_ joinablequeue详解

    2019-5-20未命名文件 新建模板小书匠 欢迎使用 小书匠(xiaoshujiang)编辑器,您可以通过 小书匠主按钮>模板 里的模板管理来改变新建文章的内容. joinablequeue实 ...

  10. shell 文本替换 ---出现--- sed:-e 表达式 #1,字符 8:“s”的未知选项

    需要替换的行为: monitor.url=http://192.168.25.100:8443/rest 查询资料得知,报错是因为替换的字符串包含有分隔符/ 所以这行改一下分隔符就可以解决问题了  ( ...