jQuery-get函数应用

利用jQuery的get函数通过input标签元素的id将用户填写内容提交到另一个php页面，并进行数据库访问操作

Page1——subsystem.init.php，用户界面

<!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=utf-8" />  
<title>集中式空调系统在线能效检测及诊断平台-初始化</title>
<link href="http://www.cnblogs.com/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> 
<script src="http://www.cnblogs.com/lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/lib/ligerUI/js/ligerui.min.js"  type="text/javascript"></script>
<script type="text/javascript">
$(function ()
{    
    $("#btn_sure").click(function(){
            $.get(  'user.insert.php',
                    {
                        bsy_id :$("#bsy_id").val(),
                        name :$("#name").val(),        
                    },
                    function(data,textStatus){
                        if(data.length==61){ //插入成功
                                $.ligerDialog.success(data);
                            }
                        else{
                                $.ligerDialog.error(data);
                            }
                        });
        });
});
</script>
<style type="text/css">
#showbox h2{margin:5px auto;text-align:center;background-color:#D6E7FC;border:2px solid #BED5F3;width:90%;}
#showbox h2:hover{background-color:#EEF5FD;}
#info_show{margin:0 auto;width:85%;} 
#info_show table {background-color:#F5F5F5;margin:5px 0 5px 30px;border:2px solid #D9E8FB;}
#info_show table tr td{padding:5px 10px 5px 10px;}
#btn_sure{width:100px;height:30px;}
#btn_reset{width:100px;height:30px;}
.line{margin:20px auto;height:2px;background-color:#EBEBEB;}
</style>
</head>
<body>                                                                                                                                                                                                                                                                                                                   
<div id="showbox">
    <h2>子系统信息——初始化</h2>
    <div id="info_show">
    <form>
    <h3>请填写相关信息：</h3>
            <table>
                <tr>
                    <td>子系统编号： </td>
                    <td><input type='text' id='bsy_id'></input></td>
                    <td>　　 </td>
                    <td>子系统名称： </td>
                    <td><input type='text' id='name'></input></td>
                </tr>                        
                <tr>
                    <td> </td>
                    <td> </td>
                    <td> </td>
                    <td><input type="button" id="btn_sure" value="提交" class="l-button" ></input></td>
                    <td><input type="reset" id="btn_reset" value="重置" class="l-button" ></input></td>
                </tr>
                </table>                            
            </form>
        <div class="line"></div>    
    </div>     
</div>
</body>
</html>

Page2——subsystem.insert.php，数据库访问操作

<?php
/*************************************************************
 * 当插入操作成功时,执行  echo '操作成功！已添加一条新的数据！'
 * 当插入操作失败时,执行 echo '操作失败！'
 * 其他echo 语句不允许出现
 * */

$_bsy_id=_toString($_GET['bsy_id']);
$_name=_toString($_GET['name']);
_connect(); //连接数据库
$query ="insert into room_info values($_bsy_id,$_name)"; if(mysql_query($query)) echo '操作成功！已添加一条新的数据！'; else echo '操作失败！'; _close(); ?>

注：有部分格式相关页面引用未表现出来；另有函数（如_connect()）定义在项目其他页面，这里不再说明。

posted @ 2012-11-19 23:58  Joyce-Lee  阅读(207)  评论(0)  编辑  收藏  举报