- 论坛徽章:
- 59
|
本帖最后由 renxiao2003 于 2010-10-11 22:45 编辑
16、假设数据库中有两个表table1和table2,这两个表结构相同,都有三个字段id、name和description,分别存放编号、名称和描述。
现在请做一个页面,包含两个下拉菜单,第一个下拉菜单内是table1中的name,第二个下拉菜单内是table2中的name。下拉菜单的默认值是无,当选择了table1中的任意一个name时,出现一个textarea框显示name对应的description。当选择了table2中的任意一个name时,出现一个textarea框显示name对应的description,并且保留上一个下拉菜单的值和textarea中的值。Textarea中的值可修改,需要做到修改第一个textarea的值,然后更改第二个下拉菜单的值后,第一个textarea中的修改值仍然保留。最后是一个提交按钮,只有按下提交按钮,才会把textarea中的数据才会存入数据库。如图:
默认界面:
选择第一个下拉菜单的值:
修改第一个菜单的中描述的值,然后选择第二个菜单的name值
提交后才会存入数据库:
答:文件说明:
index.php 主页面,当选择下拉列表框时,通过ajax从后台提取数据,不更新画面。
提交时检查数据是否变化,无变化不允许提交。
ajax.php 通过ajax提取数据(描述)的文件
submit.php 提交更新数据的文件
dbconn.php 连接数据库的文件
dbclose.php 关闭数据库连接文件
详细解答见附件。将附件解压到apache下。注意只有一级16目录。
ajax.php-
- <?php
- /**
- * 通过Ajax获取描述数据的文件
- */
- header('Content-Type:text/html;charset=GB2312'); //设置编码
- require_once("dbconn.php");
- $tbl = $_GET["tbl"]; //表序号,1是table1,2是table2
- $id = $_GET["id"]; //id号
- $strsql = "select description from ";
- if ($tbl == 1){
- $strsql = $strsql . "table1 ";
- }
- if ($tbl == 2){
- $strsql = $strsql ."table2 ";
- }
- $strsql = $strsql . " where id = " . $id;
- $result=mysql_db_query($mysql_database, $strsql, $conn);
- if( mysql_num_rows ($result) ){
- $row=mysql_fetch_row($result);
- echo $row[0];
- }else{
- echo "no description";
- }
- // 释放资源
- mysql_free_result($result);
- require_once("dbclose.php");
- ?>
复制代码 dbclose.php-
- <?php
- // 关闭连接
- mysql_close();
- ?>
复制代码 dbconn.php-
- <?php
- $mysql_server_name="localhost"; //数据库服务器名称(修改为自己的数据库服务器)
- $mysql_username="root"; // 连接数据库用户名(修改为自己的数据库用户名)
- $mysql_password=""; // 连接数据库密码(修改为自己的数据库密码)
- $mysql_database="wangcc"; // 数据库的名字(修改为自己的数据库名)
-
- // 连接到数据库
- $conn=mysql_connect($mysql_server_name, $mysql_username,
- $mysql_password);
- ?>
复制代码 index.php-
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=GB2312">
- <meta http-equiv="Content-Script-Type" content="text/javascript">
- <meta http-equiv="Content-Style-Type" content="text/css">
- <script type="text/javascript" language="javascript">
- /* Create a new XMLHttpRequest object to talk to the Web server */
- var xmlHttp = false;
- /*@cc_on @*/
- /*@if (@_jscript_version >= 5)
- try {
- xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
- } catch (e) {
- try {
- xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
- } catch (e2) {
- xmlHttp = false;
- }
- }
- @end @*/
- if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
- xmlHttp = new XMLHttpRequest();
- }
- function doAjax1(){
- var in1 = document.getElementById("sel1").value;
- if (in1 == "") {
- document.getElementById("div1").style.display="none";
- return ;
- }
- //if ((in1 == null)||(in1 == ""))return;alert("aa");
- var url = "http://localhost/16/ajax.php?tbl=1&id=" + escape(in1) ;
- // Open a connection to the server
- xmlHttp.open("GET", url, true);
- // Setup a function for the server to run when it's done
- xmlHttp.onreadystatechange = updatePage1;
- // Send the request
- xmlHttp.send(null);
- }
- function doAjax2(){
- var in1 = document.getElementById("sel2").value;
- if (in1 == "") {
- document.getElementById("div2").style.display="none";
- return ;
- }
- //if ((in1 == null)||(in1 == ""))return;alert("aa");
- var url = "http://localhost/16/ajax.php?tbl=2&id=" + escape(in1) ;
- // Open a connection to the server
- xmlHttp.open("GET", url, true);
- // Setup a function for the server to run when it's done
- xmlHttp.onreadystatechange = updatePage2;
- // Send the request
- xmlHttp.send(null);
- }
- function updatePage1() {
- if (xmlHttp.readyState == 4) {
- var response = xmlHttp.responseText;
- document.getElementById("div1").style.display="";
- document.getElementById("sb1").style.display="";
- document.getElementById("des1").value = response;
- document.getElementById("hdn1").value = response;
- }
- }
- function updatePage2() {
- if (xmlHttp.readyState == 4) {
- var response = xmlHttp.responseText;
- document.getElementById("div2").style.display="";
- document.getElementById("sb1").style.display="";
- document.getElementById("des2").value = response;
- document.getElementById("hdn2").value = response;
- }
- }
- /**
- * 提交前检查是否为空和是否发生变化
- */
- function check(){
- var bfirst = false; //第一个变化标志
- var bsecond = false; //第二个变化标志
- if (document.getElementById("div1").style.display == ""){ //第一个描述显示了
- if (trim(document.getElementById("des1").value) == ""){
- alert("板块描述不能为空");
- document.getElementById("des1").focus();
- return false;
- }
- if (document.getElementById("des1").value == document.getElementById("hdn1").value){ //检查板块是否变更
- bsecond = false;
- }else{
- bsecond = true;
- }
- }
- if (document.getElementById("div2").style.display == ""){ //第二个描述显示了
- if (trim(document.getElementById("des2").value) == ""){
- alert("TAG描述不能为空");
- document.getElementById("des2").focus();
- return false;
- }
- if (document.getElementById("des2").value == document.getElementById("hdn2").value){ //检查TAG是否变更
- bsecond = false;
- }else{
- bsecond = true;
- }
- }
- if ((bsecond)||(bfirst)){
- return true;
- }else{
- alert("板块和TAG描述都没有变更,不能提交!");
- return false;
- }
- }
- function trim(str){
- return str.replace(/(^\s*)|(\s*$)/g, "");
- }
- </script>
- <title>测试</title>
- </head>
- <body>
- <?php
- require_once("dbconn.php");
- ?>
- <form method="POST" action="./submit.php" onsubmit="return check();">
- <table>
- <tr>
- <td>请选择需要修改 Meta Description 的板块:</td>
- </tr>
- <tr>
- <td><select id="sel1" name="sel1" onchange="doAjax1();">
- <option value="" selected>无</option>
- <?php
- $strsql = "select id,name from table1";
- $result=mysql_db_query($mysql_database, $strsql, $conn);
- if( mysql_num_rows ($result) ){
- while ($row=mysql_fetch_row($result)){
- echo '<option value="' . $row[0] . '">' . $row[1] . '</option>';
-
- }
- }
- ?>
- </select>
- </td>
- </tr>
- <tr>
- <td><div id="div1" style="display:none">板块内容关键字:<br>
- <textarea id="des1" name="des1" rows=6 cols=60></textarea></div>
- <input type="hidden" id="hdn1" name="hdn1" >
- </td>
- </tr>
- <tr>
- <td>请选择需要修改 Meta Description 的TAG:</td>
- </tr>
- <tr>
- <td><select id="sel2" name="sel2" onchange="doAjax2();">
- <option value="" selected>无</option>
- <?php
- $strsql = "select id,name from table1";
- $result=mysql_db_query($mysql_database, $strsql . $id, $conn);
- if( mysql_num_rows ($result) ){
- while ($row=mysql_fetch_row($result)){
- echo '<option value="' . $row[0] . '">' . $row[1] . '</option>';
-
- }
- }
- ?>
- </select>
- </td>
- </tr>
- <tr>
- <td><div id="div2" style="display:none">板块内容关键字:<br>
- <textarea id="des2" name="des2" rows=6 cols=60></textarea></div>
- <input type="hidden" name="hdn2" id="hdn2" >
- </td>
- </tr>
- </table><br>
- <input type=submit value="提交" id="sb1" style="display:none">
- </form>
- <?php
- // 释放资源
- mysql_free_result($result);
- require_once("dbclose.php");
- ?>
- </body>
- </html>
复制代码 submit.php-
- <?php
- /**
- * 提交保存数据库
- */
- $id1=$_POST['sel1'];
- $id2=$_POST['sel2'];
- $desc1 = $_POST['des1']; //描述
- $desc2 = $_POST['des2'];
- $hdn1 = $_POST['hdn1']; //修改前的描述
- $hdn2 = $_POST['hdn2'];
- require_once("dbconn.php");
- if ($id1){
- if ($desc1 != $hdn1){
- $strsql = "update table1 set description = '" . $desc1 . "' where id=" . $id1;
- mysql_db_query($mysql_database, $strsql, $conn);
- }
- }
- if ($id2){
- if ($desc2 != $hdn2){
- $strsql = "update table2 set description = '" . $desc2 . "' where id=" . $id2;
- mysql_db_query($mysql_database, $strsql, $conn);
- }
- }
- echo "提交成功!<br><a href='./index.php'>返回</a>";
- require_once("dbclose.php");
- ?>
复制代码 创建表和插入数据的语句
- create database wangcc;
- use wangcc;
- create table table1(id int primary key,name varchar(20),description varchar(100));
- create table table2(id int primary key,name varchar(20),description varchar(100));
- insert into table1 values(1,'科技世界','介绍自然科技');
- insert into table1 values(2,'电脑世界','介绍电脑科技');
- insert into table2 values(1,'电脑AA世界','介绍电脑AA科技');
- insert into table2 values(2,'电脑BB世界','介绍电脑AABB科技');
复制代码 |
|