用Ajax顯示多個值

Question

我有2分貝'srtptr'和'deskripsisrt'，我想用模態引導向他們展示 我成功地從'srtptr'展示，但我不知道如何從'deskripsisrt'展示， ..

這是我的分貝 'deskripsisrt'

+--------------+------------------+-----------+ 
| id_des |  deskripsi | id_srt | 
+--------------+------------------+-----------+ 
|  1  |  Test 4  |  4  | 
|  2  |  Test 2  |  4  | 
+--------------+------------------+-----------+ 

我想告訴我的模態多值。

莫代爾腳本：

<div class="modal fade" id="myModals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title" id="myModalLabel">Add User</h4> 
      </div> 
      <div class="modal-body" style="max-height: 600; overflow-y: scroll;"> 

       <div class="alert alert-danger" role="alert" id="removeWarning"> 
        <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> 
        <span class="sr-only">Error:</span> 
        Anda yakin ingin menghapus user ini 
       </div> 
       <br> 
       <form class="form-horizontal" id="formUser" method="post" target="blank"> 
        <input type="hidden" class="form-control" id="type" name="type"> 
        <input type="hidden" class="form-control" id="id_srt" name="id_srt"> 
        <input id="desc" value="1" type="hidden" > 

         <span style="font-weight: bold">Kepada PT</span> 
         <div class="input-group"> 
          <input type="text" class="form-control" name="tujuan_srt" id="tujuan_srt" value="" title="Tujuan Surat" placeholder="Tujuan Surat" maxlength="25" size="100"> 
         </div> 
        </br> 
         <span style="font-weight: bold">Kepada Nama</span> 
         <div class="input-group"> 
          <input type="text" class="form-control" name="kepada_srt" id="kepada_srt" value="" title="Tujuan Surat" placeholder="Tujuan Surat" maxlength="25" size="100"> 
        </div> 
        </br> 
         <span style="font-weight: bold">Tanggal</span> 
         <div class="input-group"> 
          <input type="text" name="tanggal" class="form-control" id="tanggal" value="<?php echo $fungsi->Tanggal('tgl').' '.$fungsi->Tanggal('blnL').' '.$fungsi->Tanggal('THN'); ?>" title="Tanggal Pembayaran" readonly="readonly" size="100"> 
         </div> 

        </br> 
        <div class="col-md-6 konten "></br> 
         <span style="font-weight: bold">Deskripsi</span> 
         </div> 

         <div class="col-md-6 konten " style="Text-align: Right;"></br> 
          <button type="button" onclick="tambahDesc(); return false;" style="cursor:pointer; font-size:8pt; border-radius:2px; min-width:10px; border:0px; background:#4D4D4D; color:#FFFFFF; font-weight:bold;">Tambah Deskripsi</button> 
         </div> 

      <table border="1" style="width:30%" id="test"> 
    <tr><td>deskripsi</td></tr> 
     **I WANT TO SHOW VALUE FROM DB 'deskripsisrt' HERE!!** 
       </table> 
         <div id="divDesc"> </div> 
       </br></br></br></br> 
       </form> 
       </div> 



      <div class="modal-footer"> 
       <button type="submit" id="btn1" class="btn btn-default" style="align:left">Cetak</button> 
       <button type="button" onClick="submitUser()" class="btn btn-default" data-dismiss="modal">Submit</button> 
       <button type="button" onClick="clearModals()" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 

    </div> 
</div> 

AJAX代碼：

//Show Modal 
function showModals(id_srt) 
{ 
    waitingDialog.show(); 
    clearModals(); 


    // For Execute Data (EDIT & DELETE) 
    if(id_srt) 
    { 
     $.ajax({ 
      type: "POST", 
      url: "crud.php", 
      dataType: 'json', 
      data: {id_srt:id_srt,type:"get"}, 
      success: function(res) { 
       waitingDialog.hide(); 
       setModalData(res); 
      } 
     }); 
    } 

    // FOR ADD Data 
    else 
    { 
     $("#myModals").modal("show"); 
     $("#myModalLabel").html("New User"); 
     $("#type").val("new"); 
     waitingDialog.hide(); 
    } 
} 

//Show Data On Modal For Edit 
function setModalData(data) 
{ 

    $("#myModalLabel").html(data.id_srt); 
    $("#id_srt").val(data.id_srt); 
    $("#type").val("edit"); 
    $("#tujuan_srt").val(data.tujuan_srt); 
    $("#kepada_srt").val(data.kepada_srt); 
    $("#tanggal").val(data.tanggal); 
    $("#myModals").modal("show"); 
} 


//For Execute EDIT/DELETE/ADD NEW To DB 
function submitUser() 
{ 
    var formData = $("#formUser").serialize(); 
    waitingDialog.show(); 
    $.ajax({ 
     type: "POST", 
     url: "crud.php", 
     dataType: 'json', 
     data: formData, 
     success: function(data) { 
      dTable.ajax.reload(); // Automatic Reload Table Page 
      waitingDialog.hide(); 
     } 
    }); 
} 

$('#btn1').click(function() 
{ 
    $('#formUser').attr('action','setcetak.php'); 
    $('#formUser').submit(); 
    } 
); 

