Question

我使用这个js从我的数据库MYSQL中恢复一些数据，它运行得很好。

<script type = "text/javascript" >
$(document).ready(function() { // When the document is ready
    $("select#product1").on("change", function() { // We attach the event onchange to the select element
        var id = this.value; // retrive the product id
        $.ajax({
            url: "ajax.php", // path to myphp file which returns the price
            method: "post", // POST request 
            data: "id=" + id, // I retrieve this data in my$_POST variable in ajax.php : $_POST[id]
            success: function(response) { // The function to execute if the request is a -success-, response will be the price
                $("input#total").val(response); // Fill the price
            }
        });
    });
}); </script>

在我的输入#total中，我得到了这个值（例如）：

[{＆＃34;价格＆＃34;：＆＃34; 5＆＃34;＆＃34;时间＆＃34;：＆＃34; 10＆＃34;}]

我怎样才能得到价格值或时间价值？我搜索了一些json解析器，但是我无法将它放入我的输入中。

这是我的完整HTML

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="j_idt2">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("select#product1").on("change", function() {
                var id = this.value;
                $.ajax({
                    url: "ajax.php",
                    method: "post",
                    data: "id=" + id,
                    success: function(response) {
                        var datashow = jQuery.parseJSON(response);
                        $("input#total").val(response);
                    }
                });
            });
        });
    </script>
</head>

<body>
    <select id="product1" name="product1">
        <option value="" selected="selected">-</option>
        <option value='17'>Product1</option>
    </select>

    <input id="total" type="text" name="total" class="form-control" />

</body>

</html>

当我用$（＆＃34;输入#total＆＃34;）选择product1时，这就是我进入输入字段的内容.val（response）;

[{＆＃34;价格＆＃34;：＆＃34; 5＆＃34;＆＃34;时间＆＃34;：＆＃34; 5＆＃34;}]

当我改变这一行时：

$（＆＃34;输入＃总＆＃34）VAL（响应）;

带

$（＆＃34;输入＃总＆＃34）VAL（datashow.price）;

我什么也得不到。

我的php似乎正确渲染了我的json。看起来我的回答没有被解析或者无法以任何方式存储到var中。

Answer 1

使用jQuery.parseJson解析您的响应例如，改变你的代码，如下所示

<script type = "text/javascript" >
$(document).ready(function() { // When the document is ready
    $("select#product1").on("change", function() { // We attach the event onchange to the select element
        var id = this.value; // retrive the product id
        $.ajax({
            url: "ajax.php", // path to myphp file which returns the price
            method: "post", // POST request 
            data: "id=" + id, // I retrieve this data in my$_POST variable in ajax.php : $_POST[id]
            success: function(response) { // The function to execute if the request is a -success-, response will be the price
                      var datashow = JSON.parse(response);             
                 $("input#total").val(datashow[0].price);
            }
        });
    });
}); </script>

希望这能解决您的问题

///////////////////////尝试静态响应///////////

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="j_idt2">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var response = [{"price":"5","time":"5"}];
            $("input#total").val(response[0].price);
        });
    </script>
</head>

<body>
    <select id="product1" name="product1">
        <option value="" selected="selected">-</option>
        <option value='17'>Product1</option>
    </select>

    <input id="total" type="text" name="total" class="form-control" />

</body>

</html>

我得到了正确的结果。

Answer 2

使用JSON.parse();

success: function(response) {
            var datashow = JSON.parse(response); 
            $("input#total").val(datashow.price);
          }

如果从服务器传递Json，这必须有效。并使用您当前的代码。

如果您希望在成功获取json时自动解析json，请使用dataType: "json"设置。所以你的代码必须如下所示。

 $.ajax({
        url: "ajax.php", // path to myphp file which returns the price
        method: "post", // POST request 
        dataType: "json", // <--- setting dataType
        data: "id=" + id, // I retrieve this data in my$_POST variable in ajax.php : $_POST[id]
        success: function(response) { // The function to execute if the request is a -success-, response will be the price
            $("input#total").val(response.price); // The response would be already parsed
        }
    });

如果有帮助，请告诉我。

将json值解析为输入字段

2 个答案: