在Bootstrap模式中显示JSON数据 - AJAX

Question

Hello Sir / Maam请问有关显示从PHP到Ajax Success的JSON数据的帮助。

我的JS代码：

$(document).ready(function(){
    $('#btn-inquire-transmittal-number').click(function(){
        $inputtextval = $('#transmittal_number_inquiry').val();
        $.ajax({
            type : 'POST',
            url : 'getTransmittalNum.php', 
            data : {
                transmittal_number_inquiry : $inputtextval
            },
            dataType : 'json',
            success : function(res) {
                // Display Modal with JSON Data
            }
        });
    });
});

我的PHP代码：

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "etransmittal";

//$selectedTransmittal = $_GET['q'];
$con = mysqli_connect($servername,$username,$password,$dbname);

if(!$con){
    die("Connection failed: " . mysqli_connect_error());
}
if(isset($_POST['transmittal_number_inquiry'])){                        
    $query = "SELECT en.transid, en.transdate, CONCAT(userlist.lname, ', ', userlist.fname, ' ', userlist.mname) AS sender_name,
              userlist.`department`, en.document_number, en.`total_amount`,
              doctype.document_type, doctype.document_description, vendor.`vendor_name`, 
              en.`remarks`, en.status_id, stat.status_name 
              FROM tbl_encode_transmittal en
              LEFT JOIN tbl_vendor vendor ON vendor.`vendor_id` =  en.vendor_id
              LEFT JOIN tbl_doctype doctype ON doctype.`doc_id` = en.doctype_id
              LEFT JOIN tbl_userlist userlist ON userlist.userid = en.sender_id
              LEFT JOIN tbl_userlist userlist1 ON userlist1.userid = en.`receiver_id`
              LEFT JOIN tbl_status stat ON stat.status_id = en.status_id
              WHERE en.`transid` = '{$_POST['transmittal_number_inquiry']}'";

    $result = mysqli_query($con, $query);
    $rows = array();

    if($result){
        while($row = mysqli_fetch_assoc($result)){
            $rows[] = $row;
        }
    } else {
        echo 'MYSQL Error: ' . mysqli_error();
    }
    $json = json_encode($rows);
    echo $json;
    mysqli_close($con);
}

样本从PHP获取数据（转换为JSON）：

[{
    "transid" : "33",
    "transdate" : "2016-01-28",
    "sender_name" : "Account, Admin LPHI",
    "department" : null,
    "document_number" : "9875",
    "total_amount" : "120000",
    "document_type" : "A.S.L.",
    "document_description" : "Account Subject for Liquidation",
    "vendor_name" : "LTS SUPERMARKETS, INC.",
    "remarks" : "CS#09321, PO#78974",
    "status_id" : "1",
    "status_name" : "Pending"
}]

我想在ajax成功中的模态中显示这些数据。

我仍然在努力解决这个问题。你能解决我的问题吗？

Answer 1

您可以这样做：

$('body').append(
'<div id="myModal" class="modal fade" role="dialog">'+
'  <div class="modal-dialog">'+
'    <div class="modal-content">'+
'      <div class="modal-header">'+
'        <button type="button" class="close" data-dismiss="modal">&times;</button>'+
'        <h4 class="modal-title">Response Data</h4>'+
'      </div>'+
'      <div class="modal-body">'+
'        <p>'+
'transID: '+res[0].transid+ ', '+
'transdate: '+res[0].transdate+     ', '+
'sender_name: '+res[0].sender_name+     ', '+
//all fields here
'</p>'+
'      </div>'+
'      <div class="modal-footer">'+
'        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'+
'      </div>'+
'    </div>'+
'  </div>'+
'</div>');
$('#myModal').modal('show');

你必须通过$('#myModal').modal('show');显示模式我已添加了要检查的代码段。

$(document).ready(function() {
  $('#check').click(function() {
    $.ajax({
      type: 'GET',
      url: 'https://api.github.com/users/sohaib/repos',
      data: {},
      dataType: 'json',
      success: function(res) {
        $('#asd').append(
          '<div id="myModal" class="modal fade" role="dialog">' +
          '  <div class="modal-dialog">' +
          '    <div class="modal-content">' +
          '      <div class="modal-header">' +
          '        <button type="button" class="close" data-dismiss="modal">&times;</button>' +
          '        <h4 class="modal-title">Response Data</h4>' +
          '      </div>' +
          '      <div class="modal-body">' +
          '        <p>' +
          'transID: ' + res[0].id + ', ' +
          'transdate: ' + res[0].name + ', ' +
          //all fields here
          '</p>' +
          '      </div>' +
          '      <div class="modal-footer">' +
          '        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
          '      </div>' +
          '    </div>' +
          '  </div>' +
          '</div>');

// $('#myModal').modal('show');  this  should be 


$('body').find('#myModal').modal('show'); 
        
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="asd">
  <button id="check">
    Test
  </button>
</div>