Ajax与PHP相同的页面无法正常工作

时间:2015-04-12 22:03:19

标签: javascript php ajax

我有类别>子类别的依赖下拉菜单,没有在Ajax的帮助下刷新页面。但是目前我的JavaScript代码将Ajax请求发送到另一个页面并且工作正常,我想将请求发送到同一页面。目前正在使用以下JavaScript ..请任何人帮我将请求发送到同一页面。

<script type="text/javascript">
    $(document).ready(function(){

        $(".category").change(function(){
        var id=$(this).val();
        var dataString = 'id='+ id;

            $.ajax({
            type: "POST",
            url: "ajax-subcat.php",
            data: dataString,
            cache: false,
            success: function(html){
                $(".subcat").html(html);
                } 
            });

        });
</script>

如果我清空Ajax网址,仍然不适用于一个页面。

HTML如下

<select name="category" class="category">
    <option selected="selected">--Select Category--</option>
    <?php   

    $sql=mysqli_query($mysqlCon, "SELECT * FROM category WHERE catid=1");
        while($row=mysqli_fetch_array($sql)){
            $cat_id=$row['catid'];
            $data=$row['catname'];
            echo '<option value="'.$cat_id.'">'.$data.'</option>';
        } 
    ?>
</select>


<label>Subcategory:</label> 
<select name="subcat" class="subcat">

</select>

ajax-subcat.php包含以下

if(isset($_POST['id'])){
    $id=$_POST['id'];
    $sql=mysqli_query($mysqlCon, "SELECT * FROM subcategory WHERE sucat='$id'");

        while($row=mysqli_fetch_array($sql)){
            $id=$row['sucat'];  
            $data=$row['sucat_name'];
            echo '<option value="'.$id.'">'.$data.'</option>';
        }
}

我想在1页中实现这一点,而不向其他页面发送请求。请帮忙。

1 个答案:

答案 0 :(得分:0)

请记住正确缩进代码并为可读性留出必要的空间。另外,我建议你将代码分开,并将所有PHP部分放在为此目的提供的类中。

试试这个:

Html文件

<select id="category">
  <?php
    $sql = mysqli_query($mysqlCon, "SELECT * FROM category WHERE catid=1");
    while($row=mysqli_fetch_array($sql)) {
        $cat_id=$row['catid'];
        $data=$row['catname'];
        echo '<option value="'.$cat_id.'">'.$data.'</option>';
    } 
?>
</select>

<label>Subcategory :</label> 
<select id="subcat"></select>

<!-- Suppose you call the jquery here -->

<script type="text/javascript">
  $(document).ready(function() {

    $('#category').change(function () {
        var id = $(this).val();
        $.ajax({
            type: 'POST',
            url: 'ajax-subcat.php',
            data: json,
            cache: false
        }).done(function (data) {
            $('#subcat').html(data);
        }).fail(function (data) {
            alert('You have a critic error');
        });
    });

  });
</script>

你应该用json调用php脚本,并使用json_encode进行回调。这种方法更清洁。我还为你设置了新的ajax语法。您使用的语法&#34;成功&#34;现已弃用。

Php档案

<?php

  if(isset($_POST['id']) && !empty($_POST['id'])) {
    $id = $_POST['id'];
    $sql = mysqli_query($mysqlCon, "SELECT * FROM subcategory WHERE sucat='$id'");

    while($row = mysqli_fetch_array($sql)) {
      $id = $row['sucat'];  
      $data = $row['sucat_name'];
      $return[] = '<option value="'.$id.'">'.$data.'</option>';
    }
    echo json_encode($return);
  }
?>

代码未经过测试,但我认为有效