首页 > 编程语言 >【JavaScript40】jquery发送jsonp

【JavaScript40】jquery发送jsonp

时间:2023-08-12 22:25:12浏览次数:52  
标签:jquery __ get app uname jsonp JavaScript40

jquery中也提供了jsonp请求

  • 服务器端
from flask import Flask, render_template, request, make_response

app = Flask(__name__)
@app.route("/")
def func0():
    news = "这是一个完整的html页面"
    return render_template("index.html",
                           xwl_de_news=news,)

# jsonp的逻辑
@app.route("/new_ajax",methods=["GET", "POST"])
def funccccc():
    cb = request.args.get("zhoujielun")
    uname = request.args.get('uname')
    age = request.args.get('age')

    print(uname, age)
    resp = make_response(f"{cb}('哈哈');")  # 返回的是js代码
    return resp

if __name__ == '__main__':
    app.run()
  • 客户端
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 注意, 浏览器访问静态资源, 没有跨域问题. -->
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    我是一个完整的html

    <button id="bbb">我是按钮</button>
    <script>
        $("#bbb").click(function(){
            let url = "http://127.0.0.1:5000/new_ajax?uname=xwl&age=18";
            $.ajax({
                url: url,
                method: "get",
                dataType:"jsonp",
                jsonp: "zhoujielun", // callback
                success: function(data){
                    // jquery的ajax返回值. 直接找success
                    console.log("接受到的数据是", data);
                }
            });
        });

    </script>
</body>
</html>

标签:jquery,__,get,app,uname,jsonp,JavaScript40
From: https://www.cnblogs.com/xwltest/p/17625637.html

相关文章

  • jquery 特效专辑
     提示框弹窗类FaceboxFacebox是一个基于jQuery,Facebook-style的lightbox。能够展示示images,divs或者整个远程页面。FaceboxSimpleModalSimpleModal是一个轻量级jQuery插件提供了一个简单的接口来创建模式对话框。SimpleModaljTipjTip一个利用jQuery开发的提示......
  • QueryPath, php上的jQuery
      红得发紫的jQuery框架是专门用于页面Javascript程序设计的,它通过一种优雅的方式让我们轻松自如地操作页面的所有元素而无须担心浏览器版本以及兼容性等问题。受到jQuery的启发,一种试图让Web开发者在PHP中直接采用jQuery方式操纵和生成HTML/XML元素的QueryPath计划开始了,库的......
  • jQuery 操作select
    jQuery取得select选中的值   本来以为jQuery("#select1").val();是取得选中的值,       那么jQuery("#select1").text();就是取得的文本。       这是不正确的,正确做法是:       jQuery("#select1 option:selected").text();jQuery取得select选择......
  • jQuery隐式迭代
      ......
  • DOM对象和jquery对象互换
      ......
  • DOM对象和jquery对象
      ......
  • jquery基本使用
          ......
  • 跟我一起学写jQuery插件开发方法(附完整实例及下载)
    跟我一起学写jQuery插件开发方法(附完整实例及下载) 更新时间:2010年04月01日23:37:51 作者:  jQuery如此流行,各式各样的jQuery插件也是满天飞。你有没有想过把自己的一些常用的JS功能也写成jQuery插件呢?如果你的答案是肯定的,那么来吧!和我一起学写jQuery插件吧! 很多公司......
  • 教你开发jQuery插件(转)
    教你开发jQuery插件(转)  阅读目录基本方法支持链式调用让插件接收参数面向对象的插件开发关于命名空间关于变量定义及命名压缩的好处工具GitHubServiceHook原文:http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html要说jQuery最成功的地方,我认为是......
  • JQuery概述
      ......