【Jquery+ajax】关于如何使用ajax获取数据

通过 HTTP 请求加载远程数据。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。

$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

$.get 和$.post 也是调用的底层$.ajax（） 所以 先来了解一下$.ajax（）的参数

例如：

  function test(){
   $.ajax({
            //提交数据的类型 POST GET
            type:"POST",
            //提交的网址
            url:"testLogin.aspx",
            //提交的数据
            data:{Name:"sanmao",Password:"sanmaoword"},
            //返回数据的格式
            datatype: "html",//"xml", "html", "script", "json", "jsonp", "text".
            //在请求之前调用的函数
            beforeSend:function(){$("#msg").html("logining");},
            //成功返回之后调用的函数             
            success:function(data){
           $("#msg").html(decodeURI(data));            
            }   ,
            //调用执行后调用的函数
            complete: function(XMLHttpRequest, textStatus){
               alert(XMLHttpRequest.responseText);
               alert(textStatus);
                //HideLoading();
            },
            //调用出错执行的函数
            error: function(){
                //请求出错处理
            }         
         });

  }

使用列子

前端html 页面动态进行添加页面  使用ajax的方式，获取的数据，进行循环输出为展示在列表中

<scripttype="text/javascript">

         varhost = "{/literal}{$HOST}{literal}";

         varpagenum = 20;//每页条数

         $(document).ready(function(){

                  getList(1);

                   functiongetList(page) {

                            $.ajax({

                                     type : "POST",

                                     url : host+"/index.php/market/msgtemp/list",

                                     data : {page : page},

                                     success : function(json1) {  //返回为 list值[rowall],[nowpage] [data]等

                                               var data =eval("(" + json1 + ")");

                                               pagenum =data['data'].length;//获取的是数据记录数

                                               showlist(data['data']);

                                     }

                            });

                   }

                   functionshowlist(data) {

                            varstr = '<tr><th width="50"><inputtype="checkbox" name="" class="">全选</th><thwidth="120">模版名称</th><th>内容</th><th width="120">创建时间</th><thwidth="90">操作</th></tr>';

                            for(vari in data){

                                     str+= '<tr>';

                                     str+= '<td><input type="checkbox" name="check"value="'+data[i]['id']+'"class="j_c_check"></td>';

                                     //alert(data[i]['tpl_name'])

                                     str+= '<td><span>'+data[i]['tpl_name']+'</span></td>';

                                     str+= '<td>'+data[i]['msg_content']+'</td>';

                                     vard = new Date(parseInt(data[i]['create_time'])*1000);

                                     str+='<td>'+d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+'</td>';

                                     str+= '<td><a class="btn-link j_ajax_modal"href="'+host+'/index.php/market/msgtemp/msgtempedit?id='+data[i]['id']+'"data-target="#editMsgTempModal" data-width="560">修改</a><span>|</span><aclass="pl5 btn-link j_del j_msg_del" id ="'+data[i]['id']+'"href="">删除</a></td>';

                                     str+= '</tr>';

                            }

                            $(".j_list_list").html(str);

                   }

         });

</script>

后端数据的获取实现（zendframework 框架 中 url : host+"/index.php/market/msgtemp/list"对应的）

public function listAction(){

     $nowpage = abs($this->getParam('page'));

     $config = new DbTableConfig();

     $seller_id = Cookie::getSingleSellerCookies('seller_id');

     $table_name = 't_market_msg_tpl';

     $db_config = $config->getTbConfigBySellerTable($seller_id,$table_name);

     $db_connect = new DbConnect();

     $fields = array();

     $param = array(

          array(

              "seller_id",

              $seller_id

          )

     );

     $condition = " is_deleted=0 ";

     $totalnum = $db_connect->getRowCount($db_config['link'], $db_config['table'],$param,$condition);

     if($totalnum> 0){

          $page_size = 20;

          $page_num = ceil($totalnum /$page_size);

          $nowpage = ($nowpage > $page_num|| $nowpage < 1) ? 1 : $nowpage;

          $result =$db_connect->getWord($db_config['link'], $db_config['table'],$param,$fields,$condition,$nowpage,$page_size);

     }else{

         $page_num = 0;

          $nowpage = ($nowpage > $page_num|| $nowpage  < 1) ? 1 : $nowpage;

          $data = array();

     }

     $list = array(

          'rowall' => $totalnum,

          'nowpage' => $nowpage,

          'pageall' => $page_num,

          'data' => $result

     );

     echo json_encode($list); 

}

前端获取的字符串 就是 $list转换成的json字符串 我们使用数据 就通过 （success : function(json1) ）

解:1： json1

{"rowall" :"71",
 "nowpage":1,
 "pageall":4,
 "data"   :  [{"id":"1","seller_id":"1","owner_id":"1","tpl_name":"\u77ed\u4fe1\u8425\u9500vb","msg_content":"111\u4eb2\u6625\u5b63\u4f18\u60e0\u5f00\u59cb\u55bd\uff0c\u4eb2\u6625\u5b63\u4f18\u60e0\u5f00\u59cb\u55bd\uff0c\u9000\u8ba2\u56deN","msg_status":"1","create_time":"1430965833","is_deleted":"0","is_start":"1","update_time":"1430994853","modify_time":"1430965833"},
             {"id":"2","seller_id":"1","owner_id":"1","tpl_name":"\u77ed\u4fe1\u8425\u9500C","msg_content":"\u4eb2\u6625\u5b63\u4f18\u60e0\u5f00\u59cb\u55bd\uff0c123\u4eb2\u6625\u5b63\u4f18\u60e0\u5f00\u59cb\u55bd\uff0c\u9000\u8ba2\u56deN","msg_status":"1","create_time":"1430965833","is_deleted":"0","is_start":"1","update_time":"1430994233","modify_time":"1430965833"}
             ]
}

解释2：var data =eval("(" + json1 + ")");

备注：

eval和JSON
利用eval函数可以将JSON数据转化为可用的javascript对象。

var data =eval("(" + json1 + ")");

为什么要加括号？
加上圆括号的目的是使eval函数在评估javascript代码的时候强制将括号内的表达式转化为对象，
而不是作为语句来执行。

例如对象{}，如若不加外层的括号，那么eval会将大括号识别为javascript代码块的开始和结束标记，

那么{}将会被认为是执行了一句空语句。

如下：

1. console.info(eval("{}"));   //undefined   
2. console.info(eval("({})")); //Object {}