前端 开发分析 (js/php...)

http://blog.csdn.net/andylin02/archive/2009/02/01/3856295.aspx

 用户可以混合使用PHP和HTML编写WEB页面,当访问者浏览到该页面时,服务端会首先对页面中的PHP命令进行处理,然后把处理后的结果连同HTML内容一起传送到访问端的浏览器。

 

<?php 

$greeting = “Hello!”; 

echo $greeting; 

?> 

 

从这里可以看出,php仅仅用了一些变量循环,然后读取后台的json数据,写入前端页面。形成各种动态表单、网格等。 

 http://yardan.blog.51cto.com/304821/73264

代码
<!--index.php--> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<?php 
    
//header('Content-Type:text/html;charset:utf-8'); 
    include('function.php'); 
    
$db_sqlite=new Con_sqlite; 
    
$db=$db_sqlite->get_sqlite_con(); 
    
$sql="select * from liu"
    
$res=$db->query($sql); 
    
$arr=$res->fetchAll(SQLITE_ASSOC); 
?> 
<body> 

<h3 align="center">简单留言本</h3> 
<table align="center" width="700" bordercolor="#006666" border="1"> 
<?php 
    
foreach($arr as $row
    {
?> 
  
<tr><td>编号:<?=$row['id']?></td><td>标题:<?=$row['name'?></td><td align="right" width="50"><a href="del.php?id=<?=$row['id']?>">删除</a></td></tr>    <tr><td colspan="2" valign="top" height="50"><?=$row['content']?></td></tr> 
    
<?php 
    } 
?> 
</table> 
<h3 align="center" class="STYLE1">我要留言</h3> 
<form id="form1" name="form1" method="post" action="add.php"> 
  
<table width="700" border="1" align="center"> 
    
<tr> 
      
<td width="15%" align="right" valign="bottom">姓名:</td> 
      
<td><input name="name" type="text" size="77" /></td> 
    
</tr> 
    
<tr> 
      
<td align="right" valign="bottom">内容:</td> 
      
<td><textarea name="content" cols="60" rows="8"></textarea></td> 
    
</tr> 
    
<tr> 
      
<td> </td> 
      
<td><input type="submit" name="Submit" value="提交" /></td> 
    
</tr> 
  
</table> 
</form> 
</body>

 

 

http://www.jqueryplugins.com/

关于plugin

 

 

http://www.trirand.com/blog/jqgrid/jqgrid.html

一个基于jquery 的网格插件。

原理:前端使用了

<table id="list9"></table>
<div id="pager9"></div>

 

js使用了:

代码
jQuery("#list9").jqGrid({
       url
:'server.php?q=2&nd='+new Date().getTime(),
    datatype
: "json",
       colNames
:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
       colModel
:[
           {name
:'id',index:'id', width:55},
           {name
:'invdate',index:'invdate', width:90},
           {name
:'name',index:'name', width:100},
           {name
:'amount',index:'amount', width:80, align:"right"},
           {name
:'tax',index:'tax', width:80, align:"right"},        
           {name
:'total',index:'total', width:80,align:"right"},        
           {name
:'note',index:'note', width:150, sortable:false}        
       ]
,
       rowNum
:10,
       rowList
:[10,20,30],
       pager
: '#pager9',
       sortname
: 'id',
    recordpos
: 'left',
    viewrecords
: true,
    sortorder
: "desc",
    multiselect
: true,
    caption
: "Multi Select Example"
});
jQuery(
"#list9").jqGrid('navGrid','#pager9',{add:false,del:false,edit:false,position:'right'});
jQuery(
"#m1").click( function() {
    
var s;
    s 
= jQuery("#list9").jqGrid('getGridParam','selarrrow');
    alert(s);
});
jQuery(
"#m1s").click( function() {
    jQuery(
"#list9").jqGrid('setSelection',"13");
});

 

实际上进行了js代码绑定。 

 

小结:

------------------- 

在asp.net的思路里面,后台进行了datasource=xxx的绑定。同时可以对多个对象进行绑定,例如

string name = textbox.text; 

list.datasource = table;

textbox.text = name + 'hllo;

 

但是在jquery等js技术里面,由于回传的是自己设定的内容,因此后台方法只是:

Onrequest()

{

string name =  request["textbox"];

string response = "{gridview:sssss; textbox:dsdsdsfs}"; 

response.write(response);

return; 

 } 

 

这个就是差别。 

 

 

---------------------------

 

小结:

web开发使用jquery + plugin

信息系统开发使用extjs.(only for manager!!!! not merchant / customer...) 

 

制定统一的参数传输规范,能够让后台进行对象封装操作、对前台进行对象设置操作。 

posted @ 2010-09-24 15:20    阅读(1468)  评论(32编辑  收藏  举报
IT民工