Step 4: Add two divs inside form tag. One to show data and other to show error message in case any error occurs while retrieving data..

<div id="displayList"></div>
<div id="errorMessage"></div>

Step 5: On document ready call the webmethod using $.ajax which will call renderTable on successfully retrieval of data from GetRecipie webmethod. renderTable method will loop through the result set and display the value in the div.

<script language="javascript" type="text/javascript">
      $(document).ready(function() {
            function renderTable(result) 
                  var dtData = [];
                  var i = 0;
                  $.each(result, function() {
                        $('#displayList').append("By " + result[i].by);
                        $('#displayList').append(" | Recipiename " + result[i].Recipiename);
                        $('#displayList').append(" | Preparationtime " + result[i].preparationtime);
                        $('#displayList').append(" | Cookingtime " + result[i].cookingtime);
                        $('#displayList').append("<br/>");
                        i++;
                  });
            }

            $.ajax({
                  type: "POST",
                  url: "jQueryIterateThroghJSON.aspx/GetRecipie",
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: function(response) {
                        renderTable(response.d);
                  },
                  failure: function(errMsg) {
                        $('#errorMessage').text(errMsg); //errorMessage is id of the div
                  }
            });
      });
</script>