Javascript Ajax发布数据

Question

Javascript:

    function LoginButton1OnClick() {
        $.ajax({
            type: "POST",
            url: "Login/MainPageRegister",
            cache:false,
            data:
                {
                    LoginEmailText: $("#LoginEmailText").val(),
                    LoginPasswordText: $("#LoginPasswordText").val(),
                },
            success: function (mydata) {
                $("#BodyPage").html(mydata);
            }
        });
    }

ActionResult:

 [HttpPost]
    public ActionResult MainPageRegister(MyModel model)
    {
        return View();
    }

I post data to "MainPageRegister".However there occurs 2 problems.

1. Url never changes in browser.After i post data.

2. I can not click " go back , go forward " in browser.If i refresh browser by enter "f5" , page opens previous page not current page.

Any help will be appreciated.

Answer 1

The problem is you are doing an ajax request, ajax request do not modify the browser history and therefore you cannot go back.

You can use HTML5 pushState() to make modifications to the history via JS, as well as hashtags. in JS you can use window.location.hash to modify the URL hashtag.

The first answer of this question can bring more light to the subject: Change the URL in the browser without loading the new page using JavaScript

Answer 2

1. That is Ajax my friend. Url won't change. The data will arrive as Html because you are rendering a view. You can change chunks of the page but you are not redirecting the URL.

2. That is Ajax again. Find the follow workaround Html 5 or JS

Answer 3

Quick Example to hash url

var storedHash = window.location.hash; //get hash
    if (storedHash !== '') { //if no empty
        hashChanged(storedHash);
    }
window.setInterval(function () {
        if (window.location.hash != storedHash) { //chek if curent hash not == to stored hash when page was opened
            storedHash = window.location.hash;
            hashChanged(storedHash); //if change call a funcin
        }
    }, 100); //check hash if changed

function hashChanged(storedHash) {
    var link = storedHash.substr(1, storedHash.length); //get the link
    $.ajax({
        type: "POST",
        url: link+".php", //in browser url should look like #profile so when somebody 
        cache:false,
        data:
            {
                LoginEmailText: $("#LoginEmailText").val(),
                LoginPasswordText: $("#LoginPasswordText").val(),
            },
        success: function (mydata) {
            $("#BodyPage").html(mydata);
        }
    });
    }

1. you come to website example.com
2. If you change to example.com#profile
3. It will automatically run ajax function to POST data to profile.php
4. If the # will #page it will post data to page.php and etc play around I didnt check the code but it should work run console.log() for storedHash to check how is working!

Answer 4

If you want to use ajax for posting data and you want to have support for url, you will need to design your app around this concept.

I would recommend having a look at emberjs or sammyjs. These are great frameworks for building apps around this url-state-concept.

http://sammyjs.org/ http://emberjs.com/