関数がオブジェクト配列データを渡すとき、WEB-jsは送信の問題に入ることができません

目次

問題の原因:

フロントエンドに送信されるデータ:

問題を解決するためのアイデア

アイデアの具体的な実現

総括する

問題の原因:

WEB開発を行う際に発生する問題は
 、バックエンドから送信されたjsonデータを解析する必要がありますが、このオブジェクト配列をjs関数に渡すと、オブジェクト配列の形式でこのjson配列に別のオブジェクトがありますエラーが発生します。

フロントエンドに送信されるデータ:


[{"lat": "30.162964"、 "lng": "120.272827"、 "name": "萧山区仓库"、 "address": "临浦镇"、 "things": "块石:123.0倉庫" 、 "ckthings": "块石:45067立方米"、 "CWList":[{"cknum": "0"、 "clnum": "21"、 "CLlat": "30.070388807312316"、 "CLlng": "120.98680132382566 "}、{" cknum ":" 0 "、" clnum ":" 44 "、" CLlat ":" 29.665853864273636 "、" CLlng ":" 120.47346601010386 "}、{" cknum ":" 0 "、" clnum ": "41"、 "CLlat": "30.35209906273789"、 "CLlng": "121.06390570670683"}、{"cknum": "0"、 "clnum": "18"、 "CLlat ":" 30.18406913403903 "、" CLlng ":" 120.19047972769886 "}]}、{"lng": "0000"}、{"lat": "30.40418"、 "lng": "120.551627"、 "name": "Jiaxing Management Office Warehouse"、 "address": "Haining Yanguan Guanchao No. 1 Linjiang Road、Scenic Spot "、" things ":"鋼管(材料):56.0トン "、" ckthings ":"鋼管(材料):62.636トン "、" CWList ":[{" cknum ":" 1 " 、 "clnum": "44"、 "CLlat": "29.665853864273636"、 "CLlng": "120.47346601010386"}、{"cknum": "1"、 "clnum": "18"、 "CLlat": "30.18406913403903" 、 "CLlng": "120.19047972769886"}]}、{"lat": "30.162964"、 "lng": "120.272827"、 "name": "Xiaoshan District Warehouse"、 "address": "Linpu Town"、 "things ":"ハードハット:58.0トップ "、"ckthings ":"安全帽子:100顶 "、" CWList ": [{" cknum ":" 2 "、" clnum ":" 21 "、" CLlat ":" 30.070388807312316 "、" CLlng ":" 120.98680132382566 "}、 {"cknum": "2"、 "clnum": "41"、 "CLlat": "30.35209906273789"、 "CLlng": "121.06390570670683"}] }]

赤でマークされたデータは、処理する必要のあるデータです。

このオブジェクト配列CWListをWebページのjsカスタム関数に転送すると、エラーが発生します

たとえば、上記のCWListを以下のthelocation()関数に渡すと、関数が呼び出されたときにエラーが発生します。

function thelocation(CWList){

    、、、、、、
    、、、、、、

}

 すぐに現れた問題は次のようなものでした。

Uncaught SyntaxError:無効または予期しないトークン

パッケージを分析する理由は次のとおりです。漢字の文字列または中国語の記号が含まれている

 それから私はそれについて考えました、外層に直接二重引用符を追加することは可能ですか?

そこで、CWListのデータに二重引用符(var list = "'" + CWList [1] + "'";)を追加して試しましたが、結果は明らかに失敗です。それなら、それはクレイジーなBaiduの問題ですが、それはすべて役に立たないのです。

最後に、渡されたときにブロックされる原因となる特殊記号が含まれていないかどうかを考えたので、エスケープ文字などを検索しました。確かに、データにはいくつかの特殊文字があり、これらはに変換されます。文字列タイプ。関数を入力することはできません。その後、これらの特殊文字を処理することで目標を達成できます。

問題を解決するためのアイデア

次に、発生した問題を解決する方法を見つけるためにトランスコーディング方法を探しました(送信にURIエンコードを使用)。最初に、送信する必要のある特別な文字列(つまり、文字列タイプ)でデータをエンコードするURI URIエンコードされ、URI形式に変換されてから送信され、最後に送信機能でデコードされます。発生した問題を正常に解決しました。

アイデアの具体的な実現

前の分析は、CWListの文字データに対するエンコードおよびデコード操作にすぎず、非常に簡単になります。

送信前にデータをURI形式にエンコードします。

var valueStr = JSON.stringify(CWList);  //对象转字符串
valueStr=encodeURIComponent(valueStr);    //使用uri来传递对象数组的值

これは、最初にjson配列を文字列に変換し、次にURIエンコードメソッドを使用して目的を達成するための手順です。主にencodeURIComponent();メソッドを使用します。

送信後、データを元の形式にデコードします。

var Str = decodeURIComponent(CWList);//使用URI编码来传递数组的值

このステップではdecodeURIComponent()を使用します。このメソッドは、送信されたデータをデコードするために使用されます。

総括する

オブジェクト配列(特定の特殊文字を含むデータ)を送信する場合、文字列型で直接送信するとエラーが発生するため、特別なエンコード形式(URIエンコードを使用)で処理する必要があります。

痛みなし結果なし

 

おすすめ

転載: blog.csdn.net/weixin_45629315/article/details/109270392