Question

我不喜欢表单中普通下拉选择器的外观，所以我决定使用一些Jquery创建我自己的版本，作为我自己的一个小学习项目。

以下代码的目标是能够在各种“选择”框中提交文本，即#cuisineSelect，#locationSelect和#priceSelect到“ajax.php”所以我可以进一步操纵这些变量。

我的问题是，由于一些奇怪的原因，ajax.php不会注册$ _POST变量，它告诉我我有一个“未定义的索引”。

我在IE9中使用一些开发人员工具进行了一些调试，他们显示（至少我认为是这样）变量被发送到ajax.php，而ajax.php返回一个变量。以下是截图。

IE9 Developer Tools Results - Just in case this helps.

在真实项目中，用户可以单击<li>选项项，文本将传输到选择器 - 就像下拉选择器一样。

这是我的代码：

HTML：

<div id="parentContainer" style="width:100%;">

    <div class="container"> 
        <div class="select" id="cuisineSelect">
        Cuisine
        </div>
        <div class="option" id="cuisineOption">
        <ul id="cuisineul">
            <li>Asian</li>
            <li>American</li>
            <li>Indian</li>
            <li>Fusion</li>
        </ul>
        </div>
    </div>

    <div class="container"> 
        <div class="select" id="locationSelect">
        Location
        </div>
        <div class="option" id="locationOption">
        <ul id="locationul">
            <li>Asian</li>
            <li>American</li>
            <li>Indian</li>
            <li>Fusion</li>
        </ul>
        </div>
    </div>

    <div class="container"> 
        <div class="select" id="priceSelect">
        Price
        </div>
        <div class="option" id="priceOption">
        <ul id="priceul">
            <li>Price Range</li>
            <li>Cheap ($5-$15)</li>
            <li>Medium ($16 - $20)</li>
            <li>Pricey ($21 - $35)</li>
            <li>Fine Dining ($35+)</li>
        </ul>
        </div>
    </div>

    <div class="container">
        <div class="select" id="searchButton" style="width:25px; height:20px;">
        <center><img align="center" src="images/sml_search.png" width="17" height="18" /></center>
        </div>
    </div>

</div>

<div id="result" style="z-index:10;">
result=show; 
<?php include "ajax.php"; ?>
</div>

Jquery代码（已经放在$（document）.ready函数中。）

$("#searchButton").click(function() { 
        /*var cuisine     = $("#cuisineSelect").html();
        var location  = $("#locationSelect").attr('value'); 
        var price     = $("#priceSelect").attr('value'); 
            $.ajax({  
                type: "POST",  
                url: "ajax.php",  
                data: "cuisine="+ cuisine +"& location="+ location +"& price="+ price,  
                success: function(){  
                    $('#result').show();  
                }  
            });  
        return false;  */

        $.post('ajax.php', 'cuisine=' + $("#cuisineSelect").text(), function () {
          $("#result").show();
       });

     });

PHP页面“ajax.php”

<?php

    //Search information
    //$cuisine = htmlspecialchars(trim($_GET['cuisine']));

    //$location = htmlspecialchars(trim($_POST['location']));
    //$price = htmlspecialchars(trim($_POST['price']));

    //echo $location;
    //echo $price;
    //$addClient  = "INSERT INTO clients (fname,lname) VALUES ('$fname','$lname')";
    //mysql_query($addClient) or die(mysql_error());

    //$value = $_POST['cuisine'];
    //$value2 = $_POST['val'];
    //echo "$value2";


    $cuisine = $_POST['cuisine'];
    echo $cuisine;

?>

非常感谢你的帮助。

Answer 1

无需在#result div中编写包含ajax.php文件。将#result div保持为空并隐藏。
修改您的ajax调用，如下所示：
```
$.post('ajax.php', 'cuisine=' + $("#cuisineSelect").html(), function (data) {
      $("#result").html(data);
      $("#result").show();
  });
```
这将显示#result'div'中的点击文字。变量数据被传递给回调函数以供进一步利用。
转换＆lt; li>在选择框中，您必须将div #cuisineOption中存在的值传递给ajax.php，以便PHP脚本可以从这些值创建选择框。

Jquery AJAX自定义表单不返回PHP的结果

1 个答案: