Question

我的HTML代码会创建选择选项

<select name ="sortBy" id="sortBy" onchange="getValue(this)">   
    <option value=""></option>
    <option value="total">Total Medals</option>
    <option value="gold">Gold Medal</option>
    <option value="silver">Silver Medal</option>
    <option value="bronze">Bronze Medal</option>
</select>

我尝试使用Ajax从选择框中读取值

function getValue(obj){

   $("#sortBy").on( 'click', function () {
    $.ajax({
        type: 'post',
        url: 'main.php',
        data: { source1: obj.value },
        success: function( data ) {
            console.log( data );
        }
    });
});

}

我创建变量的PHP代码

$sortBy   = $_POST['source1'];
echo $sortBy;

但是我收到一条错误消息，指出source1是PHP代码中未定义的索引。我假设它没有从JS获取变量。

所有这些都在同一份文件（main.php）上。我希望PHP变量根据JS中获得的变量而改变。我怎样才能解决这个问题？谢谢我该如何解决这个问题？

Answer 1

您在使用参数getValue的功能obj和使用.on的绑定this上下文之间感到困惑

改为使用data: { source1: $( this ).val() },。

我认为getValue函数没用，因为在click事件上会调用ajax。（对于<select>，您可能更喜欢change事件）

您可以选择，使用onchange等属性绑定事件，或使用jQuery绑定。选择一个并删除另一个。

请参阅此jsFiddle，其中显示请求已正确发送。（您必须打开控制台才能显示ajax调用）。如果你的代码有问题，那就在另一个地方。

修改

错误仅仅是由于AJAX调用的PHP和HTML + jQuery代码在同一页面中。因此，加载页面会提示您POST错误，因为您不在AJAX调用中。在浏览器中加载页面将始终执行GET请求（当然不在表单提交上下文当然^^）。

要防止它只是在PHP代码中添加此测试:(此代码测试XMLHttpRequest）

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { if(isset($_POST['source1'])) { echo $_POST['source1']; } else { echo "Something went wrong, we are in AJAX call but no data given!!"; } }

Answer 2

您的代码说：当选项的值发生更改时，请在单击时添加一个事件侦听器，以执行该作业。这应该更好：

$.ready(function({

$("#sortBy").on( 'change', function () {
$.ajax({
    type: 'post',
    url: 'main.php',
    data: { source1: $("#sortBy").val() },
    success: function( data ) {
        console.log( data );
    }
});
});

});

在同一个文件中获取PHP变量中selectbox的HTML值

2 个答案: