• jsonp在jsp中的使用


    本地程序代码  

     1 <div id="jsonpData"></div>
     2 <script type="text/javascript">
     3     var callbackFunction = function(result){
     4         var html='<ul>';
     5         for(var i=0;i<result.length;i++){
     6             html+='<li>'+result[i].name+"</li>";
     7         }
     8         html+='</ul>';
     9         document.getElementById("jsonpData").innerHTML=html;
    10     }
    11 </script>
    12 <script type="text/javascript"src="http://localhost:8080/JsonpCallBackProjectindex.jsp?callback=callbackFunction"></script>//调用另一个程序的某个页面。如指定返回时调用的函数名

    远程程序代码

    1 <%@ page language="java" contentType="text/html; charset=UTF-8"
    2     pageEncoding="UTF-8"%>
    3 <%
    4     response.setContentType("text/html,charset=utf-8");
    5     String callback=request.getParameter("callback");  //获取到数据返回时调用的函数名
    6     response.getWriter().print(callback+"([ { name:"跨域访问成功!"},{ name:"跨域访问失败!"}])"); //直接用print的方式输出javascript调用函数并传值。这样在调用方的javascript代码中就相当于调用了此函数。
    7 %>

    请求数据方,也可以使用jquery来请求数据

     1 <script>
     2     $.getJSON("http://www.w3cschool.cc/try/ajax/jsonp.php?jsoncallback=?", function(data) {
     3     
     4       var html = '<ul>';
     5       for(var i = 0; i < data.length; i++)
     6       {
     7           html += '<li>' + data[i] + '</li>';
     8       }
     9       html += '</ul>';
    10     
    11       $('#divCustomers').html(html); 
    12   });
    13 </script>

      

  • 相关阅读:
    二分查找代码
    顺序查找代码
    js原生获取css属性
    前端使用nginx上传文件时,进度获取不对
    动态赋值poster,无法显示
    git 命令收藏
    promise笔记
    vscode自定义代码块
    vuex的初始化
    webstorm添加自定义代码块
  • 原文地址:https://www.cnblogs.com/qneverever/p/4568232.html
Copyright © 2020-2023  润新知