CODEWITHSUNDEEP
javascriptphpjquery
Shawn Vn
Shawn Vn

Reputation: 297

How to Change URL without refreshing the whole page


I've been searching on stackOverFlow and etc. to see is there anyway to change URL without refreshing the whole page I've found some answers but they didn't really help.
Anyway, So I want to Change a <div> content when the URL is someURL.com/?c=users&a=login. and You know it will load the functions that I've wrote.
for example look at the code below:

<?php
    require_once 'model/Muser.php';
    $class = new user();
    switch ($action){
        case 'login':
            if($_POST){
                $data=$_POST['frm'];
                $password=sha1($data['password']);
                $user=$class->select_user($data['username']);
                if($user['password']==$password){

                }
            }
        break;
        case 'logout':

        break;

    }

    require_once "view/$controller/$action.php";


So when I type someURL.com/?c=users&a=login It will load the view/users/login.php page but I want to only change the <div>'s content. I've been figured this out using jquery but I want to when user types someURL.com/?c=users&a=login the <div> content change or when clicked on some button the url and <div>'s content change.
any solution ?

Upvotes: 0

Views: 63

Answers (2)

Luciano Nascimento
Luciano Nascimento

Reputation: 74

Can you define a DIV in some are our page, index.html for example and use the Ajax to put the result into DIV.

The solution without jQuery:

const Http = new XMLHttpRequest();
const url='YOU_URL?param1=data1&param2=data2';
Http.open("GET", url);
Http.send();
Http.onreadystatechange=(e)=>{
    if (this.readyState == 4 && this.status == 200) {
        var htmlRequest = this.responseText;
        document.getElementById("DIV").innerHTML = htmlRequest;
    }
}

Upvotes: 0

Tameem Safi
Tameem Safi

Reputation: 728

You can use the window.location.search property in the browser to get the string of query params. Then you can make use of the URLSearchParams object to only get the params that you need. Based on the value you can change something on the page using jQuery.

$(document).ready(function(){
  function updateDOMBasedOnQueryParams() {
    var urlParams = new URLSearchParams(window.location.search)

    if(urlParams.get('c') === '1') {
      $('.heading').text("'c' Query param has value 1")
    }
  }

  updateDOMBasedOnQueryParams()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 class="heading">Test heading</h1>

See: https://davidwalsh.name/query-string-javascript

Upvotes: 0

Related Questions