想做个jquery 实际例子的集锦。
后台采用php。但其实用其它后台语言也都是一样的。
1、ajax应用 ---- post 提交表单
(1)前台页面
<script type="text/javascript" src="/include/jquery/jquery-1.1.3.1.pack.js"></script>
<form name="form1" id="form1" action="ajax.php?action=1" method="post">
<input type="hidden" id="comid" name="comid" value="111">
<input type="hidden" id="jobid" name="jobid" value="222">
<input type="hidden" id="userid" name="userid" value="333">
<input type="submit" /></form>
<script language="javascript">
$("#form1").submit
(
function()
...{
login();
return false;
}
);
function login()
...{
var comid = $("#comid").val();
var jobid = $("#jobid").val();
var userid = $("#userid").val();
$.ajax(...{
type: "POST",
url: "../include/ajax.php",
data: "action=1" + "&comid=" + comid + "&jobid=" + jobid + "&userid=" + userid,
beforeSend: function()...{
},
success: function(msg)...{
if(msg=="success")...{
alert("求职信息,已经提交!请等候通知!")
}else ...{
alert("信息已发送,请不要重复提交!");
}
}
});
}
</script>
(2)后台页面 ajax.php
<?
header("Cache-Control: no-cache");
require_once("function.php");
switch ($_POST["action"]){
case 1:
$comid=verify_id($_POST["comid"]);
$jobid=verify_id($_POST["jobid"]);
$userid=verify_id($_POST["userid"]);
$appdate=time();
$hasapp=getValue("select * from csj_appjob where jobid=$jobid and userid=$userid and comid=$comid","id");
if($hasapp==""){
$sql="insert into csj_appjob(comid,jobid,userid,appdate) values($comid,$jobid,$userid,$appdate)";
query($sql);
echo "success";
}else{
echo "wrong";
}
break;
default:
break;
}
?>
2、动态表格 、动态表单
<script>var jobline=1;</script>
<input type="hidden" name="jobline" id="jobline" value="1">
<table width="462" border="0" cellspacing="3" cellpadding="0">
<tr>
<td width="88" class="td1">开始日期</td>
<td width="88" class="td1">结束日期</td>
<td width="117" class="td1">单位名称</td>
<td width="115" class="td1">岗位名称</td>
</tr>
<tbody id="job">
<tr id="jobline1">
<td><input type="hidden" name="jid1"><input type="text" name="brq1" ></td>
<td><input type="text" name="erq1"></td>
<td><input type="text" name="school1"></td>
<td><input type="text" name="spe1"></td>
</tr>
</tbody>
</table>
<img src="/images/member/03.jpg" id="addjobline" width="12" height="17" /> <img src="/images/member/04.jpg" id="rmjobline" width="12" height="17" />
<script type="text/javascript" src="/include/jquery/jquery-1.1.3.1.pack.js"></script>
<script language="javascript">
$("#addjobline").css("cursor","pointer");
$("#rmjobline").css("cursor","pointer");
$("#addjobline").click( function() ...{
jobline+=1;
$("#jobline").val(jobline);
var str="";
str+=<tr id="jobline+jobline+">
str+=<td><input type="text" name="brq+jobline+"></td>
str+=<td><input type="text" name="erq+jobline+"></td>
str+=<td><input type="text" name="school+jobline+"></td>
str+=<td><input type="text" name="spe+jobline+"></td>
str+=</tr>;
$("#job").append(str);
} );
$("#rmjobline").click( function() ...{
$("#jobline"+jobline).remove();
jobline-=1;
$("#jobline").val(jobline);
} );
</script>
3、输入框"获得焦点 / 点击 / 划过" 时全选
<script type="text/javascript" src="/include/jquery/jquery-1.1.3.1.pack.js"></script>
<input type="text" value="ID" id="uid" name="uid" />
<input type="password" name="upwd" value="Password" id="upwd" />
<script language="javascript">
//获得焦点,这个效果最好,点或者按tab,都可以全选
$("#upwd").focus(function()...{this.select();})
$("#uid").focus(function()...{this.select();})
//点击
$("#upwd").click(function()...{this.select();})
$("#uid").click(function()...{this.select();})
//划过全选
$("#upwd").mouseover(function()...{this.select();})
$("#uid").mouseover(function()...{this.select();})
</script>
4、ajax应用 ---- 二级联动
数据库表设计 csj_trade
id int(11) auto_increment
tname varchar(100)
tradeType int(11)