这一篇教程，我们把前面所学的内容做一下巩固练习，并且再接触一些新的知识内容，例如视图向JS返回数据时的处理以及JQuery中循环的使用等等。
先来看看，我们要实现的目标。
一、完成商品列表以及页面内容的呈现。
先不管添加和查询功能，我们先把上方呈现的页面实现出来。
页面中的数据，来自数据库中，这些数据内容可以从《Web项目开发入门笔记（8）》文中获取。
1、创建模板（goods_list.py）
在模板文件中我们写入HTML代码。
示例代码：
!DOCTYPEhtml
html
head
metacharset=UTF-8
title管理商品/title
/head
body
h3商品列表/h3
价格查询：inputtype=textstyle=display:inline-block;width:px;id=min_price~
inputtype=textstyle=display:inline-block;width:px;id=max_price
buttontype=buttonid=search确定/button
br
br
divid=list
{%forgoodsingoods_list%}
divid={{goods.goods_name}}
labelstyle=display:inline-block;width:px;名称：{{goods.goods_name}}/label
labelstyle=display:inline-block;width:90px;数量：{{goods.goods_number}}/label
labelstyle=display:inline-block;width:90px;价格：{{goods.goods_price}}/label
buttontype=buttonid={{goods.goods_name}}删除/button
br
/div
{%endfor%}
/div
br
名称：inputtype=textstyle=display:inline-block;width:65px;id=goods_name
数量：inputtype=textstyle=display:inline-block;width:40px;id=goods_number
价格：inputtype=textstyle=display:inline-block;width:40px;id=goods_price
buttontype=buttonid=add添加/button
labelid=add_msg/label
/body
/html
注意，上方代码中每个标签都有“id”属性，这个属性方便我们实现之后添加的功能。
特别是，商品列表中每个删除按钮的“id”，这里使用了每条商品信息中的商品名称做为属性值，实现删除功能时，就可以依据这个“id”属性的值进行删除。
另外，每一条商品信息的多个“label”标签和删除按钮的“button”标签，都写在一对“div”标签中。
这是因为，之后我们要对一整条记录进行删除操作，在页面中删除一条商品信息只需要移除对应的“div”就可以了。
还有，每一条商品信息对应的“button”标签中，需要添加“class”属性，属性值是自定义的，这样生成商品列表后，列表中所有的删除都属于同一个“class”，通过给这个“class”定义函数来实现每个按钮的删除功能。
至于，其它的代码，在之前的教程中都已接触过，在此不做详细解释。
2、配置URL分发
这里先添加一条访问页面的配置。
示例代码：
path(goods_list/,siteviews.goodslist),
3、定义视图函数
访问页面时，需要查询全部商品数据，与模板中的页面内容进行整合。
示例代码：
fromdjango.shortcutsimportrender,HttpResponse#HttpResponse在之后才会用到
fromMySite.modelsimportGoods
defgoodslist(request):
result=Goods.objects.all()
returnrender(request,goods_list.html,{goods_list:result})
当我们完成以上步骤，访问页面的时候，就能够看到前面展示的页面效果了。
接下来，在此基础上我们来分别完成商品添加、删除以及价格区间查询的功能。
这些功能的使用结果，全部是在页面无刷新的情况下呈现出来的。
二、完成添加商品并刷新列表的功能
当我们输入一条商品的商品信息（这里不做输入内容的验证），点击添加按钮，即可将这条商品数据添加到数据库，并且在页面上根据返回的代码，呈现提示信息“成功添加商品！”
当显示提示信息后，等待1秒钟，商品列表刷新，最后一条呈现新添加的商品信息。
1、模板中添加JavaScript脚本代码
实现这个功能，我们需要开始在模板文件（goods_list.py）中添加JavaScript代码。
在一对“head”标签中，我们先添加JQuery库文件和“script”标签以及一些固定的代码。
示例代码：
scripttype=text/javascriptsrc=