php抓取网页表格信息(查看PHP中JSON的应用--一步步表格中的信息)

　　php抓取网页表格信息(查看PHP中JSON的应用--一步步表格中的信息)

　　本示例适用场景：查看详细信息，如用户详情，发现部分字段需要修改，可直接点击字段内容进行修改，节省用户时间。（传统的方法是进入一个编辑页面，列出所有编辑的字段信息，即使只需要编辑其中一两个字段内容，然后点击提交）提高WEB响应速度，从而提高前端-最终用户体验。

　　本示例依赖jquery库，基于jeditable插件，具有以下特点：

　　让我们一步一步地解释实现过程。

　　XHTML

　　我们需要做一个表格如下：

　　

客户信息

姓名

李小三

办公电话

021-12345678

称谓

先生

手机

13800138000

公司名称

常丰集团

电子邮箱

lrfbeyond@163.com

潜在客户来源

公共关系

有限期

2011-11-30

职位

部门经理

网站

www.helloweba.net

创建时间

2010-11-04 21:11:59

修改时间

2010-11-05 09:42:52

备注

备注信息

　　这是一个用户信息表。从代码中可以发现，响应的字段信息的td被赋予了class和id属性并赋值。值得一提的是，表中td对应的id的值与数据库中的字段名是一一对应的。这是为了让后台在编辑的时候能够获取到对应的字段信息，后面会在PHP代码中讨论。

　　CSS

　　table{width:96%; margin:20px auto; border-collapse:collapse;}

table td{line-height:26px; padding:2px; padding-left:8px; border:1px solid #b6d6e6;}

.table_title{height:26px; line-height:26px; background:url(btn_bg.gif) repeat-x bottom;

font-weight:bold; text-indent:.3em; outline:0;}

.table_label{background:#e8f5fe; text-align:right; }

　　CSS 呈现表格样式以使表格看起来更舒适。

　　jQuery

　　说到jquery，一定要记得参考jquery和页面间的jeditable插件

　　然后开始调用插件。

　　$(function(){

$('.edit').editable('save.php', {

width :120,

height :18,

//onblur : 'ignore',

cancel : '取消',

submit : '确定',

indicator : 'loader.gif',

tooltip : '单击可以编辑...'

});

});

　　jeditable 插件提供了许多属性和方法调用。可以设置按钮的宽度、高度、文字信息、提交时加载图片、鼠标提示信息等。save.php是最终提交编辑信息的后台程序的地址。现在看看表中的信息是否可以编辑。

　　jeditable还提供select、textarea类型编辑，并提供插件api接口。

　　我们来看看下拉选择框select的处理：

　　$('.edit_select').editable('save.php', {

loadurl : 'json.php',

type : "select",

});

　　type指定select类型，select中加载的数据来自json.php，json.php提供下拉框需要的数据源。

　　$array['老客户'] = '老客户';

$array['独自开发'] = '独自开发';

$array['合作伙伴'] = '合作伙伴';

$array['公共关系'] = '公共关系';

$array['展览会'] = '展览会';

print json_encode($array);

　　这些数据直接存储在 json.php 文件中。当然也可以通过读取数据库信息生成json数据。如何生成json数据，请看JSON在PHP中的应用。另一种方法是直接在可编辑项中指定数据：

　　$('.edit_select').editable('save.php', {

data : " {'老客户':'老客户','独自开发':'独自开发','合作伙伴':'合作伙伴', '展览会':'展览会'}",

type : "select",

});

　　不难发现，上面代码中的数据其实是一串json数据。

　　没有更多的textarea类型，只需将类型类型更改为textarea。PS：默认类型是文本。

　　在处理日期类型时，我使用了一个 jquery ui datepicker 日历插件，当然不要忘记介绍 juqery ui 插件和样式：

　　访问jquery ui的datepicker日历插件

　　$.editable.addInputType('datepicker', {

element : function(settings, original) {

var input = $('');

input.attr("readonly","readonly");

$(this).append(input);

return(input);

},

plugin : function(settings, original) {

var form = this;

$("input",this).datepicker();

}

});

　　调用代码可以直接指定类型为datepicker。

　　$(".datepicker").editable('save.php', {

width : 120,

type : 'datepicker',

onblur : "ignore",

});

　　现在让我们看看是否可以修改表单中“限期”字段中的日期。好吧，还有其他更多的插件访问等着你加入。

　　PHP

　　编辑好的字段信息会发送到后台程序save.php进行处理。save.php需要完成的工作是：接收前端提交的字段信息数据，进行必要的过滤和校验，然后更新数据表中对应的字段内容，并返回结果。

　　include_once("connect.php"); //连接数据库

$field=$_POST['id']; //获取前端提交的字段名

$val=$_POST['value']; //获取前端提交的字段对应的内容

$val = htmlspecialchars($val, ENT_QUOTES); //过滤处理内容

$time=date("Y-m-d H:i:s"); //获取系统当前时间

if(empty($val)){

echo "不能为空";

}else{

//更新字段信息

$query=mysql_query("update customer set $field='$val',modifiedtime='$time' where id=1");

if($query){

echo $val;

}else{

echo "数据出错";

}

}

　　回到最开始的HTML代码，表中显示的字段内容信息当然是从数据库中读取的，所以使用PHP读取数据表并显示内容就可以了。自己写一个详细的过程。

　　这样，可编辑的表格就完成了。但它还没有完成。我还在研究验证输入信息的有效性。下面我会附上文章，敬请期待，期待您的参与。