Question

刚开始学习HTML＆amp;的JavaScript。管理谷歌如何我可以去一个网址并从返回的JSONP获取一个值，但是，当我运行html页面时，该功能正在运行，我只想从按钮点击运行它。

我已经开始搜索如何执行此操作，但只是添加一个按钮标记并在正文中调用该函数不起作用。如果有人可以提供一些代码，我将不胜感激。

我也很欣赏我不应该使用document.write，但我想我可以在按钮工作后解决这个问题。 * *注意我已从网址中删除了一些数据，因为其中包含个人数据。

<!DOCTYPE HTML>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title> Tesco JSONP </title>


<script type="text/javascript">

        function callMe(data){
        document.write(data.SessionKey)

        }

</script>


<script src="https://secure.techfortesco.com/groceryapi_b1/restservice.aspx?command=LOGIN&JSONP=callMe&email=xxxxxx@yahoo.co.uk&password=yyyyyyy&developerkey=zzzzzzzz&applicationkey=123456789"></script>



</head>

<body>


</body>


</html>

任何帮助都将不胜感激。

祝福。

Answer 1

由于它是JSONP，一旦脚本加载就会调用回调函数，因此您可以在单击按钮时插入脚本标记，并调用回调等。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Tesco JSONP</title>
    </head>
    <body>
        <button id="btn">Click</button>

        <script type="text/javascript">
            function callMe(data) {
                document.write(data.SessionKey)
            }

            function clickHandler() {
                var script_elem = document.createElement('script'),
                    url = "https://secure.techfortesco.com/groceryapi_b1/restservice.aspx?command=LOGIN&JSONP=callMe&email=xxxxxx@yahoo.co.uk&password=yyyyyyy&developerkey=zzzzzzzz&applicationkey=123456789"
                script_elem.setAttribute('src', url);
                document.head.appendChild(script_elem);
            }

            document.getElementById('btn').addEventListener('click', clickHandler, false);
        </script>
    </body>
</html>

Answer 2

要从远程服务获取价值，您必须向服务网址发出请求。首先你可以使用jquery（我强烈推荐）。使用jquery有助于使用ajax访问远程服务。用jquery然后javascript调用Ajax很容易..然后你会看到ajax请求结果如下。

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title> Tesco JSONP </title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">

        function callMe(data){
        document.write(data.SessionKey)

        }

$(document).ready(function(){

$('#BtnShowMe').click(function(){

     $.ajax({
         url :'https://secure.techfortesco.com/groceryapi_b1/restservice.aspx?command=LOGIN&JSONP=callMe&email=xxxxxx@yahoo.co.uk&password=yyyyyyy&developerkey=zzzzzzzz&applicationkey=123456789',
        type :'GET',
        dataType :'json',
        success:function(data)
        {
           console.log(data); // chrome-firefox press F12 key, see console tab..
           alert(data.SessionKey);
           document.write(data.SessionKey);
        }
    });
});

});

</script>

单击按钮运行功能

2 个答案: