JSON 인코딩 된 HTML 문자열을 포함하는 자바 스크립트 배열의 각 요소에서 PHP를 사용하여 mysql 데이터베이스에서 반환 된

Question

을 호출합니다. pdo를 사용하여 data1.php 파일을 사용하여 mysql 데이터베이스에 Ajax 호출하면 hmtl 문자열이 배열로 반환되고, json으로 인코딩되고 html로 표시하기 위해 ajax 응답 함수로 전송됩니다. 물론 배열의 요소에는 제거하기 어려운 태그와 인용문이 있습니다. 지금까지 가장 쉽고 가장 가까운 해결책은 문자열의 따옴표를 javascript .replace()로 대체하는 것입니다. 단일 요소가 참조되지 않으면 배열 배열에 대해 작동하지 않습니다. 이 주변의 방법은 무엇입니까? 여기에 코드가 있습니다.

Ajax 호출 :

function processForm_L(){ 
var topic = $("#topic").val(); 
// send data 
$.ajax({ 
    url: "../php/get_data1.php", 
    data: { 
    topic1:topic}, 
    type: 'POST', 
    dataType: 'json', 
    success: processResult_L 
}); // end .onclick 
} 

응답 기능 : get_data1.php

<?php 
$ret_s = Array();//return status 
$ret_t = Array();//return table 
$ret_d = Array();//return data 
$result = Array(); 
$row_1 = 1; 

if(!empty($_POST)){ 

    try{ 

     if(!empty($_POST)){ 
      //connect to database and insert data 
      //  include "db_connect_df.php"; 

      // select everything from the raw_data database 
      $sql = "SELECT * FROM `raw_data`"; 

     // prepare the sql statement 
     $stmt_s = $db->prepare($sql); 
     $stmt_s->execute(); 
     $result = $stmt_s->fetchAll(PDO::FETCH_ASSOC); 

     //set response variable 
     $ret_s['response'] = 1; 

     //table header 
     $ret_t['a'] ="<table id='display_table'><tr><th>ID</th><th>Organization</th><th>Contact Names</th><th>Telephone</th><th>Email</th><th>Website</th><th>Country</th><th>Region</th><th>City</th><th>Street</th><th>Unit</th><th>Postal Code</th><th>Topic</th><th>Message</th><th>Date</th></tr>"; 

     //fetch each row from database as html 
     foreach($result as $row){ 
      $ret_d[$row_1] = "<tr>" ."<td>" . $row['ID'] . "</td>" ."<td>" . 
      $row['Organization'] . "</td>" ."<td>" . $row['Telephone'] . "</td>" . "<td>" . $row['Email'] . "</td>" ."<td>" . $row['Website'] . "</td>" ."<td>" . $row['Country'] . "</td>" ."<td>" . $row['Region'] . "</td>" ."<td>" . $row['City'] . "</td>" ."<td>" . $row['Street'] . "</td>" ."<td>" . $row['Unit'] . "</td>" ."<td>" . $row['Postal_Code'] . "</td>" ."<td>" . $row['Topic'] . "</td>" ."<td>" . $row['Message'] . "</td>" ."<td>" . $row['ts'] . "</td>" ."</tr>"; 
      $row_1++; 
     } 
     // end table tag 
     $ret_t['b'] = "</table>"; 

     //echo and encode array 
     echo json_encode(array('status' => $ret_s, 'table' => $ret_t,'data'=> $ret_d),JSON_HEX_QUOT|JSON_HEX_TAG); 


     // echo json_encode(stripslashes_nested(array('status' => $ret_s, 'table' => $ret_t,'data'=> $ret_d)),JSON_HEX_QUOT|JSON_HEX_TAG); 
     }//end connect 
    }//end try 

    catch (PDOException $e) { 
     $error16 = '<span class="error_s">Try again another time.</span>'; 
     $error17 = '<span class="error_s">ERROR:' . $e->getMessage(); 
     $ret_s['response'] = 0; 
     $ret_s['error'] = $error16 . $error17; 
     echo json_encode($ret_s);  
    } //end failure 
}//end if is !empty($_POST) 
?> 

