Wednesday, March 5, 2014

Blank template JavaScript application for JSON requests

Blank template application for JSON requests with and without body:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>My Blank JS / jQuery app - jsFiddle demo by jorooo</title>
 
  <script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script>
  <!--link rel="stylesheet" type="text/css" href="/css/result-light.css"-->
  <script type='text/javascript' src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
     
  <style type='text/css'>
   
  </style>
</head>
<body>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
    $("#alert").bind("click", function(event) {
        alert('alert called');
    }); 

    $("#call_json_with_body").bind("click", function(event) {
        $.ajax({
            success: function( data ){
                alert("success");
                alert('success, data received is ' + JSON.stringify(data));
            },
            error: function( jqXHR, textStatus, errorThrown ){
                alert( "error  while making ajax call. Error parameters are, " +
                    "\ntextStatus: " + textStatus +
                    ";\n errorThrown: " + errorThrown +
                    ";\n jqXHR: " + JSON.stringify(jqXHR) );
            },
            beforeSend: function(req) {
                req.setRequestHeader("Accept", "application/json");
                req.setRequestHeader("Content-Type","application/json");
            },       
            dataType: 'json',
            data: JSON.stringify( {"zzz":"222"} ),
            type: 'POST',
            cache: false,
            url: "http://localhost:8080/add_venue_raw",
          }
        );   
    }); 
    $("#call_json_without_body").bind("click", function(event) {
        $.ajax({
            success: function( data ){
                alert("x");
                alert('success, data received is ' + JSON.stringify(data) );
            },
            error: function( jqXHR, textStatus, errorThrown ){
                alert( "error  while making ajax call. Error parameters are, " +
                    "\ntextStatus: " + textStatus +
                    ";\n errorThrown: " + errorThrown +
                    ";\n jqXHR: " + JSON.stringify(jqXHR) );
            },
            type: 'GET',
            cache: false,
            url: "http://localhost:8080/user/1",
          }
        );   
    }); 
});//]]> 

</script>

  <div data-role="page" id="p1">
    <div  data-role="header"><h1>Header</h1></div>
   
    <div  data-role="content">
        <h5>If the script is running from a file:/// URL you could experience some issues. It's best not to do AJAX requests from file URLs, because they are treated inconsistently. Chrome, for example, entirely disallows them. Firefox also.</h5>
        <a href="#" id="call_json_without_body" data-role="button">JSON request without body</a><br/>
        <a href="#" id="call_json_with_body" data-role="button">JSON request with body</a><br/>
        <a href="#" id="alert" data-role="button">Show alert</a>
    </div>
   
    <div  data-role="footer"><h4>Footer</h4></div>
</div>

 
</body>
</html>





No comments:

Post a Comment