json ajax更新HTML元素不能正常工作

我想要一個HTML元素從ajax quire更新到PHP文件，但它不工作。我的代碼如下json ajax更新HTML元素不能正常工作

<html> 
 
<head> 
 
<script src="jquery-3.1.0.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
<script> 
 
var json = (function() { 
 
\t var json = null; 
 
    $.ajax({ 
 
     url: "test.php", 
 
     dataType: "json", //the return type data is jsonn 
 
     success: function(data){ // <--- (data) is in json format 
 
     json = data.test; 
 
\t \t $('#demo').text(json.test1); 
 
\t } 
 
    }); 
 
    return json; 
 
})(); 
 
</script> 
 
<p id="demo"></p> 
 
</body> 
 
</html>

PHP代碼

<?php 
header("Content-Type: application/json"); 

$test = array(); 
$test['test1'] = '1'; 
$test['test2'] = '2'; 
$test['test3'] = '3'; 

echo json_encode($test); 
//echo nothing after this //not even html 
?>

可有人請幫忙，謝謝

來源

2016-09-05 user2669997

你的PHP腳本發送JSON對象，你可以訪問它的物業是這樣的：

$.ajax({ 
    url: "test.php", 
    dataType: "json", //the return type data is jsonn 
    success: function(data){ // <--- (data) is in json format 
    $('#demo').text(data.test1); 
} 
});

來源

2016-09-05 01:10:02

感謝這個工作，我想我不得不把它變成一個變量。 – user2669997

Javascript是問題所在。您應該將使AJAX查詢的函數綁定到DOM事件，例如按鈕單擊。

<script> 
$(document).ready(function(){ 
    $("#submit").click(function(e){ 
     e.preventDefault(); 
    $.ajax({type: "POST", 
      url: "test.php", 
      dataType: "json", 
      data: { name: $("#name").val()}, 
      success:function(data){   
       $("#demo").text(data.test1); 
      } 
    }); 
    }); 
}); 
</script> 

<input type="text" id="name" placeholder="Enter your name"> 
<button id="submit">Submit</button> 
<p id="demo"></p>

在PHP端，您可以讀取輸入：

<?php 
header("Content-Type: application/json"); 

$test = [ 
    'test1'=>1, 'test2'=>2, 'test3'=>3, 'name'=>$_POST['name'] 
]; 
echo json_encode($test); 
exit;

來源

2016-09-05 01:13:48 BeetleJuice

我不想要點擊功能，我的目標是讓ajax以設定的時間間隔更新html元素。我對此非常感興趣，所以我試圖讓這個工作，然後添加到它。 – user2669997

@ user2669997我明白了。祝你好運。 – BeetleJuice

json ajax更新HTML元素不能正常工作

回答

相關問題