Home Web Front-end JS Tutorial Dynamically modify the URL through JS to add, delete, check and modify the URL_javascript skills

Dynamically modify the URL through JS to add, delete, check and modify the URL_javascript skills

May 16, 2016 pm 04:38 PM
js url Revise

Although the URL can be dynamically modified by submitting the post form through get method, etc., if multiple buttons can be submitted in parallel, it will inevitably be inappropriate to write multiple forms that are roughly the same but have some differences in details. Therefore, I thought of Use JS to dynamically modify the URL to add, delete, check and modify the URL.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

<script>

 

var LG=(function(lg){

  var objURL=function(url){

    this.ourl=url||window.location.href;

    this.href="";//&#63;前面部分

    this.params={};//url参数对象

    this.jing="";//#及后面部分

    this.init();

  }

  //分析url,得到&#63;前面存入this.href,参数解析为this.params对象,#号及后面存入this.jing

  objURL.prototype.init=function(){

    var str=this.ourl;

    var index=str.indexOf("#");

    if(index>0){

      this.jing=str.substr(index);

      str=str.substring(0,index);

    }

    index=str.indexOf("&#63;");

    if(index>0){

      this.href=str.substring(0,index);

      str=str.substr(index+1);

      var parts=str.split("&");

      for(var i=0;i<parts.length;i++){

        var kv=parts[i].split("=");

        this.params[kv[0]]=kv[1];

      }

    }

    else{

      this.href=this.ourl;

      this.params={};

    }

  }

  //只是修改this.params

  objURL.prototype.set=function(key,val){

    this.params[key]=val;

  }

  //只是设置this.params

  objURL.prototype.remove=function(key){

    this.params[key]=undefined;

  }

  //根据三部分组成操作后的url

  objURL.prototype.url=function(){

    var strurl=this.href;

    var objps=[];//这里用数组组织,再做join操作

    for(var k in this.params){

      if(this.params[k]){

        objps.push(k+"="+this.params[k]);

      }

    }

    if(objps.length>0){

      strurl+="&#63;"+objps.join("&");

    }

    if(this.jing.length>0){

      strurl+=this.jing;

    }

    return strurl;

  }

  //得到参数值

  objURL.prototype.get=function(key){

    return this.params[key];

  

  lg.URL=objURL;

  return lg;

}(LG||{}));

 

    var myurl=new LG.URL(window.location.href);

    myurl.remove("b"); //删除了b

    alert(myurl.get ("a"));//取参数a的值,这里得到1

    myurl.set("a",23); //修改a的值为23

    alert (myurl.url());

</script>

Copy after login

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to change the personal name in the group on DingTalk_How to modify the personal name in the group on DingTalk How to change the personal name in the group on DingTalk_How to modify the personal name in the group on DingTalk Mar 29, 2024 pm 08:41 PM

1. First open DingTalk. 2. Open the group chat and click the three dots in the upper right corner. 3. Find my nickname in this group. 4. Click to enter to modify and save.

Why NameResolutionError(self.host, self, e) from e and how to solve it Why NameResolutionError(self.host, self, e) from e and how to solve it Mar 01, 2024 pm 01:20 PM

The reason for the error is NameResolutionError(self.host,self,e)frome, which is an exception type in the urllib3 library. The reason for this error is that DNS resolution failed, that is, the host name or IP address attempted to be resolved cannot be found. This may be caused by the entered URL address being incorrect or the DNS server being temporarily unavailable. How to solve this error There may be several ways to solve this error: Check whether the entered URL address is correct and make sure it is accessible Make sure the DNS server is available, you can try using the "ping" command on the command line to test whether the DNS server is available Try accessing the website using the IP address instead of the hostname if behind a proxy

Recommended: Excellent JS open source face detection and recognition project Recommended: Excellent JS open source face detection and recognition project Apr 03, 2024 am 11:55 AM

Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages ​​and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side

Can Douyin Blue V change its name? What are the steps to change the name of corporate Douyin Blue V account? Can Douyin Blue V change its name? What are the steps to change the name of corporate Douyin Blue V account? Mar 22, 2024 pm 12:51 PM

Douyin Blue V certification is the official certification of a company or brand on the Douyin platform, which helps enhance brand image and credibility. With the adjustment of corporate development strategy or the update of brand image, the company may want to change the name of Douyin Blue V certification. So, can Douyin Blue V change its name? The answer is yes. This article will introduce in detail the steps to modify the name of the enterprise Douyin Blue V account. 1. Can Douyin Blue V change its name? You can change the name of Douyin Blue V account. According to Douyin’s official regulations, corporate Blue V certified accounts can apply to change their account names after meeting certain conditions. Generally speaking, enterprises need to provide relevant supporting materials, such as business licenses, organization code certificates, etc., to prove the legality and necessity of changing the name. 2. What are the steps to modify the name of corporate Douyin Blue V account?

What is the difference between html and url What is the difference between html and url Mar 06, 2024 pm 03:06 PM

Differences: 1. Different definitions, url is a uniform resource locator, and html is a hypertext markup language; 2. There can be many urls in an html, but only one html page can exist in a url; 3. html refers to is a web page, and url refers to the website address.

Win10 sleep time modification tips revealed Win10 sleep time modification tips revealed Mar 08, 2024 pm 06:39 PM

Win10 Sleep Time Modification Tips Revealed As one of the currently widely used operating systems, Windows 10 has a sleep function to help users save power and protect the screen when not using the computer. However, sometimes the default sleep time does not meet the needs of users, so it is particularly important to know how to modify the Win10 sleep time. This article will reveal the tips for modifying the sleep time of Win10, allowing you to easily customize the system’s sleep settings. 1. Modify Win10 sleep time through “Settings” First, the simplest fix

How to modify the address location of published products on Xianyu How to modify the address location of published products on Xianyu Mar 28, 2024 pm 03:36 PM

When publishing products on the Xianyu platform, users can customize the geographical location information of the product according to the actual situation, so that potential buyers can more accurately grasp the specific location of the product. Once the product is successfully put on the shelves, there is no need to worry if the seller's location changes. The Xianyu platform provides a flexible and convenient modification function. So when we want to modify the address of a published product, how do we modify it? This tutorial guide will provide you with a detailed step-by-step guide. I hope it can help. Everyone! How to modify the release product address in Xianyu? 1. Open Xianyu, click on what I published, select the product, and click Edit. 2. Click the positioning icon and select the address you want to set.

The relationship between js and vue The relationship between js and vue Mar 11, 2024 pm 05:21 PM

The relationship between js and vue: 1. JS as the cornerstone of Web development; 2. The rise of Vue.js as a front-end framework; 3. The complementary relationship between JS and Vue; 4. The practical application of JS and Vue.

See all articles