Question

由于某种原因，我提交了POST请求后，我的javascript停止了工作。

以下是发生的事情。我加载我的网页，填写表格并点击“点击我”：

enter image description here

接下来，我在警告弹出窗口中单击“确定”，将显示预期结果：

enter image description here

我填写表单，但是当我尝试点击按钮时没有任何反应！甚至不是我的警报弹出窗口。

以下是我正在使用的文件。

我的CSS，simple2.css：

    body, html {
        margin:0;
        padding;
        height:100%
    }

    a {
        font-size:1.25em;
    }

    #content {
        padding:25px;
    }

    #fade {
        display: none;
        position:absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: #ababab;
        z-index: 1001;
        -moz-opacity: 0.8;
        opacity: .70;
        filter: alpha(opacity=80);
    }

    #modal {
        display: none;
        position: absolute;
        top: 45%;
        left: 45%;
        width: 64px;
        height: 64px;
        padding:30px 15px 0px;
        border: 3px solid #ababab;
        box-shadow:1px 1px 10px #ababab;
        border-radius:20px;
        background-color: white;
        z-index: 1002;
        text-align:center;
        overflow: auto;
    }

    #results {
        font-size:1.25em;
        color:red
    }

我的HTML，simple2.html：

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
            <link rel="stylesheet" type="text/css" href="simple2.css">
            <title>simple II</title>
    </head>
    <body>
            <div id="fade"></div>
            <div id="modal"> <img id="loader" src="images/loading.gif" /> </div>
            <div id="results"><!-- Results are displayed here -->
                    <form method="post" name="start" target="_blank">
                            <p>Enter thing1: <input type="text"     id="thing1" name="thing1" size="10" /></p>
                            <p>Enter thing2: <input type="text"     id="thing2" name="thing2" size="10" /></p>
                            <p>Enter thing3: <input type="text"     id="thing3" name="thing3" size="10" /></p>
                            <p>Check thing4: <input type="checkbox" id="thing4" name="thing4" value=1>
                            <input type="hidden" id="state" name="state" value="one" /></p>
                    </form>
                    <button id='clickme' name='clickme'>Click me</button>
                    <script src="simple2.js?0000000000015"></script>
            </div>
    </body>
    </html>

我的javascript，simple2.js：

    function openModal() {
            document.getElementById('modal').style.display = 'block';
            document.getElementById('fade').style.display = 'block';
    }

    function closeModal() {
        document.getElementById('modal').style.display = 'none';
        document.getElementById('fade').style.display = 'none';
    }

    function loadAjax(url,data, app, epoch, state) {
            console.log ("loadAjax urls is [" + url + "] data is [" + data + "]" );
            // document.getElementById('results').innerHTML = '';
            console.log ("line 14");
            openModal();
            console.log ("line 16");
            var xhr = false;
            console.log ("line 18");
            if (window.XMLHttpRequest) {
                    xhr = new XMLHttpRequest();
            } else {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            if (xhr) {
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    closeModal();
                    console.log ("line 28");
                    document.getElementById("results").innerHTML = xhr.responseText;
                }
            }
            console.log ("line 32");
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send(data);
            console.log ("line 35");
        }
    }

    document.querySelector("#results button").addEventListener("click", function(e) {
            e.preventDefault();
            var inputs = document.querySelectorAll("input");
            var params = inputs[0].name + "=" + inputs[0].value;
            for( var i = 1; i < inputs.length; i++ ) {
                    var input       = inputs[i];
                    var name        = input.name;
                    var value       = input.value;

                    params +=       "&" + name + "=" + value;
            }
            alert( params );
            loadAjax( "/cgi-bin/simple2.py", encodeURI(params));
    });

...最后是我的cgi脚本，simple2.py：

    #!/usr/bin/env python

    import cgi
    import os
    #import cgitb
    import cgitb; cgitb.enable()  # for troubleshooting
    import time
    import calendar


    def goto_state_two( a, b, c, d ):
            print """
    Thank you!<br>
    <li>thing1 is [%s]
    <li>thing2 is [%s]
    <li>thing3 is [%s]
    <li>thing4 is [%s]
    <hr>
                    <form method="post" name="start" target="_blank">
                            <p>Enter thing5: <input type="text"     id="thing5" name="thing5" size="10" /></p>
                            <p>Enter thing6: <input type="text"     id="thing6" name="thing6" size="10" /></p>
                            <p>Enter thing7: <input type="text"     id="thing7" name="thing7" size="10" /></p>
                            <p>Check thing8: <input type="checkbox" id="thing8" name="thing8" value=1>
                            <input type="hidden" id="state" name="state" value="two" /></p>
                    </form>
                    <button id='clickme' name='clickme'>Click me</button>
                    <script src="simple2.js?%d"></script>
    """ % (a,b,c,d,calendar.timegm(time.gmtime()))

    def goto_done( a, b, c, d ):
            print """
    Thank you!<br>
    <li>thing1 is [%s]
    <li>thing2 is [%s]
    <li>thing3 is [%s]
    <li>thing4 is [%s]
    <hr>
                    <form method="post" name="start" target="_blank">
                            <input type="hidden" id="state" name="state" value="done" /></p>
                    </form>
                    <button id='clickme' name='clickme'>Click me</button>
                    <script src="simple2.js?%d"></script>
    """ % (a,b,c,d,calendar.timegm(time.gmtime()))


    form = cgi.FieldStorage()
    state = form.getvalue("state")

    if state == 'one' :

            thing1  = form.getvalue("thing1", "")
            thing2  = form.getvalue("thing2", "")
            thing3  = form.getvalue("thing3", "")
            thing4  = form.getvalue("thing4", "")

            goto_state_two( thing1, thing2, thing3, thing4 )

    elif state == 'two' :

            thing5  = form.getvalue("thing5", "")
            thing6  = form.getvalue("thing6", "")
            thing7  = form.getvalue("thing7", "")
            thing8  = form.getvalue("thing8", "")

            goto_done( thing5, thing6, thing7, thing8 )

    elif state == 'done' :
            print """
    Hurray you did it!<br>
    """
    else:
            print """

    unknown state [%s]
    <hr>
    """ % ( state )

Answer 1

document.getElementById("results").addEventListener("click", function(e) {
        if(e.target && e.target.nodeName == "BUTTON") {
            // Move Prevent Default into condition to allow
            // other events to bubble. 
            e.preventDefault();
            // This is a Button click we have captured
            var inputs = document.querySelectorAll("input");
            var params = inputs[0].name + "=" + inputs[0].value;
            for( var i = 1; i < inputs.length; i++ ) {
                    var input       = inputs[i];
                    var name        = input.name;
                    var value       = input.value;

                    params +=       "&" + name + "=" + value;
            }
            alert( params );
            loadAjax( "/cgi-bin/simple2.py", encodeURI(params));
       }
});

我的javascript在ajax响应后停止工作

1 个答案: