Question

首先关闭：我不想使用JQuery，我知道它会让它变得更容易，但它会肆虐这个东西。注意：ajaxFunction是GET / POST的默认ajax例子

现在，点击该功能后，第一次，它确实有效，并且每次运行都被php-echo取代。问题出在后面。

将initia-div（“登录位置”）更改为下一个div（“regit”）后，sregit.onClick = function（）的javascript函数不起作用。

我该如何解决这个问题？我应该用PHP创建DOMElement并使用xmlSave（“index.php”）？

初始-DIV：

<div id="login-place">
    <table id="login-init" name="login-init">
    <tr>
        <td>username</td>
        <td><input type="text" name="user" id="user" /></td>
        <td>password</td>
        <td><input type="password" name="pass" id="pass" /></td>
    </tr>
    <tr>
        <td colspan="2"><input name="login" id="login" type="button" value="entrar" /></td>
    </tr>
    </table>
</div>

JS代码：

            var slogin = document.getElementById("login");
            slogin.onclick = function() {
                //alert("inside."+user.value);
                s = "goforth=1&user="+user.value+"&pass="+pass.value;
                ajaxFunction('4',""+s); 
            }

            var sregit = document.getElementById("regit");
            sregit.onclick = function () {
                alert("inside."+user.value);
                s = "regit=1&user="+user.value+"&pass="+pass.value;
                ajaxfunction('4',""+s); 
            }
    function ajaxFunction(arg,string) {
      var getdate = new Date();  //Used to prevent caching during ajax call
      if(xmlhttp) {

          if (arg==4) {
            nextland = "login-place";
            document.getElementById("all-burps").innerHTML=string;
            xmlhttp.open("POST","session.php",true);
          }
        xmlhttp.onreadystatechange  = handleServerResponse;
        xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        if (arg==4) {
            xmlhttp.setRequestHeader('Content-length', string.length);
            xmlhttp.send(""+string); 
        }
        }
    }
function handleServerResponse() {
   if (xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
       if (nextland != "login-place") { document.getElementById(nextland).innerHTML=xmlhttp.responseText; } //Update the HTML Form element
       else {
           // alert(xmlhttp.responseText); -> this is true no error up here.
           var thediv = document.getElementById("login-init"); 
           thediv.parentNode.removeChild(thediv); //this happens fine.
           var theplace = document.getElementById("login-place");
           var thelement = document.createElement("div"); //this too.
           thelement.innerHTML=xmlhttp.responseText;  //this too'
           theplace.appendChild(thelement); //this too.

       }
     }

而且，innerhtml.responseText是=

        echo '
            <table id="login-2" name="login-2">
            <h3>o username ' . $username . ' não existe. <a href="#" id="register-link" name="register-link">Queres registar?</a></h3>
            <tr>
                <td>username</td>
                <td><input type="text" name="user" id="user" value="' . $username . '"/></td>
            <td>password</td>
                <td><input type="password" name="pass" id="pass" value="' . $password . '" /></td>
            </tr>
            <tr>
                <td colspan="2"><input type="button" value="entrar" id="regit" name="regit"/></td>
            </tr>
        </table>
        ';

我希望这足以让任何人了解我的怀疑。否则我会改写它。

Answer 1

函数中的调用不起作用ajaxfunction，而函数调用ajaxFunction - Javascript区分大小写。

此外，您需要将onclick regit函数的声明移到行handleServerResponse()之后的thelement.innerHTML=xmlhttp.responseText;函数内部，因为在调用此行之前，没有id="regit"的元素，因此该函数的绑定将不起作用。

此外，您应该使用element.onclick = function () {}终止声明为;的函数。以这种方式声明函数是一个赋值语句，因此需要使用分号来终止它。

编辑这里是你的代码重做，所以希望它做你想要的，删除一些额外的膨胀。我假设{@ 1}}，xmlhttp，nextland和user已在您尚未发布的某些代码中声明 - 是吗？

pass

Answer 2

尝试致电

“sregit.onclick = function（）{....”

在handleServerResponse（）函数中追加内容后

。当你之前调用它时，没有绑定任何操作，因为DOM中没有#regit元素。

Answer 3

修改HTML时，onClick事件会丢失。每次更换HTML或使用像onclick="something()"这样的onClick内联时，您都必须重新添加onClick事件。

您还有语法错误，您在ajaxfunction('4',""+s);中使用小写F，而该函数名为ajaxFunction。

PHP + Ajax innerHTML无法正常工作后可点击的JS函数

3 个答案: