首页 > 代码库 > 一个简单的ajax获取json的例子

一个简单的ajax获取json的例子

一、第一个

html:

<div id="ruleList"></div>向div里添加一段循环输出的数据 

js:

$.ajax({  

           type: "POST",  

           url: "ruleListAction.do?method=searchRuleList",

   //我们用text格式接收

   //dataType: "text",   

  //json格式接收数据  

           dataType: "json",  

           data:  "ruleId="+ruleId+"&ruleGroupId="+ruleGroupId+"&prodName="+prodName,  

           success: function (jsonStr) {

     //实例2个字符串变量来拼接下拉列表

     //alert(jsonStr);

     //使用jquery解析json中的数据  

               var ruleListTemp = "<table width=\"100%\"  border=\"0\" cellspacing=\"0\" cellpadding=\"0\">";  

                $.each(jsonStr, function (n, value) {

       //alert(value.ruleId);  

                   ruleListTemp += ("<tr><td>" + value.ruleName);  

                   ruleListTemp += ("</td></tr>");   

               });  

                ruleListTemp += ("</table>");  

               $("#ruleList").html(ruleListTemp);   

           }  

    });  

一、第二个

                jquery的ajax异步请求接收返回json数据实例

1、jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以。这篇文章对此进行了实例介绍,需要的朋友可以参考下

2、jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以。

$(‘#send‘).click(function () {
    $.ajax({
        type : "GET",
        url : "a.php",
        dataType : "jsonp",
        success : function (data) {
            $.each(data.items, function (i, item) {
                $("<img class=‘para‘/> ").attr("src", item.media.m).appendTo("#resText");
                if (i == 3) {
                    return false;
                }
            });
        }
    });
});

$.ajax方法如下:

$.ajax({ 
   type: "POST",
   url:  ctxRoot+‘FolderAction!saveInformSetting.action‘,
   data: ‘jsonStr=‘ + inform_settingListStr,
   dataType: "json",
   complete: function(data){
       //在这里做些事情,假设返回的json数据里有name这个属性
       //有时候可以直接data.name或者data[‘name‘]去访问
       //但有时候,却要通过var jsonData = http://www.mamicode.com/eval("("+data.responseText+")");才可以通过jsonData.name访问,而且这种情况下,需要是complete而不是success
   }
   });
$.ajax(options)

////////////////////////////////////////////////////

这是最根本的JQuery Ajax方法,只有一个参数options,该options参数中包含了请求信息和回调函数的信息。参数内容都是key:value对形式出现,并且都是可选的。

语法如下:

$.ajax({options});
url:(string)发送请求的地址,可以是服务器页面也可以是WebService动作。
type:(string)请求方式,POST或GET
data:(object)向服务器发送请求时带去的数据。是key:value对形式,如:{name:"grayworm",sex:"male"},如果是数组{works:["work1","work2"]}
dataType:(string)预期返回的数据类型。xml,html,json,text等
beforeSend:(Function)发送ajax请求前被触发,如果返回false则取消本次请求。如果异步请求需要显示gif动画,那应当在这里设置相应<img>的可见。

一个简单的ajax获取json的例子