2014-09-10 4 views
1

Я посылаю Ajax запрос на URL-адрес и получить следующий ответ:Анализировать JSON и HTML данные ответа Ajax

Ajax запрос:

<div id="htmldata"></div> 
<script type="text/javascript"> 
    jQuery.ajax({ 
     type: "GET", 
     url: "http://testing.local/index.php", 
     dataType: "html", 
     success: function(response) { 
      // Parse response here ... 
     } 
    }); 
</script> 

Ответ:

<div class="dataset"> 
    <h1 class="title">List of Data</h1>        
    <table width="100%" align="center" class="datatable" > 
     <tr> 
      <td class="dataField" ><label>Data 1</label></td> 
      <td class="dataValue">Value 1</td> 
     </tr> 
     <tr> 
      <td class="dataField" ><label>Data 2</label></td> 
      <td class="dataValue">Value 2</td> 
     </tr> 
     <tr> 
      <td class="dataField" ><label>Data 3</label></td> 
      <td class="dataValue">Value 3</td> 
     </tr> 
    </table> 
</div> 

{"status":"success", "message":"Received data successfully"} 

В ответе ajax есть оба типа данных: json и html.

Поэтому я хочу сообщить сообщение об успешном или неудачном сообщении из json-данных и установить html-код в div с id «htmldata» с помощью jQuery или javascript.

+0

Эта строка json всегда находится на последней строке вашего ответа? –

+0

Да, это всегда в последней строке, но данные json могут быть разными. –

+0

var responsetext = response.split ("\ n"); alert (responsetext [responsetext.length -1]); Попробуйте это Или вы можете использовать javascripts последний индекс. –

ответ

1

сделать вас JSON объект, как это:

$form = '<div class="dataset"> 
     <h1 class="title">List of Data</h1>        
     <table width="100%" align="center" class="datatable" > 
    <tr> 
     <td class="dataField" ><label>Data 1</label></td> 
     <td class="dataValue">Value 1</td> 
    </tr> 
    <tr> 
     <td class="dataField" ><label>Data 2</label></td> 
     <td class="dataValue">Value 2</td> 
    </tr> 
    <tr> 
     <td class="dataField" ><label>Data 3</label></td> 
     <td class="dataValue">Value 3</td> 
    </tr> 
</table> 
</div>'; 

// Handle Success Message 
echo json_encode(array('status'=>'success', 
         'message'=>'Received data successfully', 
         'html'=>$form)); 
// Handle Failure Message 
/*echo json_encode(array('status'=>'fail', 
         'message'=>'Something went wrong', 
         'html'=>$form)); 
*/ 

В обоих success и fail ситуации возвращения вы форму,
Теперь Javascript Turn:

jQuery.ajax({ 
    type: "GET", 
    url: "http://testing.local/index.php", 
    dataType: "json", 
    success: function(response) { 
     console.log(response.status); 
     console.log(response.message); 
     console.log(response.html); 
    } 
}); 

это все

0

Это должен приблизить вас к тому, что вы хотите

var respJson; 
jQuery.ajax({ 
    type: "GET", 
    url : "http://testing.local/index.php" 
    dataType : "html", 
    dataFilter : function(data, type) { 
    var dara = split(data, "\n"); 
    respJson = jQuery.parseJSON(dara.pop()); 
    return join(dara); 
    }, 
    success: function(response) { 
    // respJson contains your json 
    // response is your html 
    } 
}) 

Или вы можете просто включить json в строку в заголовке ответа.

0

В парсинговой части вы можете проверить, является ли ответ json, пытаясь разобрать его и получить результаты. Если ответ не json, тогда распечатайте html-ответ. Я бы предложил вам создать определенный элемент для размещения динамического html, который поступает из вашего вызова AJAX.

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