주

function processResult_L(data, textStatus){ 
    // Required Callback Function 
    if(data['status']['response'] == 1){ 
     //if(data[0] == 1){ 
     table_1 = []; 
     table_2 = []; 
     table_3 = []; 

     table_1 = data.table['a'].replace(/"/g,""); 
     table_2 = data.data.replace(/"/g,""); 
     table_3 = data.table['b'].replace(/"/g,""); 

     //table_1 = JSON.parse(data.table['a']); 
     //table_2 = JSON.parse(data.data); 
     //table_3 = JSON.parse(data.table['b']); 
     //console.log(table_1); 
     console.log(table_2); 
     //console.log(table_3); 
    }//end if response == 1 

    else if(data.response == 0){ 
     //var response = data + textStatus; 
     var table_4 = data.error; 
     $('#display').html(table_4); 
    }//end if response==0 
}//end process results 

쿼리 부분이는 로컬 호스트 데이터베이스가 XAMPP를 통해 게재 된 쿼리합니다. 이 모든 코드가 아니라 모든는 다음을 제외하고 잘 작동 : 배열 객체가 아닌 문자열

에게이기 때문에)

1) table_2 = data.data.replace(/"/g,""); 반환 'data.data.replace (함수 아니다 2) 콘솔에서 console.log(table_1); 결과 만 위의 주석 및 주석이있는 경우

<table id='display_table'><tr><th>ID</th><th>Organization</th><th>Contact Names</th><th>Telephone</th><th>Email</th><th>Website</th><th>Country</th><th>Region</th><th>City</th><th>Street</th><th>Unit</th><th>Postal Code</th><th>Topic</th><th>Message</th><th>Date</th></tr> 이렇게 작동합니다. 유사 콘솔에서만 console.log(table_3); 반환에 주석

3) :

</table>

는 그래서도 작동합니다.

4) table_2 = data.data;의 의견 및 콘솔 결과에 table_2를 입력 할 경우 :

가

A) 기능을 넣어 :

undefined

5) 배열의 배열에서 따옴표를 제거하려면이 코드를 시도 페이지의 js 초기화 파일에서 :

