Question

我有：

<tr>
    <td>Product</td>
    <!-- line below generates a select box with id="product" -->
    <td id="product"><?=$this->formSelect($form->get('product'));?></td>
</tr>
<tr>
    <td>Description</td>
    <td><input type="text" name="Description" id="Description" /></td>
</tr>
<tr>
    <td>Quantity</td>
    <td><input type="text" name="Quantity" id="Quantity" /></td>
</tr>
<tr>
    <td>Price</td>
    <td><input type="text" name="Price" id="Price" /></td>
</tr>

问题

当使用jQuery的onupdate功能时，这与更改＆＃34; product＆＃34;的值的事件有关。选择框，如何更新说明，数量和价格字段。

我现在拥有的是：

$("#product").change(function() {
    $.ajax({
        type : "POST",
        url : "updatedescription.php",
        data : 'product_id=' + $(this).val(),
        cache : false,
        success : function(html) {
            $("#Description").html(html);
        }
    });

    return false;
});

但它仅更新描述。

PHP代码

function loadDescriptionByProduct()
{
    $product = filter_var($_POST['product_id'], FILTER_SANITIZE_STRING);
    $description = $this->repository->getDescriptionByProduct($product);
    echo $description;
}

function getDescriptionByProduct(string $product)
{
    $sql = "SELECT description FROM product where product=?";
    $result = db_param_query($sql, $product);
    $row = db_fetch_array($result);
    $description = $row['description'];
    return $description;
}

Answer 1

您需要调用getProductDetails.php这样的单一资源，并获取与您想要的产品相关的所有信息。

PHP

function getProductDetails(string $product)
{
    $sql = "SELECT price, description FROM product where product=?";
    $result = db_param_query($sql, $product);
    $row = db_fetch_array($result);

    $response = array(
        'price' => $row['price'],
        'desc' => $row['description']
    );

    return json_encode($response); //return a json response.
}

的Javascript

$("#product").change(function() {
    $.ajax({
        type : "POST",
        url : "getProductDetails.php",
        data : 'product_id=' + $(this).val(),
        cache : false,
        success : function(response) {
            var parsedResponse = $.parseJSON(response);

            $("#Description").html(parsedResponse.desc);
            // ...
            $("#Price").html(parsedResponse.price);
        }
    });

    return false;
});

此外，您可以使用Content-Type: application/json响应标头，并使用dataType: 'json'参数向jQuery指示这是JSON。（并删除$.parseJSON()）

如何使用单个AJAX调用更新多个HTML表单字段？

1 个答案: