Ajax通过javascript路由，控制器应返回json并返回html页面

Question

Environment : scala 2.10, play 2.1.1, eclipse 4.2

Use case : the user click on a link figuring an object (game) in the database. An ajax request is sent through Javascript Route to a controller, which load the game data, convert it to json and send it back to view. The ajax success callback print the game title into a div.

Problem: i dont get a json, but the a html page (the page from which the ajax request s sent).

I suspect the problem is in the router : i put a print("route") in the javascript route action and a print("load game") in load game action. The "route" is displayed in console, but not the "load game". It may also come from my loadGame(id) route, but i dont see how i should set it.

Here is my code.

Routes:

# Routes
# This file defines all application routes (Higher priority routes first)
# ~~~~

# Home page
GET     /                               controllers.Application.index

# Javascript routes
GET     /javascriptRoutes               controllers.Application.javascriptRoutes

# Library
GET     /library/:id                    controllers.UserController.library(id: Long)
GET     /library/:id                    controllers.GameController.loadGame(id: Long)

View:

<div class="span2">
                    <ul class="nav nav-pills nav-stacked">
                        @userGames.map { game =>
                            <li><a href="#" onclick="displayGameInfo(@game.id)">@game.title</a></li>
                        }
                    </ul>
                </div>
...
<script>
            var successFn = function(data) {
                $('#gameInfo').html('');
                $("#gameInfo").append('<h4>'+data.title+'</h4>')
            }

            var errorFn = function(err) {
                console.debug("Error of ajax Call");
                console.debug(err);
            }

            ajax1 = {
                dataType: 'text',
                contentType:'application/json',
                success: successFn,
                error: errorFn
            }

            var displayGameInfo = function(id) {
                javascriptRoutes.controllers.GameController.loadGame(id)
                    .ajax(ajax1);
            }
        </script>

ApplicationController with javascript route: ...

object Application extends Controller {
  def javascriptRoutes = Action { implicit request =>
    import routes.javascript._
        println("-=== route ===-")
        Ok(
            Routes.javascriptRouter("javascriptRoutes")(routes.javascript.GameController.loadGame)
        ).as("text/javascript")
  }
}

GameController with loadGame(id) method:

object GameController extends Controller {
...
  // Library
  def loadGame(id: Long) = Action(parse.json) { implicit request =>
    println("-=== load game ===-")
    val mess = Json.toJson(Game.find(id))
    Ok(mess)
  }

}

Game model:

case class Game(id: Long, title: String, description: String, userId: Long)

object Game {

  val game = {
    get[Long]("id") ~ 
    get[String]("title") ~
    get[String]("description") ~
    get[Long]("userId") map {
        case id~title~description~userId => Game(id, title, description, userId)
    }
  }

...

  def find(id: Long): Game = DB.withConnection { implicit c =>
    SQL("select * from game where id = {id}")
        .on('id -> id).as(game *).head
  }


  implicit object GameFormat extends Format[Game] {

    def reads(json: JsValue) = JsSuccess(Game(   
      (json \ "id").as[Long],
      (json \ "title").as[String],
      (json \ "description").as[String],
      (json \ "uid").as[Long]
    ))

    def writes(game: Game) = JsObject(Seq(
      "id" -> JsNumber(game.id),
      "title" -> JsString(game.title),
      "description" -> JsString(game.description),
      "userId" -> JsNumber(game.userId))
      )
  }
}

Answer 1

In your routes file, you have to routes matching the same URL :

# Library
GET     /library/:id                    controllers.UserController.library(id: Long)
GET     /library/:id                    controllers.GameController.loadGame(id: Long)

When your browser request the /library/123 url, Play will try the routes in the order of declaration and will match the first one, calling the controllers.UserController.library() Action. This is probably why you get a full HMTL page.

Try to define a different URL for the second route (the one returning JSON) and Play will be able to match the correct Action.

Ex :

GET     /library/:id                    controllers.UserController.library(id: Long)
GET     /gameData/:id                   controllers.GameController.loadGame(id: Long)