影响返回的PHP查询结果到HTML表单输入字段

时间:2017-06-07 16:58:11

标签: javascript php html ajax

主文件的内容

<!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;除外。我错过了什么?

提前致谢!

0 个答案:

没有答案