HTMLページにajaxレスポンスを表示するにはどうすればよいですか？

申し訳ありませんが長いコードですが、このコードを圧縮して同じ出力を得たい場合や、別の方法でコードを作成して同じ出力を得る方法があります。HTMLページにajaxレスポンスを表示するにはどうすればよいですか？

PHPからの応答がAJAX経由でJavascriptに渡されています。

これはresponeある：ユーザは、ID = 1のボタンをクリックすると

{"questions":{"1":"what1","2":"what2","3":"what3","4":"what4"},"option1":{"1":"A1","2":"A2","3":"A3","4":"A4"},"option2":{"1":"B1","2":"B2","3":"B3","4":"B4"},"option3":{"1":"C1","2":"C2","3":"C3","4":"C4"},"option4":{"1":"D1","2":"D2","3":"D3","4":"D4"},"correct":{"1":"1","2":"2","3":"3","4":"4"}}

次に、インデックス1の配列からのすべての値は、すべて、ユーザがID = 2のボタンをクリックすると、図示されなければなりませんインデックス2の配列からの値が表示されます。

同じロジックを使用して同じ出力を得るより良い方法はありますか？いいえの場合、このコードを圧縮するにはどうすればよいですか？

事前に感謝を助けてください:)

$.ajax({ 
url: "index.php", 
type: "POST", 
dataType: "json", 
success: On_success, 
error: On_error 
}); 

function On_success(response){ 

for (var x = 1; x <= 4; x++){ 

    $("#que" + x).html(response.questions[x]); 

    for (var y = 1; y <= 4; y++) { 
     $("#op" + x + y).html(response["option" + y][x]); 
    } 

    //$("#cor" + x).html(response.correct[x]); 
    } 

} 
function On_error(data){ 
    console.log(data); 
} 

function click(){ 

$(document).ready(function(){ 
    $("#pag" + this.dataset.section).show(); 
}); 

} 

$(document).ready(function(){ 

$("#pag2").hide(); 
$("#pag3").hide(); 
$("#pag4").hide(); 

$("#1").click(click); 
$("#2").click(click); 
$("#3").click(click); 
$("#4").click(click); 
}); 

<body> 

<div id="pag1"> 
<p id="que1"></p> 
<p id="op11"></p> 
<p id="op12"></p> 
<p id="op13"></p> 
<p id="op14"></p> 
<p id="cor1"></p> 
</div> 

<div id="pag2"> 
<p id="que2"></p> 
<p id="op21"></p> 
<p id="op22"></p> 
<p id="op23"></p> 
<p id="op24"></p> 
<p id="cor2"></p> 
</div> 

<div id="pag3"> 
<p id="que3"></p> 
<p id="op31"></p> 
<p id="op32"></p> 
<p id="op33"></p> 
<p id="op34"></p> 
<p id="cor3"></p> 
</div> 

<div id="pag4"> 
<p id="que4"></p> 
<p id="op41"></p> 
<p id="op42"></p> 
<p id="op43"></p> 
<p id="op44"></p> 
<p id="cor4"></p> 
</div> 

<ul class="pagination"> 
<li><button id="1" data-section="1">1</button></li> 
<li><button id="2" data-section="2">2</button></li> 
<li><button id="3" data-section="3">3</button></li> 
    <li><button id="4" data-section="4">4</button></li> 
</ul> 

</body>

出典

2016-08-28 Ankit

あなたがHTMLを注入するためにループを使用することができます。

for (var x = 1; x <= 4; x++) { 
    $("#que" + x).html(response.questions[x]); 
    for (var y = 1; y <= 4; y++) { 
    $("#op" + x + y).html(response["option" + y][x]); 
    } 
    $("#cor" + x).html(response.correct[x]); 
}

そして、それぞれのボタンに微調整して、より一般的なクリックハンドラ：

<button id="1" data-section="1"></button> 

function click(){ 
    $("#pag1").hide(); 
    $("#pag2").hide(); 
    $("#pag3").hide(); 
    $("#pag4").hide(); 

    $("#pag" + this.dataset.section).show(); 

    // this could be made more efficient by not hiding the relevant section but just showing it, but may not make much difference. 
} 

$("#1").click(click); $("#2").click(click); $("#3").click(click); $("#4").click(click);

出典

2016-08-28 10:29:46 Whothehellisthat

ループが動作しています....ボタンがクリックされていません – Ankit

そして、各ボタンに属性を追加しましたか？私はあなたのコードを見ることができ、遊びをすることができるようにjsFiddleを持っていますか？ – Whothehellisthat

私は自分の質問を編集しました。 – Ankit

次のonSuccessハンドラを使用できます。これは少なくとも、ハンドラの可読性と拡張性を改善します。

function on_Success(response) { 
    for (let type in response) { 
    for (let nr in response[type]) { 
     let id; 
     let m = type.match(/(questions|option|correct)(\d?)/); 
     switch (m[1]) { 
     case "questions":   
      id = "que"+nr; 
      break; 
     case "correct": 
      id = "cor"+nr; 
      break; 
     case "option": 
      id = "op"+m[2]+nr; 
      break; 
     } 
    document.getElementById(id).innerHTML = response[type][nr]; 
    // console.log(id, response[type][nr]); 
    } 
    } 
}

出典

2016-08-28 10:37:24 rplantiko

HTMLページにajaxレスポンスを表示するにはどうすればよいですか？

答えて

関連する問題