主文件的内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test JSON</title>
<style type="text/css">
body {
margin : 100px;
}
h1 {
text-align: center;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" >
$(document).ready(function () {
$("#btn").click(getNewVal);
});
function getNewVal(){
var xhr = new XMLHttpRequest();
var queryString = "getVal.php?str=" + "Blah";
xhr.open("GET", queryString, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
//alert(document.getElementById("txtField").value);
var JSONObj = JSON.parse(xhr.responseText);
alert(JSONObj.item);
document.getElementById("txtField").value = JSONObj.item;
}
}
xhr.send(null);
}
</script>
</head>
<body>
<h1>Test JSON</h1>
<hr />
<form id="testForm" method="GET" action="">
<label>Custom Value: </label>
<input type="text" value="La valeur a changer" id="txtField">
<input type="submit" value="Bouton pour changer la valeur" id="btn">
</form>
</body>
ajax调用文件的内容
<?php
if (mysqli_connect_errno())
{
echo "Problème avec la connection : " . mysqli_connect_error();
}
else{
if(isset($_GET['str'])) {
$val = $_GET['str'];
$post_data = array('item' => $_GET['str']);
echo json_encode($post_data);
}
else{
echo "error";
}
}
?>
我想返回查询的结果并将其影响到另一个php文件中的html文本输入字段。在对JSON进行更改后,一切正常,但onreadystatechange中的document.getElementById("txtField").value = JSONObj.item;
除外。我错过了什么?
提前致谢!