weixin_33737774 2015-03-27 18:59 采纳率: 0%
浏览 22

PHP查询的Ajax菜单

Closed. This question needs details or clarity. It is not currently accepting answers.

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 5 years ago.

UPDATED

Have now got this far with this and think I am getting stuck right at the end!! I have now got both menus being processed by "process.php" and am outputting my queries back into index.php.

process.php

<?php
$menu1 = $_POST["menu1"];
$menu2 = $_POST["menu2"];

if($menu1 == 0) {
    $sql = "SELECT * FROM Language WHERE ID = " . $menu2;   
} else if($menu1 == 1) {
    $sql = "SELECT * FROM Mathematics WHERE ID = " . $menu2;
} else if($menu1 == 2) {
    $sql = "SELECT * FROM Culture WHERE ID = " . $menu2;
}

echo $sql;

?>

index.php

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>
$(window).load(function(){
var data = {
            Language:       ["","Noun Game","Phonetic Noun Box"],
            Mathematics:    ["","Number Rods","Sandpaper Numerals"],
            Culture:        ["","Concept of Time-Clock"]
}
// populate menu1
for (var i in data) {
    $('#menu1').append('<option>' + i + '</option>');
}
// populate menu2 based on menu1 value
$('#menu1').change(function() {
    var key = $(this).val();
    $('#menu2').empty();
    for (var i in data[key]) {
        $('#menu2').append('<option>' + data[key][i] + '</option>');
    }
}).trigger('change');
});//]]>

</script>
</head>
<body>
<form id="form" action="process.php" method="post">
  <select id="menu1" name="menu1"></select>
  <select id="menu2" name="menu2"></select>

 <input id="submit" type="submit" value="ENTER" />
 
</form>
<div id="resultsContainer"></div>


<script>
    $(document).ready(function(){
       //alert('jQuery loaded');
        $('#form').submit(function(event){
            event.preventDefault;
            menu1value = $('#menu1')[0].selectedIndex;
            menu2value = $('#menu2')[0].selectedIndex;
            $.post('process.php',{menu1:menu1value,menu2:menu2value}).done(function(data){
                alert(data);
            })
            return false;
        })
    })
</script>

</body>
</html>

Now I just need to output queries in a table on index.php. Think this will be just about looping through the output but I'm not sure... any help please.

</div>
  • 写回答

1条回答 默认 最新

  • hurriedly% 2015-03-29 08:25
    关注

    I'm assuming that you want to populate both of the selects using ajax.

    That said your script will probably be similar to this:

    $('#menu1').ajax({
    type: "POST",
    cashe: false,
    url: 'processing-page.php',
    success: function(data){
    // use data to make the options
    }
    });
    
        $('#menu2').on('click', function(){
    .ajax({
    type: "post",
    cashe: false,
    url: 'processing-page.php',
    data: {val1: Val1, val2: Val2},
    success: function(data){
    // make options with the data
    }
    });
    });
    

    You will have to create a separate php page that will query the database and send results back through ajax.

    Sorry it looks kind of weird. I typed it in on a phone. Let me know if this works for you or if anything needs clarification.

    UPDATE: This is the only way I know how to return multiple values (such as queries) using ajax. In the processing page I format the queries into a string to send back.
    processing-page.php:

    <?php
    switch ($_POST["menu1"]) {
      case "Language":
        $result1 = mysql_query($sql1);
        $result2 = mysql_query($sql2);
        $result3 = mysql_query($sql3);
        $result4 = mysql_query($sql4); 
        break;
      case "Mathematics":
        // and so on...
        break;
      }
    }
    
    $allResults = array($result1, $result2, $result3, $result4);
    $allResultStr = "";  
    // make the queries into strings  
    foreach($allResults as $result){
      $allResultStr = $allResultStr . $result[key1] ."|". $result[key2] . ",";
    }  
    $allResultStr = substr($optionArray, 0, -1); // takes the last comma off  
    echo $allResultStr;
    ?>
    

    In the script, I take apart the string using the split() function.
    Javascript:

    function(data){  // data is $allResultStr
      var options = data.split(",");
      for(var option in options){
        var parts = options[option].split("|");
        var newOption = document.createElement("option");
        // make the option values and text based on the results
        newOption.value = parts[0]; 
        newOption.innerHTML = parts[1];
        document.getElementById("#menu2").options.add(newOption);
      }
    }
    
    评论

报告相同问题?

悬赏问题

  • ¥15 MATLAB代码求涡量
  • ¥100 采用栈和深度优先算法对我的代码进行修改显示路径
  • ¥15 pointnet2包安装
  • ¥20 射频功率问题,解答者有酬谢!
  • ¥80 构建降雨和积水的预测模型
  • ¥15 #Qt Transform setTransform()在鼠标拖动移动视角是一致在原地不动,无法变换视角(细微观察似乎视图有在原地抖动),无法变换视角(细微观察似乎视图有在原地抖动)
  • ¥50 如何利用无人机拍摄的数码照片测量鸟卵的长短径
  • ¥100 github贡献者给与奖励
  • ¥15 使用DS18B20+ESP8266获取温度数据返回-127.00
  • ¥15 odbc代码新增sqlserver数据源