Question

jquery获取页面后端数据。要用到Ajax。设置个button，点击button就能显示所需要提取的页面数据。

初学者求详细的代码，能够提取在web中显示出来。所给页面地址为10.16.61.60:90/solr/core2/select?q=phrase:hard%20drive&wt=json&indent=true&rows=6&start=5
页面中的内容如下图。提取下面所有"index"和"phrase"对应的数组。并能够显示出来的所有代码





• 你的回答被采纳后将获得：
• 系统奖励15（财富值+成长值）+难题奖励30（财富值+成长值）

Answer 1

function getData()
{
    $.ajax({ 
        type:"get", 
        url:"10.16.61.60:90/solr/core2/select?q=phrase:hard%20drive&wt=json&indent=true&rows=6&start=5 ",
        dataType: "json", 
        data:{zip:Math.random()},
        success:function(result){
              if(result.status==0){ 
                    $.each($(result.response.docs),function(i,n){ 
                         var index=n.index;
                         var phrase=n.phrase; 
                    }); 
              }
        }    
    });  
}

追问

我需要让提取的数据在前端页面中显示出来，怎样让它显示

追答

不知道你用什么方式展示。table还是div，把装这些数据的html代码贴出来

追问

追答

function getData()
{
$.ajax({
type:"get",
url:"10.16.61.60:90/solr/core2/select?q=phrase:hard%20drive&wt=json&indent=true&rows=6&start=5 ",
dataType: "json",
data:{zip:Math.random()},
success:function(result){
if(result.status==0){
$("#content").children().remove();
$("#content").append("");
$.each($(result.response.docs),function(i,n){
$("#content ul").append("Index:"+n.index+"Phrase:"+n.phrase+"");
});
}
}
});
}

Answer 2

比如你接收到的数据为data，
然后就是循环数据var arr=data.response.docs;var _html='';
for(var i=0,len=arr.length;i<len;i++){
var nindex=arr[i]["index"];

var phrase=arr[i]["phrase"];
_html+='<div>index='+nindex+',phrase='+phrase+'</div>';

}
然后把_html加入的想要放的dom中。原理大概就这样的。

Answer 3

$.ajax({
url:"10.16.61.60:90/solr/core2/select?q=phrase:hard%20drive&wt=json&indent=true&rows=6&start=5",
dataType:"JSON",
type:"GET",
success:function(res){
//拿到需要用到数据集，
var resList = res.response.docs;
//拼接数据渲染到html
var tpl = "";
resList.forEach(function(item){
tpl+="<div>"+item.index+"</div>"+item.phrase+"<div>"+"</div>"+item._version_+"<div>"
$("#id").html(tpl);
);
});
},
error:function(err){
console.log("错误："+err);
}
});

Answer 4

<input type="button" value="提交" id="btn"/>
<script  type="text/javascript">
$('#btn').click(function(){
    var url = 'index.php';
    var data=('#btn').val();
    $.ajax({
        type: 'post',
        url: url ,
        data: {
            data:data    
        } ,
        cache:false,  
        dataType:'json',
        success: function(result){
         if(result){ 
            console.log(result); 
                  }else{  
                    console.log(result);  
                  }  
        },
        error : function() {  
23                 console.log("error");
25              }  
    });
})

</script>

Answer 5

function getData()
{
$.ajax({
type:"get",
url:"10.16.61.60:90/solr/core2/select?q=phrase:hard%20drive&wt=json&indent=true&rows=6&start=5 ",
dataType: "json",
data:{zip:Math.random()},
success:function(result){
if(result.status==0){
$.each($(result.response.docs),function(i,n){
var index=n.index;
var phrase=n.phrase;
});
}
}
});
}