DOM 词典练习

使用DOM技术实现如下词典功能(1.查询:根据英文单词查中文意思;2.添加:添加英文和中文单词;3.删除:根据英文或中文单词删除中英文词意;4.修改:根据英文单词修改中文注释。)

【代码如下:】

1.【words.xml】

<?xml version="1.0" encoding="UTF-8"?>
<words>    
    <word>
        <en>woman</en>
        <ch></ch>
    </word>
    <word>
        <en>man</en>
        <ch>男人</ch>
    </word>
    <word>
        <en>girl</en>
        <ch>女孩</ch>
    </word>
</words>

2.【WordView.html】

<html>
    <head>
        <title>wordQuery</title>
        <meta http-equiv="content-type" content="text/html; charset:utf-8" />
        <script language="javascript">
        
            function fun(table) {
                if(table == "tab1") {
                    tab1.style.display = "block";
                    tab2.style.display = "none";
                    tab3.style.display = "none";
                    tab4.style.display = "none";
                } else if(table  == "tab2") {
                    tab1.style.display = "none";
                    tab2.style.display = "block";
                    tab3.style.display = "none";
                    tab4.style.display = "none";
                } else if(table == "tab3") {
                    tab1.style.display = "none";
                    tab2.style.display = "none";
                    tab3.style.display = "block";
                    tab4.style.display = "none";
                } else if(table == "tab4") {
                    tab1.style.display = "none";
                    tab2.style.display = "none";
                    tab3.style.display = "none";
                    tab4.style.display = "block";
                }
            }
        
        </script>
    </head>
    <body>
        <form action="WordProcess.php" nethod="post">
            <input type="radio" name="select" onclick="fun('tab1')" /><a>查询单词</a>
            <input type="radio" name="select" onclick="fun('tab2')" /><a>添加单词</a>
            <input type="radio" name="select" onclick="fun('tab3')" /><a>删除单词</a>
            <input type="radio" name="select" onclick="fun('tab4')" /><a>修改单词</a>
        </form>
        
        <form action="WordProcess.php" method="post">
            <table id="tab1" style="display:block">
                <caption>查询单词</caption>
                <tr>
                    <td><a>请输入英文单词</a></td>
                    <td><input type="text" name="engword" /></td>
                </tr>
                <input type="hidden" name="type" value="query" />
                <tr><td colspan="2"><input type="submit" value="查询" /></td></tr>
            </table>
        </form>

        
        <form action="WordProcess.php" method="post">
            <table id="tab2" style="display:none">
                <caption>添加单词</caption>
                <tr>
                    <td><a>请输入英文单词</a></td>
                    <td><input type="text" name="enword" /></td>
                </tr>
                <tr>
                    <td><a>请输入中文单词</a></td>
                    <td><input type="text" name="chword" /></td>
                </tr>
                <input type="hidden" name="type" value="add" />
                <tr><td colspan="2"><input type="submit" value="添加" /></td></tr>
            </table>
        </form>
        
        <form action="WordProcess.php" method="post">
            <table id="tab3" style="display:none">
                <caption>删除单词</caption>
                <tr>
                    <td><a>请输入英文单词</a></td>
                    <td><input type="text" name="delEnWord" /></td>
                </tr>
                <tr>
                    <td><a>请输入中文单词</a></td>
                    <td><input type="text" name="delChWord" /></td>
                </tr>
                <input type="hidden" name="type" value="del" />
                <tr><td colspan="2"><input type="submit" value="删除" /></td></tr>
            </table>
        </form>
        
        <form action="WordProcess.php" method="post">
            <table id="tab4" style="display:none">
                <caption>修改单词</caption>
                <tr>
                    <td><a>请输入英文单词</a></td>
                    <td><input type="text" name="queryWord" /></td>
                </tr>
                <tr>
                    <td><a>请输入中文词意</a></td>
                    <td><input type="text" name="updateWord" /></td>
                </tr>
                <input type="hidden" name="type" value="update" />
                <tr><td colspan="2"><input type="submit" value="修改" /></td></tr>
            </table>
        </form>

    </body>
</html>

