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, Jan 27 '14 at 12:53
I want to use javascript or ajax etc. for posting data.What do you recommend me ? @Pilot — user3239568, Jan 27 '14 at 12:55
@Froxz May you please tell me more about url ? Do you say i need to use a href and # code in href ? — user3239568, Jan 27 '14 at 12:58
Basically on click or on ajax u add to url #url and when it is changes u call a function to check the url and load that page. Here is some SO answers http://stackoverflow.com/questions/1822982/jquery-ajax-hash-history-and-more — Froxz, Jan 27 '14 at 13:01

score 1 · Answer 1 · edited May 23 '17 at 12:07

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 '17 at 12:07

Community

1
1

answered Jan 27 '14 at 12:53

gpopoteur

1,489
10
17

What is solution ? I want to use ajax/javascript for posting data.What do you recommend ? – user3239568 Jan 27 '14 at 12:54
HTML5 Not supported by all browser unfotruantly(( – Froxz Jan 27 '14 at 12:56
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. – gpopoteur Jan 27 '14 at 12:58
@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 ? – user3239568 Jan 27 '14 at 12:59
@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? – gpopoteur Jan 27 '14 at 13:04
Google Chrome , last version. – user3239568 Jan 27 '14 at 13:06
@user3239568 let's cover some fundamentals things first, to be able to refresh the webpage and see the latest changes you need to pass the new information from the controller to the view and then render it there. With `window.location.hash` you can go back/forward in the history of the browser, but the changes in the UI (adding or removing any data when going back) need to be handle by you in js, listening to the `hashchange` event, in jQuery you can do it like this `$(window).on('hashchange', function() { .. work .. });` – gpopoteur Jan 27 '14 at 13:17

score 0 · Answer 2 · edited May 23 '17 at 12:31

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 '17 at 12:31

Community

1
1

answered Jan 27 '14 at 12:58

Amir Katz

937
1
9
22

If i can change url , how can i go forward and go back in browser ? Is there anything to solve this problem ? – user3239568 Jan 27 '14 at 13:01
Click on the link... Html 5 or JS – Amir Katz Jan 27 '14 at 13:02

Froxz · Accepted Answer · 2014-01-27T14:12:13.510

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!

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. — user3239568, Jan 27 '14 at 14:00

score 0 · Answer 4 · answered Jan 27 '14 at 13:10

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/

Javascript Ajax Post Data

4 Answers4