javascript - 获取同一文件中 PHP 变量中选择框的 HTML 值

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 代码中 undefined index 。我认为它没有从 JS 获取变量。

所有这些都位于同一个文档(main.php)中。我希望 PHP 变量根据 JS 中获取的变量进行更改。我怎样才能解决这个问题？谢谢我该如何解决这个问题？

Answer 1

您对功能 getValue 感到困惑使用参数 obj ，以及绑定(bind) .on使用 this 的上下文

使用data: { source1: $( this ).val() },相反。

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

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

查看此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!!";
    }
}