Play 2.x : 공통 버튼으로 AJAX 요청을 만드는 방법
그래서 이전에 성공적으로 ajax 요청을 받았지만 항상 양식을 사용해야했고 제출이 끝날 때 페이지를 새로 고치지 않도록 false를 반환합니다.
나는 또한 최근에 내 자바 스크립트를 별도의 파일로 옮겼습니다. 이로 인해 @ 명령이 실패했습니다. 이 때문에 내 URL을 내 경로로 설정하는 방법이 없습니까?
HTML :
<button id="saveAsDefaultButton">Save as default</button>
Playframework 자바 코드 :
public static Result saveDefaultPhoneForUser(String handset) {
User currentUser = User.findByName(session("name"));
currentUser.lastControlledHandset = theHandset;
currentUser.save();
return ok();
}
경로 :
POST / controllers.Application.saveDefaultPhoneForUser(handset : String)
자바 스크립트 :
$('#saveAsDefaultButton').click(function(evt) {
$('#errors').hide();
$.ajax({
type : 'POST',
url : "controllers.Application.saveDefaultPhoneForUser",
data : $('#controlledPhone option:selected').text(),
dataType : "text",
success : function(data) {
//setError('Call succedded');
//$('#test1').attr("src", data)
},
error : function(data) {
setError('Make call failed');
}
});
return false;
});
나는 이것을 할 수있는 방법이 있다고 확신합니다. 나는 단지 아무것도 찾는 행운이 없습니다. 어떤 도움이라도 크게 감사했습니다.
이 작업을 위해서는 javascriptRoutesroute.conf를 기반으로 올바른 JS 경로를 생성하므로 함께 가야 합니다. Zentask 샘플 에서 사용 샘플을 찾을 수 있습니다.
어쨌든, 지금 당신은을 변경하여 AJAX 호출을 해결할 수 url에
url : '@routes.Application.saveDefaultPhoneForUser()',
이 방법은 전체 JS를 템플릿에 배치해야하는데, 이는 잘못된 것입니다. 별도의 JS 파일로 이동하거나 javascriptRoutes를 사용할 수 있도록해야합니다.
더...
javascriptRoutes 는 아직 공식 문서에 설명되어 있지 않지만 여기에 대한 단계별 소개가 있습니다. 이 방법을 사용 하면 설명 이 사실상 정교 해 보이지만 많은 이점이 있습니다.
1. 공통 경로 만들기
먼저 conf/routes파일에 공통 경로를 만들어야 합니다.
GET /item/:id controllers.Application.getItem(id: Long)
POST /item/new controllers.Application.newItem
PUT /item/:id controllers.Application.updateItem(id: Long)
물론 Application컨트롤러 에서 최소한 다음 세 가지 작업을 만들어야합니다 .
getItem(Long id){ ... }newItem() { ... }updateItem(Long id) { ... }
2. 공통 경로를 JS로 변환하는 작업 생성
- 어딘가에 배치하십시오. 당신의
Application컨트롤러 - 그것을 부르 자
javascriptRoutes()
이 작업 에서 파일 의 기존 경로를 가리킬 것입니다.conf/routes
public static Result javascriptRoutes() {
response().setContentType("text/javascript");
return ok(
Routes.javascriptRouter("myJsRoutes",
routes.javascript.Application.getItem(),
routes.javascript.Application.newItem(),
routes.javascript.Application.updateItem(),
//inside somepackage
controllers.somepackage.routes.javascript.Application.updateItem()
)
);
}
참고 : 괄호 안에 매개 변수를 설정하지 마십시오.
3. javascriptRoutes작업 경로를 만들고 템플릿에 포함
노선 conf/routes
GET /javascriptRoutes controllers.Application.javascriptRoutes
<head>일부 에서보기/views/main.scala.html
<script type="text/javascript" src='@routes.Application.javascriptRoutes()'></script>
4. 원하는 곳에서 javascriptRoutes 사용
지금부터 JS에서 경로를 사용하여 url및 type. 대신 예 :
$('.getAjaxForThisContainer').click(function(e) {
var idToGet = $("#someField").val();
$.ajax({
type : 'GET',
url : '@routes.Application.getItem()',
data : {
id: idToGet
},
success : function(data) {
// ... some code on success
}
});
return false;
});
단순화 된 버전을 사용할 수 있습니다 ( myJsRoutes포인트 2에서) :
myJsRoutes.controllers.Application.getItem(idToGet).ajax({
success : function(data) { ... some code ... }
});
또는
myJsRoutes.controllers.Application.newItem().ajax({
success : function(data) { ... some code ... }
});
기타...
- 지정할 필요가 없습니다.
type: "POST"JS 라우터는conf/routes규칙 에 따라 올바른 방법을 사용합니다. - 순수한 JS의 구문을 사용하여
id레코드 (또는 다른 매개 변수)를GET또는PUT(또는 다른 방법)으로 설정할 수 있습니다.routes-like - If your route rule contains all required params you can really minimize yours JS:
for route:
GET /some/:a/:b/:c controllers.Application.getABC(a: String, b: Integer, c: String)
JS:
myJsRoutes.controllers.Application.getABC("a", 1, "b" ).ajax({});
I like "old good" simple way:
1 In the page, with JQuery,
inside some even-handler
$.get('/giveme', {'arg': value}, function(data) {
window.alert(data);
}
);
2 On the server/play side
2.1 Routes: GET /giveme controllers.Application.giveme(arg)
2.2 scala action:
object Application extends Controller {
def giveme(arg:String) = Action {
Ok(Json.toJson("hello," + arg ))
}
}
Something to watch out for... when calling
Routes.javascriptRouter("myJsRoutes",
Routes is imported from play.Routes, not play.api.Routes
Had an error when I implemented this code, because I assumed it would came from api (clearly I was wrong). Other than that, everything works great~!!
There is a simpler solution, use Embedded router to generating Javascript router. You can generate Javascript router using @javascriptRouter helper directive, place the following code inside your html page head tag (maybe inside the main decorating template)
<head>
<title>Saeed Title</title>
<link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
<script src="@routes.Assets.at("javascripts/jquery/v1.12.4/jquery.min.js")" type="text/javascript"></script>
@helper.javascriptRouter("jsRoutes")(
routes.javascript.MyController.getById,
routes.javascript.MyController.getByName
)
</head>
Don't worry about syntax error (in Intellij) and don't use parenthesis after your action name. Now you can use jsRoutes.controllers.MyController.getById(id) in your ajax call code.
$.ajax(jsRoutes.controllers.MyController.getById(id))
.done( /*...*/ )
.fail( /*...*/ );
or use jsRoutes.controllers.MyController.getById(id).url to get url. more information.
Marcus' answer is very good, so anyone else having this issue should be able to use this.
I did have one issue though when trying to get this to work which took me a little while to get working. When I was making my ajax request it was routing to the wrong method.
This was because in my routes file I had the following:
POST / controllers.Application.makeCall()
POST / controllers.Application.saveDefaultPhoneForUser(handset : String)
By having two post methods with the same location /. It seemed to always go to make call. So just a tip for anyone don't do this otherwise it wont work.
I just needed to change it to:
POST / controllers.Application.makeCall()
POST /saveDefaultPhoneForUser controllers.Application.saveDefaultPhoneForUser(handset : String)
Hope this helps someone.
'developer tip' 카테고리의 다른 글
| Python 용 Vim 설정 (0) | 2020.12.07 |
|---|---|
| 자바에서 문자열을 날짜로 변환 (0) | 2020.12.07 |
| How does condensed distance matrix work? (pdist) (0) | 2020.12.07 |
| 주의 첫 번째 월요일 날짜를 확인 하시겠습니까? (0) | 2020.12.06 |
| SELECT 쿼리 빈 결과에 대한 간단한 확인 (0) | 2020.12.06 |