jQuery ajax json 데이터 탐색 코드-JS 튜토리얼-php.cn

jQuery ajax json 데이터 탐색 코드

高洛峰

풀어 주다： 2017-01-12 09:36:02

원래의

1467명이 탐색했습니다.

먼저 요구 사항을 말씀드리겠습니다. Ajax 요청을 한 후 다음 json 데이터가 백그라운드에서 다시 전달됩니다.

구체적인 구현 코드는 다음과 같습니다.

JavaScript 코드

{
"data":[
{"id":"1","name":"选择A","value":"A"},
{"id":"2","name":"选择B","value":"B"},
{"id":"3","name":"选择C","value":"C"}
]
}

로그인 후 복사

jquery의 성공 함수에서 위 json 데이터 클래스를 구문 분석합니다

JavaScript 코드

$.ajax({
type: "POST",
url: "xxx.do",
dataType : "json", // 指定返回类型
data: {xxx:"yyy"}, // 传递到后台的参数
success: function(data)
{
$.each(data, function(index,values){ // 解析出data对应的Object数组
$.each(values,function(index2,value){ // 遍历Object数组 ，每个对象的值存放在value ，index2表示为第几个对象
// 根据自己的逻辑进行数据的处理
alert(value.name + " " + value.value);
// TODO: 逻辑
});
});
},
error : function()
{
alert("系统出现问题");
}
});

로그인 후 복사

계속 예시를 들어보겠습니다

이 장에서는 jQuery로 캡슐화된 JSON 데이터에 대한 Ajax 요청 처리인 코드 예시를 공유합니다.
코드는 비교적 간단하며 숙련된 인력이 훑어볼 수 있어 초보자도 참고로 사용할 수 있습니다.
코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>PHP中文网</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
 $("#bt").click(function(){
  $.ajax({
   type: "get",
   dataType: "json",
   url: "demo/jQuery/ajax/txt/json.txt",
   success: function(msg){
    var data = msg
    str="";
    $.each(data,function(index, n){
     str=str+data[index].webName+","+data[index].url+","+data[index].age+"<br/>";
    });
    $("#show").html(str);
   }
  });
 })
})
</script>
</head>
<body>
<div id="show"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

로그인 후 복사

위는 에디터가 소개한 jQuery ajax json 데이터 순회 코드입니다. 궁금한 점이 있으시면 남겨주세요. 나에게 메시지를 보내면 편집자가 제때에 모든 사람에게 답장을 보낼 것입니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

jQuery ajax json 데이터 탐색 코드 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요!