Fatal编程技术网
  • javascript/
  • Javascript 在JSON中搜索并使用jquery显示结果

Javascript 在JSON中搜索并使用jquery显示结果

javascript php jquery html json

Javascript 在JSON中搜索并使用jquery显示结果,javascript,php,jquery,html,json,Javascript,Php,Jquery,Html,Json,我有一个PHP文件： <?php //Get data from instagram api $keyword = $_GET['keyword']; if(!isset($_GET['count'])) $count = 20; else $count = $_GET['count']; //Query need client_id or access_token $query = array( 'client_id' => '8c81a425a76340a79aa

我有一个PHP文件：

 <?php
 //Get data from instagram api
 $keyword = $_GET['keyword'];
 if(!isset($_GET['count'])) $count = 20;
 else $count = $_GET['count'];

 //Query need client_id or access_token
 $query = array(
'client_id' => '8c81a425a76340a79aa66cb88aa74c89',
'count'     => $count
 );
 $url = 'https://api.instagram.com/v1/users/search?q='.$keyword.'&'.http_build_query($query);

 try {
$curl_connection = curl_init($url);
curl_setopt($curl_connection, CURLOPT_CONNECTTIMEOUT, 30);
curl_setopt($curl_connection, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl_connection, CURLOPT_SSL_VERIFYPEER, false);

//Data are stored in $data
$data = curl_exec($curl_connection);
curl_close($curl_connection);
echo $data;
 } catch(Exception $e) {
return $e->getMessage();
 }
 ?>
我将获取“username”的值，并将其存储在字符串中，以此类推

我知道怎么做，但我不知道如何用jquery和javascript编码。。有人能帮忙吗

我试过这个：

  <!DOCTYPE html>
  <html>
<head>
   <title>jQuery Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {

        $("#submit").click(function(){

        $.ajax({
        url: "http://www.lamia.byethost18.com/get_info.php",
        type: "GET",
        data: {keyword: $("#keyword").val()},
        dataType: "JSON",
        success: function (jsonStr) {
            $("#result").text(JSON.stringify(jsonStr));
        }
    });

}); 

});
</script>
</head>
<body>
<div id="result"></div>
    <form name="contact" id="contact" method="get">
     keyword : <input type="text" name="keyword" id="keyword"/><br/>
    <input type="button" value="search!" name="submit" id="submit"/>
    </form>

</body>
  </html>
  </html>
这是我想要的，但我不想让它打印json字符串，我只想使用用户名和配置文件图片中的数据，例如在我的html中的某个地方。。怎么做

解决者：

$(document).ready(function() {
            $("#submit").click(function(){
                $.ajax({
                    url: "http://www.lamia.byethost18.com/get_info.php",
                    data: {keyword: $("#keyword").val()},
                    dataType: 'JSON',
                    success: 
                        function(jsonStr) {
                        $('#name').text($("#keyword").val());
                        var all_results = '';
                        $.each(jsonStr.data, function(index, element){
                            all_results += '<div style="float:left; margin-left: 100px;" class="result_row">';
                            all_results += '<img src="'+element.profile_picture+'" />';
                            all_results += '<p> @' + element.username + '</p>';
                            all_results += '</div>';
                        });
                            $('#images').html(all_results);
                        }
                });
            }); 
        });

