Question

$(function(){

$('.menu').on('click', (function(){
    $('#box').toggle('slide');
     $.ajax({
         url:'fetchsubmenu.php';
         data : {nume : $(this).attr('value')},
         dataType : 'json'
    });
});
$('.menu').on('mouseout',function(){
        $('#box').hide();
    });
});

我正在尝试向服务器发送一些元素值，以便从数据库中选择一些数据，但它不起作用。使用这样的代码，该框不再切换。有更好的方法吗？

$conn=mysql_connect('localhost','root','');
mysql_select_db('alinDataBase');

$nume = $_GET['nume'];

$query =  "SELECT (nume) FROM submenu WHERE categorie = '$nume' ";
$result = mysql_query($query,$conn);
$output='';

while($row = mysql_fetch_array($result)){
    $output=array(
    "nume" => $row["nume"],
    );
    $records[] = $output;
}
echo json_encode($records);

mysql_close($conn);

和html：

   <!DOCTYPE html>
<html>
    <head>
        <script src="jquery-3.1.1.js"></script>
        <script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
        <script type="text/javascript" src="foodstore.js"></script>
        <script type="text/javascript" src="fetchSubmenu.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css">

    </head>
    <body id="body">
            <div id = "aseazamenu">

     <div class ="menu" value = "audio" >Audio,Video </div><br>
     <div class ="menu" value = "electro" >Electrocasnice</div><br>
     <div class ="menu" value = "ingrijire" >Ingrijire   personala</div><br>
     <div class ="menu" value = "pc" >PC</div><br>
     <div class ="menu" value = "telefoane" >Tablete,Telefoane</div><br>

 </div>
            <div >
                    <table id="box">
                <thead>
                    <tr>

                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
            </div>

    </body>
</html>

更新：显示我的结果我使用了这个：

      function showObjects(obiecte){

    $('#box tbody').html('');
        for(var i=0; i<obiecte.length; i++){               
            var aparat = obiecte[i];
            $('#box tbody').append(getRow(aparat));
        }
}

function getRow(aparat){

    var row = '<tr>'+
        '<td>' + '<a href=produs.html>'+aparat.nume+'</a>' + '</td>'+               
        '</tr>';

        return row;
}

$.ajax({
    url:"fetchSubmenu.php",
    dataType:'json',
    catche:false
}).done(function(result){
    console.debug('3) ajax done', result);
    showObjects(result);
});

Answer 1

试试这个HTML，

<div id="aseazamenu">
    <div class="menu" data-value="audio">Audio,Video</div><br>
    <div class="menu" data-value="electro">Electrocasnice</div><br>
    <div class="menu" data-value="ingrijire">Ingrijire personala</div><br>
    <div class="menu" data-value="pc">PC</div><br>
    <div class="menu" data-value="telefoane">Tablete,Telefoane</div><br>
</div>

参考，

https://www.sitepoint.com/use-html5-data-attributes/ https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes

在JS中，做出改变，

data: {
    nume : $(this).attr('data-value')
},

Answer 2

你的问题不是属性，你有一个额外的括号。价值会很好，你不需要其他人说的数据价值。

只需改变一下：

$('.menu').on('click', (function(){

到此：

$('.menu').on('click', function(){

也在您的ajax请求中，在网址后将;替换为,。

您的代码应如下所示：

$('.menu').on('click', function(){
    $('#box').slideToggle();
     $.ajax({
         url:'fetchsubmenu.php',
         data : {nume : $(this).attr('value')},
         type : 'GET',
         dataType : 'json',
         success:function(data){
         console.log(data);
        },
         error: function(jqXHR, textStatus, errorThrown) {
         console.log(textStatus, errorThrown);
         }
    });
});

Answer 3

您需要一个成功功能，以便您可以处理来自服务器的响应

HTML：

<div id="aseazamenu">
    <div class="menu" data-value="audio">Audio,Video</div><br>
    <div class="menu" data-value="electro">Electrocasnice</div><br>
    <div class="menu" data-value="ingrijire">Ingrijire personala</div><br>
    <div class="menu" data-value="pc">PC</div><br>
    <div class="menu" data-value="telefoane">Tablete,Telefoane</div><br>
</div>

JS：

$('.menu').on('click', (function(){
    $('#box').toggle('slide');
     $.ajax({
         url:'fetchsubmenu.php';
         data : {nume : $(this).attr('data-value')},
         dataType : 'json',
         success:function(data){
         console.log(data);// process your response 
         var rows = '';
         $.each(data,function(i,v){
              rows+= '<tr><td><a href=produs.html>'+v.nume+'</a></td</tr>';
         });
         $('#box tbody').html(rows);
        }
    });
});

我无法使用ajax将值属性发送到服务器

3 个答案: