JavaScript_javascript スキルを使用して JSON 形式の文字列を構築する実装手順

現在 Restful API を使用していて、Web プロジェクトを通じて JSON 形式の文字列応答を構築する必要がある場合、この記事は JavaScript を使用して JSON 形式の文字列を作成するのに役立ちます。これは非常に便利です。jQuery プラグイン $.toJSON を通じてデータ オブジェクトを json 形式に変換します。

JavaScript を使用して JSON 形式の文字列を構築する
JavaScript コード:
JavaScript コードはここに含まれています。 $(“#form”).submit(function(){}- delete_button はフォーム タグの ID です。element.val() を通じてフォーム入力ボックスの値を呼び出します。コードは次のとおりです:

コードをコピー コードは次のとおりです:

<script src="jquery.min.js" ></script>
<script src="jquery.json-2.2.js"></script>
<script src="GetPostAjax.js"></script> ;
<script type=" text/javascript">
$(document).ready(function()
{
$("#form").submit(function(e) {
e.preventDefault();
var ユーザー名,電子メール,パスワード,性別;
電子メール =$("#電子メール") ).val();
パスワード =$("#ユーザー名").val();
性別 =$("#性別").val();
if(ユーザー名.長さ>0 && email.length>0 && password.length&gt ;0 &&gender.length>0)
{
// オブジェクトの作成
var request = new Object()
var userDetails = new Object(); ;
var user = new Object( );
user.name=username;
user.password=パスワード;
user.gender=gender;
//配列プッシュ
if(website1.length>0)
websites.push(website1); >websites.push(website2);
if(website3.length>0)
websites=websites;
userDetails.user = ユーザー; request.userDetails = userDetails;
var jsonfy = $.toJSON(request);
// 特殊文字をエンコードします
var encodedata = 'jsondata=' encodeURIComponent(jsonfy);
//Ajax 呼び出し
var url='Web サイト API URL' ;
post_data(url,encodedata, function(data) {
alert("Success");
}); ;
});
</script">


HTML コード:




コードをコピーします🎜>
コードは次のとおりです。

<form method='post' action='' id='form'>
Name

<input type ='text' name='username' id='username ' /> メール <input type='text' name='email' id='email' /> 🎜><input type='text' name='password' id='password' /> 性別 <select name='gender' id='gender'><option value= '男性'>男性</option><option value='女性'>女性</option></select> ウェブサイト <input type='text' id='website1' />

<input type='text ' id='website2' />

<input type='text' id='website3' /> submit' id='submit'/>
</form>


JSON 出力




コードをコピーします
🎜>
コードは次のとおりです。


{
"userDetails":{
"user":{

"name":"Srinivas Tamada",
"メールアドレス":"srinivas@9lessons.info"、
"パスワード":"スリニバス玉田"、

"性別":"男性"、"ウェブサイト":["www.software8. co","www.heatpress123.net","www.0769zzw.com"] } } }

JSON エンコード

特殊文字の場合、次の文字がエンコードされます
:




コードをコピー


コードは次のとおりです:

, / ? : @ & = $ #
jsondata= {"userDetails":{"user":{"name":"Srinivas Tamada","email":"srinivas@9lessons.info", "パスワード":"スリニバス・タマダ","性別":"男性","ウェブサイト":["www.9lessons.info","www.egglabs.in","www.fglogin.com"]}}}
GetPostAjax.js
jqueryはここでajaxリクエストメソッドが定義されています。

コードをコピー

コードは次のとおりです:

function post_data(url,encodedata, success){
$.ajax({
type:"POST",
url:url,
data :encodedata,
dataType:"json"、
restful:true、
contentType: 'application/json'、
cache:false、
timeout:20000、
async:true、
beforeSend : function(data) { },
success:function(data){
success.call(this, data);
},
error:function(data){
alert("接続エラー");
}
});
}