2015-04-15 3 views
0

Кнопка должна отображать brett под именем и Австралией под страной в div с одинаковыми именами при нажатии, но я не могу заставить ее работать. Вот код: HTML с помощью сценария:AJAX с использованием JSON

<html> 
<head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> 
<script type="APPLICATION/javascript"> 
function loadJSON(){ var data_file = "data.json"; 
var http_request = new XMLHttpRequest(); 
try{ 
    // Opera 8.0+, FIREFOX, Chrome, Safari 
    http_request = new XMLHttpRequest();}catch (e){ 
    // Internet Explorer Browsers 
    try{ 
    http_request = new ActiveXObject("Msxml2.XMLHTTP"); 
    }catch (e) { 
    try{ 
     http_request = new ActiveXObject("MICROSOFT.XMLHTTP"); 
    }catch (e){ 
     // Something went wrong 
     alert("Your browser broke!"); 
     RETURN false; 
    } 
    } 
} 
http_request.onreadystatechange = function(){ 
    if (http_request.readyState == 4 ) 
    { 
    // Javascript function JSON.parse to parse JSON data 
    var jsonObj = JSON.parse(http_request.responseText); 

    // jsonObj variable now contains the data structure and can 
    // be accessed as jsonObj.name and jsonObj.country. 
    DOCUMENT.getElementById("Name").innerHTML = jsonObj.name; 
    document.getElementById("Country").innerHTML = jsonObj.country; 
     } 
    } 
    http_request.open("GET", data_file, true); 
    http_request.send(); 
} 
</script> 
<title>tutorialspoint.com JSON</title> 
</head> 
<body> 
<h1>Cricketer Details</h1> 
<table class="src"> 
<tr><th>Name</th><th>Country</th></tr> 
<tr><td><div id="Name">Sachin</div></td> 
<td><div id="Country">India</div></td></tr> 
</table> 

<div class="central"> 
<button type="button" onclick="loadJSON()">UPDATE Details </button> 
</body> 
</html> 

JSON-файл с именем data.json:

{ 
     "name": "brett", 
    "country": "Australia" 
    } 
+0

D efine "не работает". Посмотрите на инструменты разработчика вашего браузера. Посмотрите на консоль JavaScript. Сообщает ли он о каких-либо ошибках? Посмотрите вкладку «Сеть». Выполняется ли запрос? Получает ответ? Они содержат данные, которые вы ожидаете? – Quentin

ответ

0

Вы должны создать функцию json с $.getJSON(json, function(data){ метода внутри него и вызвать эту функцию с ваш <button type="button" onclick="json()">UPDATE Details </button>

Вы можете посмотреть здесь: http://www.tutorialspoint.com/jquery/ajax-jquery-getjson.htm, это помогло мне много;)

+0

да, я мог бы это сделать, но я пытаюсь изучить javascript, а не jquery – EPebassen93

+0

спасибо за ответ, хотя – EPebassen93

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