从文本框中获取JSON网址？

我IDed文本框为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>

使用

来源

2017-01-16 TacticalBacon

评论数据类型选项，直接检查，data.post.title – rahulsm

当你知道你会得到响应JSON那么你为什么这样做是JSON解析？只需设置'dataType：'json'' – itzmukeshy7

问题是与你的HTML中的id begning在textarea的缺失"：改变

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

要

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

，它应该工作的罚款。

$(document).ready(function() { 
 
      
 
      //after button is clicked we download the data 
 
      $('.button').click(function(){ 
 
      \t var txtbval = $("#txtr").val(); 
 
      \t 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); 
 
        } 
 
       }); 
 
      }); 
 
     });

<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>

来源

2017-01-16 06:08:15

谢谢！我想知道为什么我不能在本地使用这个脚本？我需要在我的网站上运行这个 – TacticalBacon

@TacticalBacon它应该工作正常，只要你传递正确的文件的URL。 –

而我如何添加前缀和后缀从文本框输入的值？像我输入4786和它导致www.example.com/?p=4786&=json1（只输入帖子id，但仍然导致json文件） – TacticalBacon

有几件事情你缺少：

1）首先你 “在你的ID =）” TXTR”

失踪（
2）点击按钮后需要获取textarea的值

因为我不知道你用的是什么API我用这个API：

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

，并得到了第一个JSON对象名称的值。

这是一个工作解决方案。希望能帮助到你！ AJAX一会儿的

//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>

来源

2017-01-16 06:17:52 HenryDev

从文本框中获取JSON网址？

回答

相关问题