我的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)上。我希望根据JS中获得的变量来更改PHP变量。我怎样才能解决这个问题?谢谢
我怎样才能解决这个问题?

最佳答案

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

请改用data: { source1: $( this ).val() },

而且我认为getValue函数是无用的,因为ajax将在click事件上调用。 (对于<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!!";
    }
}

07-24 09:47
查看更多