Question

我的脚本是从文本框中输入的URL获取JSON文件

我将文本框ID为txtr并使用jquery获取值var txtbval = $("#txtr").val();，这在json解析脚本url: txtbval,

中

但是当我点击按钮时没有发生任何事情，我不知道我做错了什么，我不确定这个方法可以在JSON解析中使用

的index.php

<!doctype html>
<html>
<head>

    <title>How to Parse a JSON file using jQuery</title>

    <style>
        body{
            text-align: center;
            font-family: arial;
        }

        .button{
            margin:20px;
            font-size:16px;
            font-weight: bold;
            padding:5px 10px;
        }
    </style>


</head>
<body>
    <textarea id=txtr" rows="4" cols="50">
    </textarea>
    <input type="button" value="Get and parse JSON" class="button" />
    <br />
    <span id="results"></span>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>

        //When DOM loaded we attach click event to button
        $(document).ready(function() {
            var txtbval = $("#txtr").val();
            //after button is clicked we download the data
            $('.button').click(function(){

                //start ajax request
                $.ajax({
                    url: txtbval,
                    //force to handle it as text
                    dataType: "text",
                    success: function(data) {

                        //data downloaded so we call parseJSON function 
                        //and pass downloaded data
                        var json = $.parseJSON(data);
                        //now json variable contains data in json format
                        //let's display a few items
                        $('#results').html(json.post.title);
                    }
                });
            });
        });
    </script>

</body>
</html>

Answer 1

问题在于你的html在textarea的id中缺少"：更改

<textarea id=txtr" rows="4" cols="50">
    </textarea>

到

<textarea id="txtr" rows="4" cols="50">
    </textarea>

它应该可以正常工作。

＆＃13;

$(document).ready(function() {
          
            //after button is clicked we download the data
            $('.button').click(function(){
            	  var txtbval = $("#txtr").val();
            	  console.log("url:"+$("#txtr").val());
                //start ajax request
                $.ajax({
                    url: txtbval,
                    //force to handle it as text
                    dataType: "text",
                    success: function(data) {
                        var json = $.parseJSON(data);
                        $('#results').html(json.post.title);
                    }
                });
            });
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="txtr" rows="4" cols="50">
    </textarea>
    <input type="button" value="Get and parse JSON" class="button" />
    <br />
    <span id="results"></span>

＆＃13;

Answer 2

你遗失的东西很少：

1）首先，您在 id =“txtr”

中缺少（“）

2）点击按钮后，您需要获取 textarea 的值。

由于我不知道您使用的API，我使用了此API：

http://jsonplaceholder.typicode.com/posts/1/comments

并从第一个JSON对象获取名称的值。

这是一个有效的解决方案。希望它有所帮助！

//When DOM loaded we attach click event to button
    $(document).ready(function() {
        //after button is clicked we download the data
        $('.button').click(function(){
            var txtbval = $("textarea#txtr").val();

            //start ajax request
            $.ajax({
                url: txtbval,
                //force to handle it as text
                dataType: "text",
                success: function(data) {
                    //data downloaded so we call parseJSON function
                    //and pass downloaded data
                    var json = $.parseJSON(data);
                    //now json variable contains data in json format
                    //let's display a few items
                    $('#results').html(json[0].name);
                },
                error : function (error) {
                    alert("Enter API");
                }
            });
        });
    });

 body{
            text-align: center;
            font-family: arial;
        }

        .button{
            margin:20px;
            font-size:16px;
            font-weight: bold;
            padding:5px 10px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<textarea id="txtr" rows="4" cols="50"></textarea>
<input type="button" value="Get and parse JSON" class="button" />
<br />
<span id="results"></span>

从文本框中获取JSON URL？

2 个答案: