code-boxx · July 2, 2023 04:44
diff --git a/0-JS-QUERY-STRING.MD b/0-JS-QUERY-STRING.MD
diff --git a/1-URLSearchParams.html b/1-URLSearchParams.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>URLSearchParams Object</title>
    <script>
    // (A) URL SEARCH PARAMS OBJECT TO QUICKLY BUILD QUERY STRING
    var query = new URLSearchParams({
      name : "Jon Doe", 
      email : "jon@doe.com",
      colors : JSON.stringify(["Red", "Green", "Blue"])
    });
    query.append("KEY", "VALUE"); // to append more data

    // (B) CONVERT TO STRING, APPEND TO URL
    var url = "http://site.com/page?" + query.toString();
    console.log(url);

    // (C) WHATEVER COMES NEXT
    // window.location.href = url;
    // fetch(url).then(res=>res.text()).then(txt=>console.log(txt));
    </script>
  </head>
  <body></body>
 </html>
diff --git a/2-uri-js.html b/2-uri-js.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>URI.JS Library</title>
    <!-- CHECK https://cdnjs.com/libraries/URI.js FOR LATEST VERSION -->
    <!-- DOCS: https://medialize.github.io/URI.js/ -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.19.11/URI.min.js"></script>
    <script>
    // (A) TARGET URL
    var uri = new URI("http://site.com/page");

    // (B) SET PARAMETERS
    uri.setSearch({
      name : "Jon Doe",
      email : "jon@doe.com",
      colors : JSON.stringify(["Red", "Green", "Blue"])
    });
    uri.addSearch("KEY", "VALUE"); // to append more data

    // (C) OUTPUT ENTIRE URL STRING
    var url = uri.toString();
    console.log(url);

    // (D) WHATEVER COMES NEXT
    // window.location.href = url;
    // fetch(url).then(res=>res.text()).then(txt=>console.log(txt));
    </script>
  </head>
  <body></body>
 </html>
diff --git a/3-manual.html b/3-manual.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Manual Query String</title>
    <script>
    // (A) TARGET URL
    var url = encodeURI("http://site.com/mypage");

    // (B) APPEND DATA TO QUERY STRING
    // TAKE NOTE - ?KEY FOR FIRST PARAMETER, &KEY FOR MORE PARAMETERS
    url += "?name=" + encodeURIComponent("Jon Doe");
    url += "&email=" + encodeURIComponent("jon@doe.com");
    url += "&KEY=" + encodeURIComponent("VALUE");

    // (C) TO APPEND AN ARRAY - JSON ENCODE
    var colors = ["Red", "Green", "Blue"];
    url += "&colors=" + JSON.stringify(colors);

    // (D) FULL URL
    // http://site.com/my%20page?name=Jon%20Doe&email=jon%40doe.com&KEY=VALUE&colors=["Red","Green","Blue"]
    console.log(url);

    // (E) WHATEVER COMES NEXT
    // window.location.href = url;
    // fetch(url).then(res=>res.text()).then(txt=>console.log(txt));
    </script>
  </head>
  <body></body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>URLSearchParams Object</title>
	<script>
	// (A) URL SEARCH PARAMS OBJECT TO QUICKLY BUILD QUERY STRING
	var query = new URLSearchParams({
	name : "Jon Doe",
	email : "jon@doe.com",
	colors : JSON.stringify(["Red", "Green", "Blue"])
	});
	query.append("KEY", "VALUE"); // to append more data

	// (B) CONVERT TO STRING, APPEND TO URL
	var url = "http://site.com/page?" + query.toString();
	console.log(url);

	// (C) WHATEVER COMES NEXT
	// window.location.href = url;
	// fetch(url).then(res=>res.text()).then(txt=>console.log(txt));
	</script>
	</head>
	<body></body>
	</html>
No results found