javascript - 在 PHP 函数中使用表单选择值

Question

我理解 PHP 是服务器端，Javascript 是客户端。

我正在尝试使用表单选择更新屏幕上的表格(不导致重新加载)在下拉列表中更改的选定值:

            <form method="post" action="search.php" role="form">
                <div class="form-group">
                  <select name="minPrice" class="form-control" style="height:50px;" id="minPrice">
                    <option value="0">Min Price</option>
                    <option value="10000">$10,000+</option>
                    <option value="20000">$20,000+</option>
                    <option value="30000">$30,000+</option>
                    <option value="40000">$40,000+</option>
                    <option value="50000">$50,000+</option>
                    <option value="60000">$60,000+</option>
                    <option value="70000">$70,000+</option>
                    <option value="80000">$80,000+</option>
                    <option value="90000">$90,000+</option>
                    <option value="100000">$100,000+</option>
                  </select>
                </div>
            </form>

为了更新屏幕，我必须访问 PHP 中的第 3 方 API。

我在 Javascript 中使用以下函数，以便在用户在下拉列表中选择不同的值时更新搜索结果。

$("#minPrice").on("change", function(){
    updateSearchResults(this);
});

但是，当我调用 PHP 时，我无法访问所选的选项值。

所以我的问题是:

当我对服务器进行 PHP 调用而不重新加载当前页面时，有没有一种方法可以访问选定的选项值？

Answer 1

使用您更改后的选定值进行 ajax 发布:

$("#minPrice").on("change", function() {
   updateSearchResults(this);
});

function updateSearchResults(minPrice) {
    $.ajax({
        type: 'POST',
        url: 'urlToYourPhp',
        data: 'minPrice=' + minPrice.val(),
        success: function(response) {
            console.log(response);
            // Handle the response from your php without the need to reload
        },
        dataType: 'html' // or: 'json' if your API returns json
    });
}