after login username pass to next page how

after login username pass to next page how

i have successfull login but i want pass  username to next page after login
i even use $mobilechange() function but give no results

here is my code:
login.js

    function onError(data, status)
    {
        data = $.trim(data);
        $("#message").text(data+ "item" + status);
        //$.mobile.changePage($('subproduct.html'+ username));
    }
     

   $(document).on('pageinit', function(){


                             
                             
                             
        $("#submit").click(function(){
                                   
                                   
                                   

        var formData = $("#callAjaxForm").serialize();
        var username=$("input#username").val();
        var password=$("input#password").val();
       

        $.ajax({
            type: "POST",
            url: "http://siliconsoftwares.in/store/jsonlogin.php",
            cache: false,
            data: formData,
            //data: 'username=' + username + '&password=' + password,
            success: function (data,status) {
               data = $.trim(data);
        $("#message").text(data);
            }
           
                // $("#index").trigger('pagecreate');
                // This callback function will trigger on successful action
           
           
        });
                                   
       
       

        return false;
        });
    });


loginacc.html file


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>


</head>

<body>
<div id="loginPage" data-role="page" >

<div data-role="header">
       <a data-role="button" data-rel="back" data-icon="arrow-l" data-theme="b">Back</a>
    <h1>Details</h1>
</div>

    <div data-role="content">
       

<form id="callAjaxForm">
                <div data-role="fieldcontain">
                    <label for="Username">Username</label>
                    <input type="text" name="username" id="username" value=""  />
                    <p>
 
                    <label for="password">Password</label>
                    <input type="password" name="password" id="password" value=""  />
                    </p>
                    </p>
                    <h3 id="message"></h3>
                    <button data-theme="b" id="submit" type="submit">Submit</button>
                </div>
            </form>
        </div>
        <div data-role="footer">
        <h4>Footer</h4>
        </div>
        </div>
         <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3></h3>
        </div>

        <div data-role="content">
            Here goes content
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">
            <h3>Page footer</h3>
        </div>
    </div>   
       
       
</body>
</html>