JSONP请求后台示例

简介: JSONP请求后台示例

JSONP请求后台示例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>jQuery实现JSONP</title>
</head>
<body>
    <div id="mydiv">
        <button id="btn">点击</button>
    </div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){
            $.ajax({
             //   async : true,
                url : "",
                type : "GET",
                dataType : "jsonp", // 返回的数据类型,设置为JSONP方式
                jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
                success: function(data,status,xhr){
          alert(data["data"]["electricQuantity"]);
                }
            });
        });
    });
</script>
</html>


注:需要后台封装下返回的数据格式

目录
相关文章
|
前端开发 安全
ajax请求的时候get 和post方式的区别
ajax请求的时候get 和post方式的区别
|
2月前
|
JSON JavaScript 中间件
POST 请求如何处理表单数据?
【10月更文挑战第24天】POST请求处理表单数据需要客户端和服务器端的协同工作,客户端负责将表单数据正确地编码并发送给服务器,服务器端则需要准确地接收、验证和处理数据,并向客户端返回合适的响应。
96 1
|
3月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
44 18
|
8月前
|
JSON 中间件 数据格式
在自定义服务器框架中处理 POST 请求
在自定义服务器框架中处理 POST 请求
|
8月前
|
前端开发 JavaScript
|
前端开发
Ajax提交请求后台返回一个完整的html页面
Ajax提交请求后台返回一个完整的html页面
105 0
|
Web App开发 网络协议 安全
GET和POST方式请求API接口数据返回
GET和POST方式请求API接口数据返回
194 0
|
XML JSON 安全
get请求和post请求的区别以及常用请求方式
get请求和post请求的区别以及常用请求方式
|
JSON 缓存 前端开发
【Ajax入门技术】如何设置请求头 体 ,利用ajax进行取消请求数据操作,解决重复请求问题,请求超时网络异常以及获取json数据
【Ajax入门技术】如何设置请求头 体 ,利用ajax进行取消请求数据操作,解决重复请求问题,请求超时网络异常以及获取json数据
296 0
【Ajax入门技术】如何设置请求头 体 ,利用ajax进行取消请求数据操作,解决重复请求问题,请求超时网络异常以及获取json数据
|
JSON 前端开发 JavaScript
Ajax请求服务端的五种方式
Ajax请求服务端的五种方式