如何通过ajax从下拉列表中获取值并将其发送到php？

Question

我有一些类别名称的下拉列表，我想通过使用 ajax 来获取所选类别的名称并将它们发送到 ajax 脚本所在的同一个 php 页面，这是我的 新代码：

创建动作代码：

public function actionCreate()
    {
        $model=new News;

        // Uncomment the following line if AJAX validation is needed
        // $this->performAjaxValidation($model);

                if(isset($_POST['category']))
                       $category = $_POST['category'];
                   else
                       $category = NULL;

        if(isset($_POST['News']))
        {
            $model->attributes=$_POST['News'];
            if($model->save())
                $this->redirect(array('view','id'=>$model->id));
        }

        $this->render('create',array(
            'model'=>$model, 'category'=>$category
        ));
    }

表格代码：

<div class="row">
        <?php echo CHtml::label('Choose category to add from',''); ?>
                <?php $data = array('celebrities'=>'Celebrities', 'events'=>'Events', 'videos'=>'Videos', 'editorials'=>'Editorials'); ?>
        <?php echo CHtml::dropDownList('category', '', $data); ?>
    </div>
        <script type="text/javascript">

            $("#category").change(function(){
                var category = $(this).val();

            $.ajax({
                url:'/tonyward/index.php/news/create',
                data:{category:category},
                type:'POST',
                dataType:'html',
                success:function(data) {
                    console.log(data.category)
                },
                cache:false
            });
        });
        </script>

        <div class="row">
        <?php echo $form->labelEx($model,'idItem'); ?>
                <?php $data = array('celebrities'=>$category); ?>
        <?php echo CHtml::dropDownList('subcategory', '', $data); ?>
                <?php echo $form->error($model,'idItem'); ?>
    </div>

现在第二个下拉列表的数据应该如何变化？

旧代码：

<div class="row">
            <?php echo CHtml::label('Choose category to add from',''); ?>
                    <?php $data = array('celebrities'=>'Celebrities', 'events'=>'Events', 'videos'=>'Videos', 'editorials'=>'Editorials'); ?>
            <?php echo CHtml::dropDownList('category', '', $data); ?>
        </div>

    <script type="text/javascript">

        $("#category").change(function(){

            $("#category").change(function(){

                var category = $(this).val();

                $.ajax({
                    url:window.location.href,
                    type:'GET',
                    data:{category:category},
                    dataType:'json',
                    cache:false,
                    success:function(data){

                    },
                });
            });
    </script>

    <?php 
        if(isset($_GET['category'])){

            $category = $_GET['category'];

            echo "<script>alert('done');</script>";
        }
    ?>

Answer 1

select 标记没有 href，因此 this.href 不会为您的 AJAX 生成有效的 URL。

Answer 2

你知道你的页面 AJAX 调用返回 WHOLE PAGE 加上 <script>alert('done');</script> 吗？正如dataType 选项所指定的那样，这真的是NOT json。因此，我希望会有一个 parse error 并且没有 .error 处理程序可以触发。如果调用是successful，您不会渲染返回的内容 ...因此您不会看到警报。

建议

1. 更改您的 PHP 脚本，以便在设置 category 时仅返回 if 块内的代码
2. 只使用done 而不是<script>alert('done');</script> ==> `echo "done"
3. 在success 处理程序中包含alert( data )
4. 将dataType 更改为text
5. 包括error 处理程序以防万一。
6. 根据客户端代码提出问题时，包含相关部分的 HTML（由浏览器呈现）而不是服务器端代码通常会很有帮助。我不知道 PHP 代码中的 category 是什么：id 或 name ... 很多其他人可能有同样的问题，会避免这个问题。

Answer 3

我是如何解决我的问题的？

1. 我创建了一个名为 selectedCategory() 的函数。
2. selectedCategory()是renderPartial下拉列表的html代码，写在_categoryItems.php中。
3. 我调用了一个ajax函数来改变第一个下​​拉类别('#category')。
4. ajax 函数将被发送到selectedCategory()，最后它会在特定的 div 中加载 html 数据（成功时）。

代码如下：

表单和ajax功能代码：

<div class="row">
        <?php echo CHtml::label('Choose category to add from',''); ?>
                <?php $data = array('Celebrities'=>'Celebrities', 'Events'=>'Events', 'Videos'=>'Videos', 'Editorials'=>'Editorials'); ?>
        <?php echo CHtml::dropDownList('category', '', $data, array(
                    'empty'=>'select category'
                )); ?>
    </div>
        <script type="text/javascript">

            $(function() {

                document.getElementById('itemslabel').style.display='none';
            });

            $("#category").change(function(){

                document.getElementById('itemslabel').style.display='block';
                var category = $(this).val();

                if(category === ''){

                    document.getElementById('items').style.display='none';
                }

                else{

                    $.ajax({
                        url:'/tonyward/index.php/news/selectedCategory',
                        data:{category:category},
                        async:true,
                        type:'POST',
                        dataType:'html',
                        success:function(data) {

                            document.getElementById('items').style.display='block';
                            $('#categoryItems').html(data);
                        },
                        cache:false
                    });
                }
        });
        </script>

        <div class="row" id="items">
        <?php echo $form->labelEx($model,'idItem', array('id'=>'itemslabel')); ?>
                <div id="categoryItems"></div>
                <?php echo $form->error($model,'idItem'); ?>
    </div>

操作selectedCategory 代码：

public function actionSelectedCategory(){

            if(Yii::app()->request->isAjaxRequest){

                $category = $_POST['category'];

                $this->renderPartial('_categoryItems', array(
                   'category'=>$category 
                ));
            }
        }

_categoryItems 代码：

<?php $data = CHtml::listData($category::model()->findAll(), 'id', 'thumbtitle'); ?>
<?php echo CHtml::dropDownList('subcategory', '', $data); ?>

注意：我通过我的 js 代码显示和隐藏了一些元素。