json ajax更新HTML元素不起作用
json ajax更新HTML元素不起作用
提问于 2016-09-05 08:57:03
我试图让一个HTML元素从ajax查询更新为PHP文件，但它不起作用。我的代码如下
<html>
<head>
<script src="jquery-3.1.0.min.js"></script>
</head>
<body>
<script>
var json = (function () {
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;
$('#demo').text(json.test1);
}
});
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
?>有人能帮帮忙吗，谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-09-05 09:10:03
你的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);
}
});Stack Overflow用户
发布于 2016-09-05 09:13:48
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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39322735
复制相关文章
相似问题
腾讯云开发者
