如何外部化我的注销功能？

Question

I'm building a login portal, and the container the portal is in will be cleared and refilled with ajax. My test page looks like this:

<input type="button" id="logoutButton" onClick="Logout()" value="Logout"/>
<form id="loginForm">
    Username: <input type="text" id="username"><br>
    Password: <input type="password" id="password"><br>
    <button type="submit">Login</button>
    Login status: <div id="loginStatus">No login submitted</div>
    Logout status: <div id="logoutStatus">No logout atttempted</div>
    <br><br>
    <button type="submit">Login</button>
</form>
<script src="javascripts/logout.js"></script>

This is logout.js:

    function Logout() 
        {
        var logoutRequest = $.ajax(
            {
            url: "/api/LogOut",
            method: "POST",
            dataType: "json"
            }
        }

        logoutRequest.done(function( response ) 
        {
            $('#logoutStatus').text('Error: ' + response.error + ', Message: ' + response.message);
        });

        logoutRequest.fail(function( jqXHR, textStatus ) 
        {
            alert( "Request failed: " + textStatus );
        });
    });

I had this working when it was previously internal (alongside the login script), but I'm not terribly clear on the syntax when it comes to calling it externally. I've spent the morning looking over various examples on the web, but most examples I find are only related to basic strings.

How can I make Logout() work outside of the main html page?

Answer 1

The script tag in the html is valid. It looks like your brackets are wrong. Try this.

function Logout() {
    var logoutRequest = $.ajax({
        url: "/api/LogOut",
        method: "POST",
        dataType: "json"
    });

    logoutRequest.done(function( response ) {
        $('#logoutStatus').text('Error: ' + response.error + ', Message: ' + response.message);
    });

    logoutRequest.fail(function( jqXHR, textStatus ) {
        alert( "Request failed: " + textStatus );
    });
}