3.【WordProcess.php】

<?php
    header("Content-type: text/html; charset=utf-8");
    require_once 'GetWord.class.php';
    $type = $_REQUEST['type'];
        
    $xmldoc = new DOMDocument();
    $xmldoc -> load("words.xml");
    $getWord = new GetWord();

    if($type == 'query') {
        $queryWord = $_REQUEST['engword'];

        $words = $xmldoc -> getElementsByTagName('word');
        $isEnter = false;
        for($i=0; $i<$words->length; $i++) {
            $word = $words -> item($i);
            $enWord = $getWord->getNodeVal($word, 'en');
            if($queryWord == $enWord) {
                $isEnter = true;
                echo '"'.$queryWord.'" the Chinese mean:'.$getWord->getNodeVal($word,'ch');
            }
        }
        if(!$isEnter) {
            echo 'not find this words!';
        }
        echo "<br /><a href='WordView.php'>BACK</a>";

    } else if($type=='add') {
        $addEnWord = $_REQUEST['enword'];
        $addChWord = $_REQUEST['chword'];

        $words = $xmldoc ->getElementsByTagName('words')->item(0);
        $newWord = $xmldoc->createElement('word');
        $newEnWord = $xmldoc->createElement('en');
        $newEnWord->nodeValue = $addEnWord;
        $newChWord = $xmldoc->createElement('ch');
        $newChWord->nodeValue = $addChWord;

        $newWord->appendChild($newEnWord);
        $newWord->appendChild($newChWord);
        $words->appendChild($newWord);

        $saveOk = $xmldoc->save('words.xml');

        if(!$saveOk) {
            echo 'save false!';
        }else{
            echo 'save successful!';
        }
        echo "<br /><a href='WordView.php'>BACK</a>";

    } else if($type=='del') {
        $delEnWord = $_REQUEST['delEnWord'];
        $delChWord = $_REQUEST['delChWord'];

        $root = $xmldoc->getElementsByTagName('words')->item(0);
        $words = $xmldoc->getElementsByTagName('word');
        $isEnter = false;
        for($i=0; $i<$words->length; $i++) {
            $word = $words->item($i);
            $enword = $getWord->getNodeVal($word, 'en');
            $chword = $getWord->getNodeVal($word, 'ch');

            if($delEnWord == $enword || $delChWord == $chword) {
                $isEnter = true;
                $root->removeChild($word);
            }
        }
        $xmldoc->save('words.xml');
        if(!$isEnter) {
            echo '('.$delEnWord.':'.$delChWord.')not find this words,delete false!';
        } else{
            echo '('.$delEnWord.':'.$delChWord.')delete successful!';
        }
        echo "<br /><a href='WordView.php'>BACK</a>";
    } else if($type='update') {
        $queryWord = $_REQUEST['queryWord'];
        $updateWord = $_REQUEST['updateWord'];

        $root = $xmldoc->getElementsByTagName('words')->item(0);
        $words = $xmldoc->getElementsByTagName('word');
        $isEnter = false;
        for($i=0; $i<$words->length; $i++) {
            $word = $words->item($i);
            $enword = $word->getElementsByTagName('en')->item(0);
            $enwordVal = $enword->nodeValue;

            if($queryWord == $enwordVal) {
                $isEnter = true;
                $enword->parentNode->getElementsByTagName('ch')->item(0)->nodeValue = $updateWord;
            }
        }
        $xmldoc->save('words.xml');
        if(!$isEnter) {
            echo 'the English word('.$queryWord.') is not find.';
        } else {
            echo 'update seccessful!';
        }
        echo "<br /><a href='WordView.php'>BACK</a>";
    }

    // function getNodeVal($node, $tagName) {
    //     return $node -> getElementsByTagName($tagName)->item(0)->nodeValue;
    // }

?>

4.【GetWord.class.php】

<?php 

    class GetWord{
        function getNodeVal($node, $tagName) {
            return $node -> getElementsByTagName($tagName)->item(0)->nodeValue;
        }
    }

?>

 

posted @ 2014-10-26 00:52  ayee  阅读(196)  评论(0编辑  收藏  举报