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

I have a dependent dropdown menu for category>subcategory without refreshing page with the help of Ajax. But currently my JavaScript code sends the Ajax request to another page and it works fine, i want to send the request to the same page. Currently using the JavaScript as below .. please anyone help me to get the request to the same page.

<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>

If I empty the Ajax url, still doesn't work for one page.

HTML as below

<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 contains the below

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>';
        }
}

I want to achieve this in 1 page, without sending request to other page. Please help.

Please remember to properly indent your code and make the necessary spaces for readability. Also, I advise you to separate your code, and put all the PHP part in classes provided for that purpose.

Try this :

Html file

<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>

You should call the php script with json, and have the callback with json_encode. This approach is cleaner. Also I set you the new ajax syntax. THe syntax you used with "success" is now deprecated.

Php file

<?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);
  }
?>

Code not tested, but I think it work