记动态加载商品列表页面(php,mySQL,jq+ajax)

做之前感觉可能会很繁琐，但是一点一点下来也就觉得罢了，老话说的好[越怕越不会，越不会越怕]。

---

当然，连接后台之前我已经确定我的商品需要在后台保存什么信息以确定create table的情况。那么图片上的6条就是我们要存在数据库的信息。开始干活：

1. 打开phpStudy，单击MySQL管理器==>MySQL-Front==>选择登录信息open。
2. SQL编辑器输入create database shopping点击运行或F9创建一个数据库。
3. 单击导航栏shopping数据库再删掉刚才SQL编辑器的内容再输入以下建表代码F9。

create table goodslist(       gImg varchar(50),       gName varchar(50),       gDesc varchar(50),       gSerial varchar(20),       gComment varchar(200),       gPrice float(10))

4.随便给后台添加些商品信息

insert into goodslist(gId,gImg,gName,gDesc,gSerial,gComment,gPrice)            value('008','img/goods-list-img (8).jpg'            ,'得力 7650 胶装本 A5/30页 （单位：本） 混色'            ,'书写便利 内芯易平铺 足页 不掉页'            ,'商品编号：100001884'            ,'（ 2条 ）'            ,'8.31');

5.为了方便显示，我多insert了几条数据。
6.在SQL编辑器输入select * from goodslist F9看数据是否插入了。
7.新建一个php文件，敲入：

<?php    //1、建立连接    $conn = mysql_connect("localhost","root","root");    //2、选择数据库    mysql_select_db("shopping",$conn);    //3、执行SQL语句    $sqlstr = "select * from goodslist";    $result = mysql_query($sqlstr,$conn);//执行查询的sql语句后，有返回值，返回的是查询结果    //查询列数     $query_cols = mysql_num_fields($result);     //echo "列数：".$query_cols;    //查询行数    $query_num =mysql_num_rows($result);    //echo "行数：".$query_num;    $str="[";    $query_row = mysql_fetch_array($result);//游标下移,拿出结果集中的某一行，返回值是拿到的行；    while($query_row){        $str = $str.        "{            'gId':'".$query_row[0]."',            'gImg':'".$query_row[1]."',            'gName':'".$query_row[2]."',            'gDesc':'".$query_row[3]."',            'gSerial':'".$query_row[4]."',            'gComment':'".$query_row[5]."',            'gPrice':'".$query_row[6]."'        }";        $query_row = mysql_fetch_array($result);        if($query_row){            $str = $str.",";        }    }    $str = $str."]";    //4、关闭数据库    mysql_close($conn);    echo $str;?>

8.在js里用jq提供的ajax方法把数据解析并显示出来（字符串拼哭了当时）：

/*从后台数据动态加载商品列表*/$(function(){    $.ajax({        type:"post",        url:"php/goodslist.php",        success:function(data){            var goodsJson=eval(data);            //用eval把字符串转换成JSON            var goodsHtml="";            for(var i=0;i<goodsJson.length;i++){                // console.log(goodsJson[i].gImg);                goodsHtml+='<li><p><a href="###"><img src="'+goodsJson[i].gImg+'" alt="" /></a></p><h3 class="recommen_goods_name"><a title="'+goodsJson[i].gName+'" target="_blank" href="###" >'+goodsJson[i].gName+'</a>&nbsp;<font color="red">'+goodsJson[i].gDesc+'</font></h3><p class="recommen_goods_sku">'+goodsJson[i].gSerial+'</p><p class="recommen_goods_storage"><span class="fl">评论：</span> <span class="star star00"></span><a target="_blank" href="###" style="cursor: pointer;"><font class="fr">'+goodsJson[i].gComment+'</font></a></p><p class="recommen_goods_price"><span class="rmb">¥</span><span class="rmb mr-9">'+goodsJson[i].gPrice+'</span></p><p class="recommen_goods_buy"><a class="btn" href="javascript:void(0);" id="minus-btn"><img src="img/subbtn.gif" alt="减少"></a><input id="want-toBuy" type="text" class="shopping_cart_num_xu" value="1" maxlength="4"><a class="btn" href="javascript:void(0)" id="add-btn"><img src="img/addbtn.gif" alt="增加"></a><a href="javascript:void(0)"  class="fav">收藏</a><a href="javascript:void(0)"  class="buy">购买</a></p></li>';            }            $("#goodslist-fromData").html(goodsHtml);            //这个是加载所在父元素        }    })})

9.然后就是后台有啥前台有啥了。。