我的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!!";
}
}