function replace_quotes(x){ 
for(var i=0; i < x.length; i++) { 
x[i] = x[i].toString().replace(/"/g,""); 
} 
} 

데이터 오브젝트의 데이터 배열에서 해당 함수를 사용하십시오. 응답 콜백 함수 (x = data.data)에 의해 생성 된 t는

결과는 정의되어 있지 않으며 작동하지 않습니다.

JSON.parse(table_1);은 바로 <으로 실행되고 데이터 배열의 모든 문자열 (table_2 또는 table 3)에 대해 구문 분석되지 않습니다.

JSON_HEX_QUOT | JSON_HEX_TAG이 추가되지 않았습니다.

아마도 함수를 사용하여 data.data 배열을 반복하고 .replace() 및 reg exp를 사용하여 인용 부호를 아무것도 대체하지 않는 것이 가장 쉬운 해결책이 될 것입니다. 배열에서 html 문자열의 json_encoded 배열을 반복하는 방법에 대한 정보는 ajax 콜백에서 반환됩니까?

Answer 1

아무데도 대체하지 마십시오.필요한 것은 HTML 문자열을 작성할 때 htmlspecialchars()을 추가하는 것입니다.

<?php 
// ... 
$rows = []; 
foreach ($result as $r) { 
    $rows[] = '<tr><td>'.htmlspecialchars($r['id']) 
     .'</td><td>'.htmlspecialchars($r['phone_number']) 
     .'</td></tr>'; 
} 
header('Content-Type: application/json; encoding=utf-8'); 
echo json_encode(array('table_rows' => join("\n", $rows))); 

그런 다음 JSON을 받으면 그대로 HTML에 넣으십시오.

$('table#display').html(received_data.table_rows); 

그러나 이것을 구현하는 더 좋은 방법이 있습니다. - JS 마크 업을 JSON을 통해 마크 업하지 않고 데이터 만 전송 및 구축 : 다음

<?php 
// ... 
$rows = []; 
foreach ($result as $r) { 
    $rows[] = [ 
     'id' => $r['id'], 
     'phone_number' => $r['phone_number'] 
    ]; 
} 
header('Content-Type: application/json; encoding=utf-8'); 
echo json_encode(array('table_rows' => $rows)); 

그리고 :

// ... 
for(var i = 0; i < received_data.table_rows.length; i++) { 
    var r = received_data.table_rows[i]; 
    $table.append($('<tr>') 
     .append($('td').text(r.id)) 
     .append($('td').text(r.phone_number)) 
    ); 
} 

Answer 2

PHP의 경우 0, 아약스의 드롭 다운 선택 양식 제출에서 호출 파일 :

if(!empty($_POST)){ 
//connect to database and insert data 
//  include "db_connect_df.php"; 
include "db_connect_df_test.php"; 
//switch statement for mysql queries based on dropdown selected 
switch($topic_2){ 
case "Address": 
//set response variable 
$ret_s['response'] = 0; 
// select organization address 
$sql = "SELECT IFNULL(ID, '--') AS ID, 
      IFNULL(Organization, '--') AS Organization, 
      IFNULL(Contact_Names, '--') AS Contact_Names, 
      IFNULL(City, '--') City, 
      IFNULL(Street, '--') AS Street, 
      IFNULL(Unit, '--') AS Unit, 
      IFNULL(Postal_Code, '--') AS Postal_Code, 
      IFNULL(Region, '--') AS Region, 
      IFNULL(Country, '--') AS Country, 
      IFNULL(ts, '--') AS ts 
      FROM `raw_data`"; 
// prepare the sql statement 
$stmt_s = $db->prepare($sql); 
$stmt_s->execute(); 
$result = $stmt_s->fetchAll(PDO::FETCH_ASSOC); 
// extract table rows 
foreach($result as $row){ 
$ret_d[$row_1] = [ 
     'Id'=> $row['ID'], 
     'Organization' => $row['Organization'], 
     'Contact_Names' => $row['Contact_Names'], 
     'City'=> $row['City'], 
     'Street'=> $row['Street'], 
     'Unit' => $row['Unit'], 
     'Postal_Code' => $row['Postal_Code'], 
     'Region' => $row['Region'], 
     'Country'=> $row['Country'], 
     'Date'=> $row['ts'] 
];//end load data from data base 
$row_1++; 
}//end table data as rows 
    break; 

을

자바 스크립트 초기화 파일, 아약스 응답 함수의 사례 0 섹션 :

function processResult_L(data, textStatus){ 
// Required Callback Function 
//create dom elements for table head and body 
//to check variables in dev console remove 'var'(make public) 
var $table = $("<table id='display_table'>"); 
$table.append($('<tbody>')); 
//create response array 
var response = {}; 
response = data['status']['response']; 
//create row array for building table data 
var r = []; 
switch(response){ 
case 0: /*Address case */ 
// build table header 
$table.append($('<tr>') 
    .append($('<th>').text('ID')) 
    .append($('<th>').text('Organization')) 
    .append($('<th>').text('Contact')) 
    .append($('<th>').text('City')) 
    .append($('<th>').text('Street')) 
    .append($('<th>').text('Unit')) 
    .append($('<th>').text('Post Code')) 
    .append($('<th>').text('Region')) 
    .append($('<th>').text('Country')) 
    .append($('<th>').text('Date'))); 
// build table content 
for(var i = 0; i < data.table_rows.length; i++) { 
r[i] = data.table_rows[i]; 
$table.append($('<tr>') 
    .append($('<td>').text(r[i].Id)) 
    .append($('<td>').text(r[i].Organization)) 
    .append($('<td>').text(r[i].Contact_Names)) 
    .append($('<td>').text(r[i].City)) 
    .append($('<td>').text(r[i].Street)) 
    .append($('<td>').text(r[i].Unit)) 
    .append($('<td>').text(r[i].Postal_Code)) 
    .append($('<td>').text(r[i].Region)) 
    .append($('<td>').text(r[i].Country)) 
    .append($('<td>').text(r[i].Date)) 
); // end append table content 
} // end build table content 
    break;