Ajax Jquery form not working vs div why its happen and how can i fix my error?

**view.html-Code with form**

not working
-----------

```
<html>
    <head>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    </head>
    <body>
        <form id="parse-form" action="#" method="post">
            <button type="submit" id="submit-html">submit ajax request without parameters</button>
        </form>
        <div>array values: <div id="array-values"></div></div>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#submit-html').click(function() {
                    $.ajax({
                        url: 'controller.php',
                        type: 'POST',
                        dataType:'json',
                        success: function(data) {
                            alert("response begin");
                            alert(data);
                            $.each(data, function (i, elem) {
                                $('#array-values').append('<div>'+elem+'</div>');
                            });
                        }
                    });
                });
            });
        </script>
    </body>
</html>

```

**view.html -form replaced by div**

working
-------

```
<html>
    <head>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    </head>
    <body>
        <div id="parse-form">
            <button type="submit" id="submit-html">submit ajax request without parameters</button>
        </div>
        <div>array values: <div id="array-values"></div></div>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#submit-html').click(function() {
                    $.ajax({
                        url: 'controller.php',
                        type: 'POST',
                        dataType:'json',
                        success: function(data) {
                            alert("response begin");
                            alert(data);
                            $.each(data, function (i, elem) {
                                $('#array-values').append('<div>'+elem+'</div>');
                            });
                        }
                    });
                });
            });
        </script>
    </body>
</html>

```

**controller.php -simple php file that return json array:**

```
<?php
$arr=array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
echo json_encode($arr);
?>

```

Thanks