php - AJAX/Javascript 无法更新网页

Question

我写了一些ajax代码，但它没有更新网页。它应该从文件夹中获取表单并替换网页上显示的表单。然而，当我按下链接到 javascript 的按钮时，什么也没有发生。

Javascript:

function LoadManagerForm()
{
    document.getElementById('insert_response').innerHTML = "Loading..."
    nocache = Math.random()
    http.open('get', '../forms/managerform.php?nocache='+nocache);
    http.onreadystatechange = insertReply;
    http.send(null);
}
function insertReply() 
{
    if(http.readyState == 4){ 
    var response = http.responseText;
    document.getElementById('insert_response').innerHTML = response;
}

网页:

    <section class="grid col-three-quarters mq2-col-two-thirds mq3-col-full">
        <h2>Login</h2>
        <div id="insert_response">
        <p class="warning">Are you a manager? <a onclick="javascript:LoadManagerForm()" class="button" href="javascript:void(0);">Click here to login!</a></p>

        <form id="emplogin" class="contact_form" action="#" method="post" name="emplogin">  
            <ul>
                <li>
                    <label for="store">Store ID:</label>
                    <input type="text" name="store" id="store" required class="required" >
                </li>
                <li>
                    <label for="email">Email:</label>
                    <input type="email" name="email" id="email" required placeholder="JohnDoe@GMail.com" class="required email">
                </li>   
                <li>
                    <label for="password">Password:</label>
                    <input type="password" name="password" id="password" required class="required">
                </li>
                <li>
                    <button type="submit" id="submit" name="submit" class="button fright">Login</button>
                </li>   
            </ul>           
        </form>
        </div>
    </section>

Answer 1

我推荐你使用Jquery，它很简单:

将 html 包含在 head 标记内:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

然后通过以下方式更改您的 javascript 函数:

function LoadManagerForm()
{
    document.getElementById('insert_response').innerHTML = "Loading..."
    nocache = Math.random();
    $.post(
        '../forms/managerform.php?nocache='+nocache,
        {
            nocache : nocache
        },
        function(response)
        {
            document.getElementById('insert_response').innerHTML = response;
        }
    );
}