Javascript Ajax Post Data

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.

Url never changes in browser.After i post data.
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.

1-Url never changes in browser.After i post data. Ans: Its an ajax requst — Deepak Ingole
– Deepak Ingole, Commented Jan 27, 2014 at 12:53
I want to use javascript or ajax etc. for posting data.What do you recommend me ? @Pilot — user3239568
– user3239568, Commented Jan 27, 2014 at 12:55

Community · Accepted Answer · 2017-05-23 12:07:33Z

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

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Jan 27, 2014 at 12:53

gpopoteur

1,51910 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user3239568 Over a year ago

What is solution ? I want to use ajax/javascript for posting data.What do you recommend ?

SergkeiM Over a year ago

HTML5 Not supported by all browser unfotruantly((

gpopoteur Over a year ago

I edited the Response, you can use HTML5 pushState, as well as hashtags. in JS you can use window.location.hash to modify the URL hashtag.

user3239568 Over a year ago

@gpopoteur If i use window.location.hash , url changes ok.But i can not go back and forward pages . Do you have solution for going back and forward ?

gpopoteur Over a year ago

@user3239568 I do believe that with window.location.hash you can go backward and forward in the history, what browser and what version of the browser are you using?

|

SergkeiM · Accepted Answer · 2014-01-27 14:12:13Z

0

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);
        }
    });
    }

you come to website example.com
If you change to example.com#profile
It will automatically run ajax function to POST data to profile.php
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!

edited Jan 27, 2014 at 14:12

answered Jan 27, 2014 at 13:09

SergkeiM

4,1886 gold badges40 silver badges74 bronze badges

1 Comment

user3239568 Over a year ago

Thanks for your all help Froxz.But i need your code according to my example code.May you please apply your codes to my codes in question ? Because i tried your code however , i can not change url and post data at the same time.

Community · Accepted Answer · 2017-05-23 12:31:08Z

0

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.
That is Ajax again. Find the follow workaround Html 5 or JS

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Jan 27, 2014 at 12:58

Amir Katz

1,0371 gold badge11 silver badges25 bronze badges

2 Comments

user3239568 Over a year ago

If i can change url , how can i go forward and go back in browser ? Is there anything to solve this problem ?

Amir Katz Over a year ago

Click on the link... Html 5 or JS

Ole Borgersen · Accepted Answer · 2014-01-27 13:10:26Z

0

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/

answered Jan 27, 2014 at 13:10

Ole Borgersen

1,1149 silver badges9 bronze badges

Collectives™ on Stack Overflow

Javascript Ajax Post Data

4 Answers 4

7 Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related