利用angular 在play&scala中实现ajax

最新推荐文章于 2019-03-27 14:49:22 发布

springlustre

最新推荐文章于 2019-03-27 14:49:22 发布

阅读量841

点赞数

分类专栏： scala 文章标签： play scala angular ajax

本文链接：https://blog.csdn.net/springlustre/article/details/47399175

版权

scala 专栏收录该内容

16 篇文章 2 订阅

订阅专栏

在play中实现ajax官方给出jquery实现，我捉摸了一上午终于找到一种利用angular实现的方法。angular是一个js的框架

1、创建一个scala的play工程，修改index.scala.html如下

(message: String)
<!DOCTYPE html>
<html>
    <head>
        <title>ajax</title>
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
        <script src="http://cdn.bootcss.com/angular.js/1.1.0/angular.min.js" type="text/javascript"></script>
        <script src="@routes.Assets.at("javascripts/hello.js")" type="text/javascript"></script>
    </head>
    <body>
        <div data-ng-app="myApp">
            <script type="text/javascript">
             var app = angular.module('myApp', []);
            </script>

            <div data-ng-controller="SearchController">
                <input data-ng-model="input" data-ng-change="doSearch(input)" autofocus>
                <h2>There are {{ results.length }} results</h2>
                hello {{world}}
                <ul>
                    <li data-ng-repeat="result in results">
                        {{ result }}
                    </li>
                </ul>
            </div>



        </div>
    </body>
</html>

首先得包含angular.min.js文件，我这里从cdn引用的，data-ng-app是作用域，data-ng-controller="SearchController“ 是控制器，data-ng-model="input"是把输入域的值绑定到应用程序变量  data-ng-change="doSearch(input)"触发doSearch方法， ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML,data-ng-repeat="result in results"实现数组的循环打印

2、在public/javascript下创建hello.js, 内容为

function SearchController($scope, $http) {
    $scope.results = [];
    $scope.input = "";
    $scope.doSearch = function() {
        var httpRequest = $http({
            method : 'GET',
            url : "/search/" + $scope.input,
        }).success(function(data, status) {
            $scope.results = data;
        }).error(function(arg) {
            alert("error ");
        });

    };
    // run the search when the page loads.
    $scope.doSearch();
}
3、创建models/Result
package models

/**
 * Created by lustre on 2015/8/10.
 */


import java.io.File

case class Result(text: String)

// Finds files in the current dir. matching the given search term
object Result {

  // Simple list of files in the current directory
  def all = new File(".").listFiles().map(file => file.getName())

  // Simple case-sensitive filter
  def find(term: String) = Result.all.filter(_.contains(term))
}
其功能是返回包含参数内容的文件列表，即当前目录下的文件列表
4、在controler下创建Search
package controllers

/**
 * Created by lustre on 2015/8/10.
 */

import models.Result
import play.api._
import play.api.mvc._
import play.api.libs.json._
import play.api.data._
import play.api.data.Forms._
import scala.collection.mutable.ListBuffer
import java.io.File

object Search extends Controller {

  // Simple action - return search results as Json
  def perform(term:String) = Action {
    val m = Result.find(term)
    Ok(Json.toJson(m))
  }
}
以json形式传回数据，其中m应该是数组形式
5、最后是配置文件
GET  /search/:term   controllers.Search.perform(term:String)
GET  /search/        controllers.Search.perform(term:String="")
然后就可以了，输入框键入a 下面显示包含a的文件名，

springlustre

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用angular 在play&scala中实现ajax

在play中实现ajax官方给出jquery实现，我捉摸了一上午终于找到一种利用angular实现的方法。angular是一个js的框架1、创建一个scala的play工程，修改index.scala.html如下(message: String)html>html> head> title>ajaxtitle> link rel="s
复制链接

扫一扫

专栏目录