Javascript 使用ajax转换旧登录

我是一名新的web开发人员，目前正在一个使用不使用任何ajax的登录系统的网站上工作，如果可能的话，我想将现有的框架转换为使用ajax。目前，它只是一个已经在调用操作的表单：

<form action="<?=$url_root?>/controllers/UserController.php" method="post" name="login_form">
<input type="hidden" name="action" value="login" />
<input type="hidden" name="path_requested" value="<? if(isset($GLOBALS['path_requested'])) { echo $GLOBALS['path_requested']; } ?>" />

<p class="field"><?if(isset($invalid)){?><span class="invalid">Invalid login! Try again.</span><?}?>E-mail:</p>
value="<? if(isset($email)) { echo $email; } ?>" />

<p class="field"> Password:</p>
<input type="password" name="password" onKeyPress="return submitenter(this,event)" tabindex="2"/>

<input class="image" type="image" src="<?=$url_root?>/style/images/img_button_submit.jpg" name="Submit" value="Submit" />


<!--<input type="submit" class="button"/>-->
</form>

HTML

<form id="login_form">

AJAX（如果路径为）

我看不出这对最终用户有什么好处。最多，它将避免在失败的登录上重新加载，但成功的登录仍然需要两个请求（一个用于验证登录，另一个用于转到main.html）。到目前为止，您所拥有的代码已关闭，您只需阻止提交事件实际提交表单，然后用更合适的内容替换警报。看起来您只剩下修改UserController以做出适当的响应。这整件事看起来只是浪费时间。
<script type="text/javascript">
    $('#login_form').submit(function() {
       checkLogin();
    });

    function checkLogin()
    {
         $.ajax({
            url: "../controllers/UserController.php",
            type: "POST",
            data: {
                email: $("#email").val(),
                password: $("#password").val()
            },
            success: function(response)
            {
                if(response == 'true')
                {
                    window.location.replace("main.html");
                }
                else
                {
                    alert('bad login');
                }
            }
        });
    }
    </script>

<form id="login_form">

$(document).ready(function() {
    $('#login_form').submit(function() {
        checkLogin();
        return false;
    });
});

url: "/example/controllers/UserController.php",