【问题标题】:Dropdown value onchange to PHP下拉值 onchange 到 PHP
【发布时间】:2013-06-29 15:26:36
【问题描述】:

我正在尝试将更改下拉列表的值发送到 php 脚本。但是以我解决问题的方式,表单和状态字符串被发布了两次。一次带有 GET 参数集,另一次没有。我不知道怎么解决,但也许你比我聪明。

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.ennui.contentslider.js"></script>
<script type="text/javascript">
function showUser()
{
var users = document.getElementById('users').value;

if (users=="" )
{
document.getElementById("pictab").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","slider.php?users="+users,true);
xmlhttp.send();
xmlhttp.reload();
}

<?php 
//.............
//..............
//.............
//..............
$soso = mysql_num_rows($connn3);
for($i=0;$i<$soso;$i++)
{
echo "
$(function() {
$('#one$i').ContentSlider({
width : '280px',
height : '180px',
speed : 400,
easing : 'easeOutQuad'
});
});";
}
?>

</script>
<!-- Site JavaScript -->
<form>
<select id="users" name="users" onChange="showUser()" >
<option value="bikes">Bikes</option>
<option value="zub">Stuff/option>
<option value="sonst">Other</option>

</select>
</form>
<br>
<div id="txtHint"></div>
<?php 


if(isset($_GET['users'])){
echo "<h2>Q posted</h2>";
$q = $_GET['users'];
echo $q;
//DB QUERY WITH Q

}elseif(!isset($q)){
echo "KEIN Q GEPOSTET";
// DB QUERY WITHOUT Q
}
?>

【问题讨论】:

  • xmlhttp.reload() 应该做什么?我找不到该方法的文档。
  • 你为什么不想使用jquery?
  • 如果你使用 jQuery,为什么不使用它的 AJAX 方法而不是写出所有 XMLHTTP 的东西呢?
  • 请使用适当的缩进来增加可读性。你应该使用encodeURIComponent 来编码GET 参数。并使用htmlspecialchars 来防止XSS。

标签: php ajax drop-down-menu onchange


【解决方案1】:

您已将 Jquery 包含到您的项目中,因此请使用它的功能。主要是Jquery Ajax 处理Ajax 请求。

$(function (){ //document is loaded so we can bind events

  $("#users").change(function (){ //change event for select
     $.ajax({  //ajax call
        type: "POST",      //method == POST 
        url: "slider.php", //url to be called
       data: { users:  $("#users option:selected").val()} //data to be send 
     }).done(function( msg ) { //called when request is successful msg
       //do something with msg which is response
             $("#txtHint").html(msg); //this line will put the response to item with id `#txtHint`.
     });
   });
 });

代码的php部分应该在slider.php中。此外,在示例中,我使用 POST,但如果您想要 GET,只需更改 type: "GET"。在 script.php 中获取它的价值:

$_POST['users']; 或者如果您将类型更改为 GET 然后$_GET['users'] 您也可以使用处理 POST、GET、COOKIE 的$_REQUEST['users']

【讨论】:

  • 我不推荐使用$_REQUEST - 使用起来不是很安全。改为使用每个单独的超全局变量
  • @Bojangles 这是一种不推荐的可能性:) 但我同意你的看法
【解决方案2】:

我认为这是因为您实际上打了 2 个电话。一个在 Javascript 中到 PHP 文件,另一个是你的回显,无论设置什么。我会发表评论,但还没有足够的果汁。

尝试回显 $_GET 并查看您在通话之前和通话后的实际设置。从那里您可能能够看到实际发生的情况。我希望这有助于引导您朝着正确的方向前进。

【讨论】:

    【解决方案3】:
    var name=document.forms["myform"]["user"].value;
    $.ajax({
    type: "POST",
    url: "yourpagenmae.php",
    data: { name: user }
        ,
        success: function(msg) {
           // alert(msg);
    
        }
    });
    

    希望对你有帮助

    【讨论】:

      【解决方案4】:

      //查看文件

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script type="text/javascript">
      $(document).ready(function() {
          //use jquery get method
          $('#users').change(function() {
              //get the user value
              var user = $('#users').val();
      
              $.getJSON( "http://localhost/test.php?users="+user, function( data1 ) {
      
                  console.log(data1);
      
                  //status
                  if (data1.status) {
                      alert(data1.q);
      
                      //whatever response variable key
                      $('#txtHint').html(data1.q)
                  } else {
                      alert('error'+data1.q);
                  }
              });
        });
      });
      </script>
      <!-- Site JavaScript -->
      <form>
          <select id="users" name="users" >
          <option value="bikes">Bikes</option>
          <option value="zub">Stuff</option>
          <option value="sonst">Other</option>
      </select>
      </form>
      <br>
      
      <div id="txtHint"></div>
      

      //test.php文件

      <?php 
      
      $data = array();
      
      if(isset($_GET['users'])){
      //echo "<h2>Q posted</h2>";
      $q = $_GET['users'];
      
      $data['status'] = true;
      $data['q'] = $q;
      
      
      }elseif(!isset($q)){
      
      $data['status'] = false;
      $data['q'] = 'KEIN Q GEPOSTET';
      
      }
      
      header('Content-type:application/json');
      //json response
      echo json_encode($data);
      
      ?>
      

      【讨论】:

      • 解释在哪里?在文档未准备好时绑定事件可能会导致问题并且不会总是有效。 Onchange select 绑定到不存在的函数。你的回答太无效了。
      • 检查行前的 cmets。我希望你在按下投票之前浏览整个代码
      • 什么cmets?没有就绪事件,您的代码甚至不会执行,因为它有我上面写的错误。例如这个函数onChange="showUser()"是在哪里声明的?使用 ajax 引用同一个文件也是不明智的。
      • 静止代码未分离。如果都在同一个文件中,为什么还要使用 ajax?
      • 你想分离的一切都是正确的
      猜你喜欢
      • 1970-01-01
      • 2017-06-25
      • 2014-01-31
      • 2010-12-31
      • 1970-01-01
      • 1970-01-01
      • 2017-10-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多