菜鸟IT的博客 >> 网站前端制作
使用ajax js脚本调用api的json数据渲染html页面 | 另外还有跨域的案例 | ajax js 调用api的json数据,解决ajax跨域请求的问题
案例1,直接学习人家的现成的模板(循环读取列表里的数据)
https://17wx.net/ajax_test/model_1/test.html
案例2,直接学习人家的模板(字典里就1个【键】,这个【键】的【值】是1个列表),顺便捕获异常
https://17wx.net/ajax_test/model_2/test.html
案例3,直接学习人家的模板,纯字典,里面只有【键值对】,没有列表,。
https://17wx.net/ajax_test/model_3/test.html
案例4,自己摸索渲染物流信息数据,既有【基础的键值对】,也有【列表】
https://17wx.net/ajax_test/model_4/test.html
# ————↑ 以上调用的Json数据都是静态Json文件模拟的api接口 ↑ ———— #
案例5,ajax直接请求api接口数据,渲染html页面,既有【基础的键值对】,也有【列表】,但是★依然不能跨越
https://17wx.net/ajax_test/model_5/test.html
# ————————↑ 以上都不支持跨越 ↑ ——————————#
解决跨越的办法,是需要源头的服务器端中间件,允许跨越才可以。
比如python flask写的中间件
from flask import Flask, jsonify, render_template
import json
import C47_Class_PT4_Tracking_by_EmmisTrack
from flask import make_response
@app.route('/test_post/nn/<x1>', methods=['GET', 'POST']) # 路由
def test_post(x1):
Test1=某某支持输出返回字典的函数。
response = jsonify(Test1) # 将python的字典转换为json字符串
response=make_response(response)
response.headers['Access-Control-Allow-Origin'] = '*'
return response, 200
我已经写好了1个用于测试的中间件
★彻底解决ajax跨域请求问题。
https://17wx.net/ajax_test/model_6/test.html
菜鸟IT博客[2023.04.13-15:20] 访问:716
※※相关信息专题※※
§Scrit_JS