Question

我正在尝试将一个HTML元素从ajax quire更新为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
 ?>

有人可以帮忙，谢谢

Answer 1

你的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);
}
});

Answer 2

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;

json ajax更新HTML元素无法正常工作

2 个答案: