javascript - 传递/传入导致异常的 URL 字符串

Question

当我从下拉列表中选择的值中有 / 时出现异常。当用户从下拉列表中选择 Prod1/TOXS 并单击提交按钮时，它会调用 myservice.fetchData 并在其中抛出异常，因为它正在将 URL 构造为

applnURL+'/prodData/'+ Prod1/TOXS + '/productDetails.form'

演示:https://plnkr.co/edit/HOaICuMKegzn9Or489cX?p=preview

html代码:

  <select ng-model="selectedProd" ng-options="x for x in prodNames">
   </select>

js代码:

 angular.module('checkboxExample', [])
    .controller('ExampleController', ['$scope', function($scope) { 
      $scope.prodNames = ['Prod1/TOXS', 'Prod2/XYA', 'BLACK','prod3as','Prod23sd/88X'];
      $scope.submitForm = function(){
        alert("submi form" + $scope.selectedProd);
        //service call
        /*  MyService.fetchData($scope.selectedProd){
          //logic
        }*/
      }
  }]);

  //service call
           /*     myservice.fetchData = function(selectedValue){
                    var deferred = $q.defer();
                    var randomh=Math.random();
                    var urlStr = applnURL+'/prodData/'+ selectedValue + '/productDetails.form?';
                    $http.get(repUrl)
                        .then(...
                        ...*/

有什么方法可以在 URL 字符串中传递 '/'。

Answer 1

如果 Prod1/TOXS 是一个字符串的值，您必须将它放在 "" 中以防止 JavaScript 将它们解释为变量名。

此外，使用 encodeURIComponent()

对在 URL 中发送的字符串进行编码是明智的

var applnURL = "";
console.log(applnURL+'/prodData/'+ encodeURIComponent("Prod1/TOXS") + '/productDetails.form');