$（文档）.ready（函数（）{
$（“#提交”）。单击（函数（）{
$.ajax({
url:“http://www.lamia.byethost18.com/get_info.php",
数据：{关键字：$（“#关键字”）.val（）}，
数据类型：“JSON”，
成功：
函数（jsonStr）{
$（“#名称”）.text（$（“#关键字”）.val（）；
var all_结果=“”；
$.each（jsonStr.data，函数（索引，元素）{
所有结果+=''；
所有结果+=''；
所有结果+='@'+element.username+'
'；
所有结果+=''；
});
$（'#images'）.html（所有#u结果）；
}
});
}); 
});
您需要使用Jquery的Ajax方法将信息发送到脚本中。（放入
标记中，确保使用
$（document）.ready（{//jquery here}）；
包装jquery代码）

这只是一个简单的例子，让你开始。阅读更多关于ajax方法的信息。还有更多关于json的信息

stackoverflow上有很多问题，还有你的问题的答案，只需再搜索一下就可以了

JSON字符串可以被当作字典

你应该做什么：

 success: function (jsonStr) {
        var json_result = JSON.Parse(jsonStr);
        // To get profile picture & username
        for( var i=0; i<json_result['data'].length; i++ ) {
            var username = json_result['data'][i]['username'];
            var profile_pic = json_result['data'][i]['profile_picture'];
            $("#result").text( username );
            $("#id_of_image_tag").attr( 'src',profile_pic );
        }
    }

success:function（jsonStr）{
var json_result=json.Parse（jsonStr）；
//获取个人资料图片和用户名

对于（var i=0；ithanks for the response.。我确实这么做了，但我真的不知道怎么做。.我在android上使用了json，它比这个简单得多。.你能为我解释一下示例代码吗？我试过了，但点击按钮后没有返回任何结果：（…有什么问题吗？你能添加`console.log（json_result）[你能添加
console.log吗（json_result['data'][i]['username']，json_result['data'][i]['profile\u picture']）；
在for循环中。已解决..如果您想查看，我用工作代码编辑了我的文章，非常感谢！！：）

  {"meta":{"code":200},"data":[{"username":"lama","bio":"","website":"","profile_picture":"http://images.ak.instagram.invalid/profiles/profile_42284_75sq_1353177507.jpg","full_name":"Li Shing","id":"42284"},{"username":"bekhand_lamasab","bio":"??? ?? ?? Kik : narsis.fashion ??\n????? ? ? ?? sfs : 520 k ??\n????? ??? ???? ????? ??????????? ?? \n??????????????? ?? ??? ????? ???????????","website":"","profile_picture":"http://photos-f.ak.instagram.invalid/hphotos-ak-xap1/10349797_785664258123877_321110299_a.jpg","full_name":"?????????? ??? ???????????????","id":"1085311553"},{"username":"lamarquisette","bio":"","website":"","profile_picture":"http://images.ak.instagram.invalid/profiles/profile_279115230_75sq_1378119768.jpg","full_name":"Youssef Marquis","id":"279115230"},{"username":"timlaman","bio":"NatGeo Wildlife Photographer - Filmmaker - Field Biologist. Exploring wild places, rare species, rain forests and coral reefs.\nSee more on FB:","website":"https://www.facebook.invalid/TimLamanPhoto","profile_picture":"http://images.ak.instagram.invalid/profiles/profile_195678468_75sq_1342554137.jpg","full_name":"Tim Laman","id":"195678468"},{"username":"lamamadelrap","bio":"#RIPMonkeyBlack\n??MELYMEL NO UTILIZA FACEBOOK??\n(Twitter) @MELYMELMELADA \n(RD) 809.360.9052\n(USA) 347.209.2816","website":"http://www.youtube.invalid/MelymelVEVO","profile_picture":"http://photos-g.ak.instagram.invalid/hphotos-ak-xpf1/10693447_660276060736558_41448872_a.jpg","full_name":"MelyMel #zeroDembow","id":"305872466"},{"username":"lamarctaylor","bio":"no reality is the same.","website":"","profile_picture":"http://photos-f.ak.instagram.invalid/hphotos-ak-xpa1/10731950_736068223151773_567726601_a.jpg","full_name":"lamarctaylor","id":"206461711"},{"username":"lamaisond","bio":"","website":"","profile_picture":"http://photos-g.ak.instagram.invalid/hphotos-ak-xpa1/10610996_331177297053686_1564957178_a.jpg","full_name":"","id":"1572747"},{"username":"joud_lama","bio":"?? ???? ???? ????? ?????????\nAll about my kids ????\nOur daily life in videos \n????? ???? ????? ??? ?????\n?????? ???? ???? ??????? ??????? ?? ?? ????","website":"https://m.youtube.invalid/watch?v=6PvF2TjuhQw","profile_picture":"http://images.ak.instagram.invalid/profiles/profile_812908181_75sq_1399322579.jpg","full_name":"Joud_lama","id":"812908181"},{"username":"co._lams","bio":"","website":"","profile_picture":"http://photos-h.ak.instagram.invalid/hphotos-ak-xpa1/10731956_923164217707383_1481888166_a.jpg","full_name":"Lamar","id":"940742669"},{"username":"lamarca941fm","bio":"","website":"","profile_picture":"http://images.ak.instagram.invalid/profiles/profile_1173210472_75sq_1394672048.jpg","full_name":"La Marca 94.1 FM","id":"1173210472"},{"username":"jonjonlamar","bio":"#Miami - #NYC. ????\nA Private Life is a Happy Life.. ??","website":"","profile_picture":"http://photos-e.ak.instagram.invalid/hphotos-ak-xap1/10483455_526566950776404_1475004702_a.jpg","full_name":"Jonathan Lamar Green","id":"18211272"},{"username":"lamafiabeats","bio":"?Produccion y promocion de eventos??\n?cuenta aliada @shopvipcaracas??\n?publicidad y contacto +58 4242308332","website":"","profile_picture":"http://photos-b.ak.instagram.invalid/hphotos-ak-xaf1/10731882_609733789138665_677150285_a.jpg","full_name":"la mafia lifestyle","id":"1533879744"},{"username":"marisa_lmp","bio":"???? Co-Founder : @micha_thailand\n???????????????????????-????????????\n???????????? : lmp.marisa/fon-lamapearl???\n?????: 092-2845899 , 085-389-5648 ??","website":"http://www.lamapearl-scare.invalid","profile_picture":"http://photos-f.ak.instagram.invalid/hphotos-ak-xaf1/10731597_1494940657448173_726227876_a.jpg","full_name":"??CEO of LaMaPearl scare??","id":"10083328"},{"username":"lamaterialista1","bio":"Artista, Actriz, compositora Booking: RD 829-963-3653 USA 917-743-5599 / lamaterialistabooking@gmail.invalid / sigueme en twitter @LAMATERIALISTA1","website":"http://www.youtube.invalid/LaMaterialistaVEVO","profile_picture":"http://photos-c.ak.instagram.invalid/hphotos-ak-xap1/10665318_743709879028514_706220468_a.jpg","full_name":"LA REINA DE LA CHAPA QUEVIBRAN","id":"177807899"},{"username":"lamaris87","bio":"","website":"","profile_picture":"http://photos-f.ak.instagram.invalid/hphotos-ak-xpa1/10665398_1493770557570293_1634650289_a.jpg","full_name":"Lamaris","id":"30943990"},{"username":"lamaracuchis","bio":"Animadora de La Bomba \nFashion Blogger\nBlog: http://www.carlafieldproject.invalid\nChequea mi nuevo tutorial de maquillaje \naquí ? espero lo disfruten.","website":"http://youtu.be/uLLv72vmgG4","profile_picture":"http://photos-a.ak.instagram.invalid/hphotos-ak-xfp1/891345_637029753056760_2048316896_a.jpg","full_name":"Carla Field","id":"238108076"},{"username":"lamaskeproduce","bio":"Producción de Tv y Radio,influyente,sarcástica,Yal, turista sin visa,Fan d Miley Cyrus,Dra. Polo y Dr. House.?Cuenta Alterna @lamaskeproducetv","website":"http://www.lamaskeproduce.invalid","profile_picture":"http://photos-a.ak.instagram.invalid/hphotos-ak-xap1/925887_491093354357472_430852604_a.jpg","full_name":"Jenifel Galcia Cyrus","id":"30637470"},{"username":"dalailama","bio":"Welcome to the official Instagram Account of the Office of His Holiness the 14th Dalai Lama.","website":"http://www.dalailama.invalid/","profile_picture":"http://images.ak.instagram.invalid/profiles/profile_1044003089_75sq_1391167280.jpg","full_name":"Dalai Lama","id":"1044003089"},{"username":"lamarquenyc","bio":"Creative Consultancy co-founded by Meredith Melling and Valerie Boster; la marque, get set, go!","website":"http://lamarquenyc.invalid","profile_picture":"http://images.ak.instagram.invalid/profiles/profile_1031042100_75sq_1390883999.jpg","full_name":"la marque","id":"1031042100"},{"username":"lamasat.iq","bio":"? Official Account\n| ???? ??????? ????? |\n????? ????????? ????????\n?? ???? ?????? ???? ???? ????? ?????? \nadmins\n?????????????????","website":"","profile_picture":"http://photos-a.ak.instagram.invalid/hphotos-ak-xpa1/10755896_316197498569544_758738327_a.jpg","full_name":"? ?????????? ????????? ?","id":"1360750684"}]}



$(document).ready(function() {
            $("#submit").click(function(){
                $.ajax({
                    url: "http://www.lamia.byethost18.com/get_info.php",
                    data: {keyword: $("#keyword").val()},
                    dataType: 'JSON',
                    success: 
                        function(jsonStr) {
                        $('#name').text($("#keyword").val());
                        var all_results = '';
                        $.each(jsonStr.data, function(index, element){
                            all_results += '<div style="float:left; margin-left: 100px;" class="result_row">';
                            all_results += '<img src="'+element.profile_picture+'" />';
                            all_results += '<p> @' + element.username + '</p>';
                            all_results += '</div>';
                        });
                            $('#images').html(all_results);
                        }
                });
            }); 
        });



$.ajax({
    url: '/point/to/php/script.php',
    type: 'GET', //or POST if you prefer
    data: { "keyword" : $("#keywordElementID").val(), /* other variables */ },
    dataType: 'JSON',
    success:
         function( returnedJSON  ){

             //use returned text here


             //to loop through data objects from API
             $.each( returnedJSON.data, function( index , dataObject ){
                 var name = dataObject.full_name;
             });                

        }
});



 success: function (jsonStr) {
        var json_result = JSON.Parse(jsonStr);
        // To get profile picture & username
        for( var i=0; i<json_result['data'].length; i++ ) {
            var username = json_result['data'][i]['username'];
            var profile_pic = json_result['data'][i]['profile_picture'];
            $("#result").text( username );
            $("#id_of_image_tag").attr( 'src',profile_pic );
        }
    }