手机赚钱怎么赚,给你们推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就能够日赚数百元javascript
web先后端交互php
先后端交互能够采用混合式，好比：css
<?php
//首先在这里写好相关的调用代码
function OutputTitle(){
echo 'TestPage';
}
function OutputContent(){
echo 'Hello!';
}
//而后再下面调用相关函数就能够了
?>
<!DOCTYPE html>
<html>
<head>
<title><?php OutputTitle(); ?></title>
</head>
<body>
<span><?php OutputContent(); ?></span>
</body>
</html>
示例2：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图书信息显示</title>
<link rel="stylesheet" type="text/css" href="css/font.css">
</head>
<body topmargin="0" leftmargin="0" bottommargin="0">
<table width="703" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#EF5E0F" ><table width="703" border="0" align="center" cellpadding="0" cellspacing="1">
<tr>
<td height="25" colspan="5" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="187" height="25" bgcolor="#F39A40"><div align="center">书名</div></td>
<td width="173" bgcolor="#F39A40"><div align="center">做者</div></td>
<td width="101" bgcolor="#F39A40"><div align="center">价格</div></td>
<td width="131" bgcolor="#F39A40"><div align="center">出版社</div></td>
<td width="105" bgcolor="#F39A40"><div align="center">出版时间</div></td>
</tr>
<?php
$conn=mysql_connect("localhost","root","root");
mysql_select_db("db_book",$conn);
mysql_query("set names gb2312");
$sql=mysql_query("select * from db_book order by id desc",$conn);
$info=mysql_fetch_array($sql);
if($info==false)
{
echo "暂无图书信息！";
}
else
{
do
{
?>
<tr>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[bookname];?></div></td>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[author];?></div></td>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[price];?></div></td>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[bookpublic];?></div></td>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[pubtime];?></div></td>
</tr>
<?php
}while($info=mysql_fetch_array($sql));
}
?>
</table></td>
</tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图书信息显示</title>
<link rel="stylesheet" type="text/css" href="css/font.css">
</head>
<body topmargin="0" leftmargin="0" bottommargin="0">
<table width="703" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#EF5E0F" ><table width="703" border="0" align="center" cellpadding="0" cellspacing="1">
<tr>
<td height="25" colspan="5" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="187" height="25" bgcolor="#F39A40"><div align="center">书名</div></td>
<td width="173" bgcolor="#F39A40"><div align="center">做者</div></td>
<td width="101" bgcolor="#F39A40"><div align="center">价格</div></td>
<td width="131" bgcolor="#F39A40"><div align="center">出版社</div></td>
<td width="105" bgcolor="#F39A40"><div align="center">出版时间</div></td>
</tr>
<?php
$conn=mysql_connect("localhost","root","root");
mysql_select_db("db_book",$conn);
mysql_query("set names gb2312");
$sql=mysql_query("select * from db_book order by id desc",$conn);
$info=mysql_fetch_array($sql);
if($info==false)
{
echo "暂无图书信息！";
}
else
{
do
{
?>
<tr>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[bookname];?></div></td>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[author];?></div></td>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[price];?></div></td>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[bookpublic];?></div></td>
<td height="25" bgcolor="#FFFFFF"><div align="center"><?php echo $info[pubtime];?></div></td>
</tr>
<?php
}while($info=mysql_fetch_array($sql));
}
?>
</table></td>
</tr>
</table>
</body>
</html>
还可使用模板，好比php+Smarty模板：
test1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>smarty test1</title>
</head>
<body>
它的名字叫{$name}
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>smarty test1</title>
</head>
<body>
它的名字叫{$name}
</body>
</html>
test1.php:
<?php
require './libs/Smarty.class.php';
$smarty=new Smarty();
$name='刘二狗';
$smarty->assign( 'name' , $name );
$smarty->display('./test1.html');
require './libs/Smarty.class.php';
$smarty=new Smarty();
$name='刘二狗';
$smarty->assign( 'name' , $name );
$smarty->display('./test1.html');
可是如今流行的模式是先后端分离（好比web service），后台提供http api，返回json数据供前端动态解析显示
nodejs
nodejs是用js写服务端代码的框架（功能至关于php，jsp），与php不一样，nodejs能够本身启动http服务，php要依赖apache等web服务器
NPM是随同NodeJS一块儿安装的包管理工具，能解决NodeJS代码部署上的不少问题，常见的使用场景有如下几种：html
- 容许用户从NPM服务器下载别人编写的第三方包到本地使用。
- 容许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 容许用户将本身编写的包或命令行程序上传到NPM服务器供别人使用。
mac默认安装了nodejs和npm
一个简单的后台实例，还有配套的与后台进行交互的简单网页。
页面端使用了jQuery进行控制，
后台使用nodejs做为操控语言，使用express执行网络操做
页面端使用了jQuery进行控制，
后台使用nodejs做为操控语言，使用express执行网络操做
整个工程结构以下：前端
根目录--------------
|-package.json |-test.js |-public |-main.html |-add.html
Nodejs端，名字为test.jsjava
// file name :test.js var express = require('express'); var app = express(); var bodyParse = require('body-parser') var cookieParser = require('cookie-parser') ; app.use(cookieParser()) ; app.use(bodyParse.urlencoded({extended:false})) ; // 处理根目录的get请求 app.get('/',function(req,res){ res.sendfile('public/main.html') ; console.log('main page is required '); }) ; // 处理/login的get请求 app.get('/add', function (req,res) { res.sendfile('public/add.html') ; console.log('add page is required ') ; }) ; // 处理/login的post请求 app.post('/login',function(req,res){ name=req.body.name ; pwd=req.body.pwd ; console.log(name+'--'+pwd) ; res.status(200).send(name+'--'+pwd) ; }); // 监听3000端口 var server=app.listen(3000) ;
main.html的代码以下node
<html> <link rel="stylesheet" type="text/css" href="http://fonts.useso.com/css?family=Tangerine|Inconsolata|Droid+Sans"> <style> div#test{ font-family: 'Tangerine',serif; font-size: 48px; } p#link1{ font-family: 'Tangerine',serif; } </style> <script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script> </head> <body> <div id="test"> <h1>Main Page</h1> </div> <p>Register & Login</p> <form action="test.jsp" method="post"> 帐号 : <input type="text" id="name" /> <br/><br/> 密码 : <input type="text" id="pwd" /> <br/><br/>       <div><a href="/add" id="add">EXTRA</a></div> <input type="button" value="Submit" id="x"> </form> </body> <script type="text/javascript"> var after_login=function(data,status){ if (status=='success'){ alert(data+'--'+status) ; } else alert('login refused') ; } $(document).ready(function(){ $("#x").click(function(){ var name = $("#name").val() ; var pwd = $("#pwd").val() ; $.post('http://127.0.0.1:3000/login', { name : name , pwd : pwd }, // function(data,status){ // alert(data+'--'+status) ; // } after_login ); // $.get('add',function(data,status){ // document.write(data) ; // }) ; }); }); </script> </html>
add.html的代码以下mysql
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>嘿</title> </head> <body> <h1>This is an additional web page</h1> <p>just for test</p> </body> </html>
启动项目：
cd 到项目目录，输入 node test.js，运行服务器
打开浏览器，输入127.0.0.1:3000，可获得以下页面
jquery
输入帐号和密码，能获得弹出窗口，里面是服务器的返回值
web
点击EXTRA页面，能获得二级页面