examples/substitutes.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Substitutes-demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="javascript/zepto.min.js"></script>
</head>
<body>
<h1>Substitute Interface Using "JSON"</h1>
<hr>
<h2>GET</h2>
<p><input onclick="getUserName()" type="button" value="Get user name"> <span id="username"></span></p>
<p><input onclick="getUserAge()" type="button" value="Get user age"> <span id="userage"></span></p>
<p><input onclick="getUserBio()" type="button" value="Get user bio"> <span id="userbio"></span></p>
<hr>
<h2>POST</h2>
<p>Says something:</p>
<p><textarea id="message" cols="100" rows="5"></textarea></p>
<p><input onclick="submitMessage()" type="button" value="Submit"></p>
<hr>
<h2>How to do this?</h2>
<p>We just add rules to ".justreq" as follow:</p>
<pre>
{
  ...
  "rules": [
    {
      "url":  "api/post.do",
      "subs": "api/post.json"
    },
    {
      "url":  "api/user.do",
      "subs": "api/user.json"
    }
  ]
}
</pre>
<p class="tips">These json files of this example are located in ".jr/subs/api/"</p>

<script>
function getUserName(){
  $.get('http://127.0.0.1:8000/api/user.do', function(user){
    $('#username').text(user.name);
  });
}
function getUserAge(){
  $.get('http://127.0.0.1:8000/api/user.do', function(user){
    $('#userage').text(user.age);
  });
}
function getUserBio(){
  $.get('http://127.0.0.1:8000/api/user.do', function(user){
    $('#userbio').text(user.bio);
  });
}
function submitMessage(){
  var data = {
    message: $('#message').val()
  };
  $.post('http://127.0.0.1:8000/api/post.do', data, function(res){
    if (res.ok) {
      alert('Submit success!');
    } else {
      alert('Submit failed!');
    }
  });
}
</script>
</body>
</html>