JS表單傳值與URL編碼轉(zhuǎn)換的注意事項(xiàng)有哪些

小編給大家分享一下JS表單傳值與URL編碼轉(zhuǎn)換的注意事項(xiàng)有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

專(zhuān)注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)河?xùn)|免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了近千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

JS表單傳值與URL編碼轉(zhuǎn)換詳解的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。

注意：

這里寫(xiě)了兩個(gè)網(wǎng)頁(yè)

因?yàn)閁RL傳過(guò)去的數(shù)據(jù)不支持中文字符和一些特殊符號(hào) 所以需要轉(zhuǎn)換一下編碼

實(shí)現(xiàn)效果：網(wǎng)頁(yè)1的表單數(shù)據(jù)傳到網(wǎng)頁(yè)2并顯示出來(lái)

網(wǎng)頁(yè)1代碼如下：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  <title>document</title> 
</head> 
<body> 
  <!--test_form.html為需要發(fā)送數(shù)據(jù)到的網(wǎng)頁(yè),https://idaobin.com/test/test_form.html --> 
  <!--表單數(shù)據(jù)將通過(guò)method屬性附加到 URL上--> 
  <!--submit表單提交到另一個(gè)網(wǎng)頁(yè)--> 
  <form action="test_form.html" method="GET" target="_blank"> 
    賬號(hào)：<input type="text" name="code"><br> 
    姓名：<input type="text" name="str"><br> 
    <input type="submit"> 
  </form> 
</body> 
</html>

網(wǎng)頁(yè)2代碼如下：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  <title>document</title> 
  <script type="text/javascript" src="jquery-3.2.1.js"></script> 
  <!--URL編碼轉(zhuǎn)換，只對(duì)第二個(gè)輸入框轉(zhuǎn)換--> 
  <script> 
    window.onload=function(){ 
      var a=document.getElementById("str").innerText; 
      var b=(decodeURIComponent(a)); 
      document.getElementById("str").innerText=b; 
    } 
    // 以下是jquery代碼 
    // $(function(){ 
    //   var c=$("#str").text(); 
    //   var d=(decodeURIComponent(c)); 
    //   $("#str").text(d); 
    // }); 
  </script> 
</head> 
<body> 
  <p>提交過(guò)來(lái)的數(shù)據(jù)頁(yè)面</p> 
  賬號(hào)：<span id="code"></span><br> 
  姓名：<span id="str"></span> 
</body> 
<!--獲取表單傳過(guò)來(lái)的數(shù)據(jù)--> 
<script> 
  function UrlSearch(){ 
    var name,value; 
    var str=location.href; 
    var num=str.indexOf("?"); 
    str=str.substr(num+1); 
    var arr=str.split("&"); 
    for(var i=0;i<arr.length;i++){ 
      num=arr[i].indexOf("="); 
      if(num>0){ 
        name=arr[i].substring(0,num); 
        value=arr[i].substr(num+1); 
        this[name]=value; 
      } 
    } 
  } 
  var Request=new UrlSearch(); 
  document.getElementById("code").innerHTML=Request.code; 
  document.getElementById("str").innerHTML=Request.str; 
</script> 
</html>

運(yùn)行后：

JS表單傳值與URL編碼轉(zhuǎn)換的注意事項(xiàng)有哪些

以上是“JS表單傳值與URL編碼轉(zhuǎn)換的注意事項(xiàng)有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：JS表單傳值與URL編碼轉(zhuǎn)換的注意事項(xiàng)有哪些
URL鏈接：http://bm7419.com/article30/iihjso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷(xiāo)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站排名、企業(yè)建站、網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容