//Delete Data 
function deleteUser(id_srt) 
{ 
    clearModals(); 
    $.ajax({ 
     type: "POST", 
     url: "crud.php", 
     dataType: 'json', 
     data: {id_srt:id_srt,type:"get"}, 
     success: function(data) { 
      $("#removeWarning").show(); 
      $("#myModalLabel").html("Delete User"); 
      $("#id_srt").val(data.id_srt); 
      $("#type").val("delete"); 
      $("#tujuan_srt").val(data.tujuan_srt).attr("disabled","true"); 
      $("#kepada_srt").val(data.kepada_srt).attr("disabled","true"); 
      $("#tanggal").val(data.tanggal).attr("disabled","true"); 
      $("#myModals").modal("show"); 
      waitingDialog.hide();   
     } 
    }); 
} 

//Clear Modal 
function clearModals() 
{ 
    $("#removeWarning").hide(); 
    $("#tujuan_srt").val("").removeAttr("disabled"); 
    $("#kepada_srt").val("").removeAttr("disabled"); 
    $("#tanggal").val("").removeAttr("disabled"); 

} 

// ADD Description Field 
function tambahDesc() { 
    var desc = document.getElementById("desc").value; 
    var stre; 
    stre="<div id='srow" + desc + "'><div class='col-md-12 konten' style='Text-align: Right;'></br><a href='#' style=\"color:#EC090D; cursor:pointer; text-align: Right;\" onclick='hapusElemen(\"#srow" + desc + "\"); return false;'>hapus</a><div class='input-group'><textarea rows='6' cols='100' type='text' class='desce form-control' name='deskripsi[]' placeholder='deskripsi' size='100'></textarea></br></div></div></div>"; 
    $("#divDesc").append(stre); 
    desc = (desc-1) + 1; 
    document.getElementById("desc").value = desc; 
} 

//Delete Description Field 
function hapusElemen(desc) { 
    $(desc).remove(); 
} 

$(function(id_srt) { 

    var data_table = ""; 
    $.ajax({ 
     type:"POST", 
     url: "crud.php", 
     dataType: "json", 
     data:{id_srt:id_srt,type:"getdes"}, 
     success: function(data) { 
     for (var i =0; i<data.length; i++){ 
     data_table +="<tr> <td> "+data[i].deskripsi+"</td></tr>"; 
     } 
     $('#test').append(data_table); 
     } 
    }); 
}); 

控制器代碼：

<?php 
require 'config/action.php'; 
$fungsi = new Fungsi(); 
//Connection Database 
$con = mysqli_connect("localhost","root","","kw"); 
if (mysqli_connect_errno()) 
{ 
    echo "Failed to connect to MySQL: " . mysqli_connect_error(); 
} 

switch ($_POST['type']) { 

    //Tampilkan Data 
    case "get": 

     $SQL = mysqli_query($con, "SELECT * FROM srtptr WHERE id_srt='".$_POST['id_srt']."'"); 
     $return = mysqli_fetch_array($SQL,MYSQLI_ASSOC); 
     echo json_encode($return); 
     break; 

    case "getdes": // NEW CODE This Show a table 'deskripsisrt' 

     $SQL =mysqli_query($con,"SELECT * FROM deskripsisrt WHERE id_srt = '".$_POST['id_srt']."'"); 
     while ($return = mysqli_fetch_array($SQL,MYSQLI_ASSOC)) { 
     $rows[] = $return; 
     } 
     echo json_encode($rows); 
     break; 

    //Tambah Data 
    case "new": 

     $SQL = mysqli_query($con, 
           "INSERT INTO kwitansi SET 
            kwnum='".$_POST['kwnum']."', 
            tglkw='".$_POST['tglkw']."', 
            dari='".$_POST['dari']."', 
            penerima='".$_POST['penerima']."', 
            nominal='".$_POST['nominal']."', 
            pembayaran='".$_POST['pembayaran']."' 
          "); 
     if($SQL){ 
      echo json_encode("OK"); 
     } 
     break; 

    //Edit Data 
    case "edit": 

     $SQL = mysqli_query($con, 
           "UPDATE srtptr SET 
            tujuan_srt='".$_POST['tujuan_srt']."', 
            kepada_srt='".$_POST['kepada_srt']."', 
            tanggal='".$_POST['tanggal']."' 
           WHERE id_srt='".$_POST['id_srt']."' 
          "); 
     if($SQL){ 
      echo json_encode("OK"); 
     }   
     break; 

    //Hapus Data  
    case "delete": 

     $SQL = mysqli_query($con, "DELETE FROM srtptr WHERE id_srt='".$_POST['id_srt']."'"); 
     if($SQL){ 
      echo json_encode("OK"); 
     }   
     break; 
} 
?> 

我瘦k這需要ajax上的循環，但我不知道做循環ajax。

Answer 1

假設從控制器來的JSON是這樣

[ 
    {"id_des":45,"deskripsi":"test","id_srt":2}, 
    {"id_des":46,"deskripsi":"test1","id_srt":3}, 
    {"id_des":47,"deskripsi":"test2","id_srt":4}, 
    ] 

update your function of success like this 
    success: function(data) { 

    $.each(data, function() { 
     $.each(this, function(k, v) { 
     console.log(k + " " +v); 
     }); 
    }); 
    }