2016-10-17 1 views
0

Ajax вызов базы данных mysql с использованием файла data1.php с pdo возвращает строки hmtl, которые помещаются в массив, закодирован с помощью json и отправлен в функцию ответа ajax для отображения в html. Конечно, элементы массива имеют теги и цитаты, которые трудно удалить. Самое простое и самое близкое решение - заменить кавычки в строках на javascript .replace(). Это не работает для массива массивов, за исключением ссылок на один элемент. Каким образом это происходит? Вот код.Как удалить кавычки из каждого элемента в массиве javascript, содержащем закодированные строки JSON html, возвращаемые из базы данных mysql с php

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 
} 

Функция отклика:

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 

Запрос часть 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) 
?> 

Примечание: эта база данных запрашивает локальный служил через XAMPP. Это не весь код, но все работает просто отлично, за исключением следующего:

1) data.data.replace table_2 = data.data.replace(/"/g,""); возвращает»() не является функцией, поскольку массив является не объектом строковое

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> Так что работает.

3) аналогично комментируя только в console.log(table_3); возвращается в консоли:

</table> так, что работает.

4) если комментарий в table_2 = data.data; и введите table_2 в результате консоли является:

undefined

5) попробовал этот код, чтобы удалить кавычки из массива массивов:

а) положить функции в файле инициализации js для страницы:

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

и использование этой функции в массиве данных в объекте данных t, созданный функцией обратного вызова ответа (так x = data.data)

результат не определен, и он не работает.

JSON.parse(table_1); сразу пробегает в < и не будет анализировать ни одну из строк в массиве данных (table_2 или table 3).

добавив JSON_HEX_QUOT | JSON_HEX_TAG не работал.

Предположительно, пронумеровать данные массива data.data с помощью функции .replace() и reg exp, чтобы заменить кавычки ни с чем, должно быть самым простым решением. Любые советы о том, как перебирать массив json_encoded строк html в массиве, возвращаемом в обратном вызове ajax?

ответ

0

Ничего не заменяйте.Единственное, что вам нужно, это добавить htmlspecialchars() при создании строки HTML.

<?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); 

Но есть лучший способ реализовать это. - Отправлять только данные без разметки с помощью JSON и построить разметку в JS:

<?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)) 
    ); 
} 
+0

Это сработало. Благодарю. Вместо того, чтобы тестировать .htmlspecialchars() на исходном php, переместил конструкцию формы на клиентскую сторону и построил элементы jquery dom. Добавлены операторы switch как для php, так и для javascript init, чтобы выбрать разные запросы из таблицы. –

+0

Существует некоторая глупость, чтобы заменить нулевые значения строкой в ​​запросах mysql, что, вероятно, можно было бы сделать более эффективно в функции построения строк php, но она работает. Ниже случая 0 операторов коммутатора и рабочего кода для просмотра другими. –

+0

Технически вопрос не был дан, но был предложен лучший метод. Предположительно, чтобы удалить двойные кавычки из json-данных, возвращаемых через вызов ajax, можно использовать цикл for, указанный выше, и пропустить второй размерный массив с помощью .replace(). –

0

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; 

Начальный файл Javascript, кейс 0 секция функции ответа ajax:

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; 
+0

Если вы переместите 'IFNULL()' из SQL-запроса в часть jQuery, вы также можете установить класс элемента как-то вроде «empty», поэтому нулевой placeholder может быть серого, например ... '$ table. ..append ($ ('') .addClass (r [i] .Street? 'fill': 'empty'). text (r [i] .Street || '-')) '. Также он снизит нагрузку на ваш сервер. –

+0

Да, это способ сделать это. Отлично. Спасибо, Йозеф Куфнер. –

Смежные вопросы