【Ajax实例操作】

一、前端与程序员之间的数据约定。

    约定返回的数据格式，以便方便提交数据

　　数据格式：txt格式、XML格式

　　目前XML格式文件已经被淘汰，常用的是txt格式的数据。

　　我们约定：1.只要纯文本格式的数据

　　　　　　　2.返回的标识符

　　　　　　　　　　1> 比如：1：用户已经被注册、2：用户名不允许被注册 3:用户名可以注册）

　　　　　　　　　　2> true或者false

　　　　　　　3.返回一个数组与json结合的格式

　　　　　　　　　　比如：a.新闻列表   [新闻标题   新闻时间]

[
    {
       title:'新闻标题',
       time:'2015-03-20'
   }
]    

 

二、处理不同种类数据的方法

　　1.纯文本格式

         

　　2.XML格式

三、Ajax执行时的提示

　　请求页面时页面会是空白的，此时我们要给用户一个等待提示。

　　可以在ajax请求期间用个gif提示图片。

　　

$(document).ajaxStart(function(){    //ajax开始请求时，让加载图片显示
     $(".loading").show();
}).ajaxStop(function(){   //当加载完成后，让加载图片隐藏
     $(".loading").hide();
})

 

 

四、Ajax中的细节（编码和提交方式）

　　请求回来的文件是乱码，可能是编码问题。

      当编码格式不一致时，处理方法：

 

 

案例操作：

  [
　　{"uname":"王强","day":"2010/06/17"},
　　{"uname":"王海云","day":"2010/06/11"}
  ] 

  [
　　{"城市":"北京","面积":16800,"人口":1600},
　　{"城市":"上海","面积":6400,"人口":1800}
  ]

 

$.ajax({

    type: "POST",         //获取方式

    url: "data/"+index+".html",    //数据读取地址，最好使用   url: "data/"+index+".html?"+Math.random() 避免浏览器缓存问题

    //data: "name=John&location=Boston",   //地址栏动态获取数据

    dataType:"json",    //数据格式

    success: function(data){     //resp获得的是对象或者数组
        
          var result=eval(data);  //eval可以将内容执行出JavaScript代码
　　　　　　//单个数据分别访问方法
          　　result[0].title;

 　　　　　　　result[1].title;

          　　result[2].title;

　　　　　　//for循环遍历
　　　　　　
        for(var i=0;i<result.length;i++){
             $("ul").append('<li>'+result[i].title+'--------'+result[i].date+'</li>');
       }

} });