web前端小点(备忘)

1. 简单的jq异步

 a.html页面

$.ajax({ 
    url : "b.php?ac=do",  // ajax将数据发送到的url
    type : "POST",
    dataType : "json",
    data : { tmp: 'test~~',  formData: $("#form").serialize() },  //  传送的数据,表单数据可以通过serialize序列化表单值
    success : function(json){   // json表示的是从b.php页面返回回来的json结构的数据
        if(!json.error)
            alert(json.msg);
    },
    error : function(XMLHttpRequest, textStatus, errorThrown){
         alert("Status: " + textStatus);
         alert("Error: " + errorThrown);  //  error提示部分
         alert(XMLHttpRequest.responseText); // 页面提示错误
    }
});

Php处理页面 b.php

switch( $_POST[‘do] ){

       case 'do':

                $a = $_POST['tmp'];
                parse_str(urldecode($_POST[formData]), $data);   // 将a.html页面传送过来的序列值反序列化，并将传送过来的数据解析到data变量中

                echo json_encode( array('error'=>0, msg'=>"hello, {$a}~, you have the data ". serialize($data)) );   // 返回json格式的数据给html页面

                exit();

                break;

}
小小实例：当鼠标定位到 文本框goodsName 时，出现下拉框，输入文字，下拉框的内容也会相应改变

a.html 页面部分代码~~~~

    物品名称

    

"autoGoods">

        <style type="text/css">

            .autoGoods { position:absolute; background-color:#f7f8f9; border:1px solid #CCC; display:none; width:270px;}                   

            #autoClose { border-bottom:1px solid #ccc;  }

            #autoClose a{ margin-left:80px; }

            #autoList  { list-style:none; margin:0px; padding:0px; height:200px; overflow-y:auto }

            #autoList li{ border-bottom:1px solid #ccc;   padding:2px 10px; cursor:pointer; }

        

        

"autoClose">     物品ID  |  物品名

            "javascript:void(0)" onclick="javascript: autoClose()">关闭  
        

        

"autoList">                    

            <{foreach from=$goodsList item=goods}>

                <li>  <{$goods.id}> | <{$goods.name}>

            <{/foreach}>

        

    

 

a.php 页面处理代码~~~~

    switch ($_REQUEST['ac']){

       // 动态搜索物品 

       case 'searchGoods':

           $name = trim(preg_replace("/[\'\"]+/", "", $_REQUEST['name']));

           $goodsList = Class::getGoodsNameList();

           $html = NULL;

           if($goodsList)

              foreach ($goodsList as $goods){

                  $html .= "

  {$goods['id']} | {$goods['name']}

";             

              }

           echo json_encode( array('error'=>0, 'html'=>$html) ); exit(); 

           break;

    }   

2. 关于highchats 
    参考 
   
    

3.  内容展开收起效果
    最简单的方法是使用jq 默认的toggle方法， 假如使用toggle，必须闪一下才会出来的话，可以使用 $("#divName").slideToggle("slow")
    另外一种方法是用使用js，没试过，可参考     

4. 当鼠标移动到某个层（比如tr）的时候，鼠标变成手型
    onmouseover="this.style.cursor='pointer';" >
    
参考地址：
smarty section、foreach 学习笔记

PHP+JQuery 通过Jason异步获取数据实现AJAX