Play 2.x: 공통 버튼을 사용하여 AJAX 요청을 만드는 방법
이전에도 정상적으로 동작하도록 AJAX 요청을 받았으나 항상 폼을 사용해야만 했습니다.그리고 제출이 끝나면 페이지가 갱신되지 않도록 false를 반환해야 했습니다.
최근에 JavaScript를 다른 파일로 옮겼기 때문에 @ 명령어가 실패합니다.이 때문에 루트에 URL을 설정하는 방법을 알 수 없습니다.
HTML:
<button id="saveAsDefaultButton">Save as default</button>
Playframework Java 코드:
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)
javascript:
$('#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;
});
방법이 있을 거라고 확신하지만 난 아무것도 찾을 수가 없어.
에는 '어울리지 않다'를 .javascriptRoutesroutes.conf 에 근거해 올바른 JS 패스가 생성되기 때문입니다.사용 샘플은 Zentask 샘플에서 찾을 수 있습니다.
하려면 , 「」, 「」, 「AJAX」, 「AJAX」를 변경합니다.url 접속합니다.
url : '@routes.Application.saveDefaultPhoneForUser()',
이 방법에서는 JS 전체를 템플릿에 배치해야 합니다.이것은 잘못된 것입니다.별도의 JS 파일로 이동할 수도 있고, javascript Routes를 사용할 수도 있습니다.
더...
javascript Routes는 아직 공식 문서에는 기술되어 있지 않지만, 여기에 단계별 소개가 있습니다.이 기술은 사실상 정교해 보이지만 이 방법을 사용하면 많은 이점을 얻을 수 있습니다.
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)
이 세 3가지 동작으로 합니다.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 your (템플릿에 포함)
★★conf/routes
GET /javascriptRoutes controllers.Application.javascriptRoutes
시 <head>의 /views/main.scala.html
<script type="text/javascript" src='@routes.Application.javascriptRoutes()'></script>
4. 원하는 장소에서 javascript Routes를 사용한다.
하여 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을 정하다 - 할 수 있습니다.
id다른 에서 ~로GET★★★★★★★★★★★★★★★★★」PUT다른routes-likeJS - 루트 규칙에 필요한 파라미터가 모두 포함되어 있는 경우 JS를 최소화할 수 있습니다.
루트:
GET /some/:a/:b/:c controllers.Application.getABC(a: String, b: Integer, c: String)
JS:
myJsRoutes.controllers.Application.getABC("a", 1, "b" ).ajax({});
저는 "오래된 좋은" 단순한 방법을 좋아합니다.
1 페이지에서 JQuery를 사용하여
어떤 평등한 장소 안에서
$.get('/giveme', {'arg': value}, function(data) {
window.alert(data);
}
);
2 서버/플레이 측
2.1 루트:GET /giveme controllers.Application.giveme(arg)
2.2 스칼라 액션:
object Application extends Controller {
def giveme(arg:String) = Action {
Ok(Json.toJson("hello," + arg ))
}
}
조심해야 할 것...전화할 때
Routes.javascriptRouter("myJsRoutes",
루트는 플레이에서 Import 됩니다.play.api가 아닌 루트.루트
이 코드를 실장했을 때 오류가 발생했습니다.이것은 api에서 온 것이라고 생각했기 때문입니다(분명히 틀렸습니다).그거 말고는 다 잘 돼~!!
간단한 해결책이 있습니다.Javascript 라우터를 생성하기 위해 Embedded router를 사용합니다.Javascript 라우터는 다음을 사용하여 생성할 수 있습니다.@javascriptRouterhelper 디렉티브를 사용하여 다음 코드를 html 페이지 헤드태그 안에 넣습니다(메인 데코레이션템플릿 안에 넣을 수도 있습니다).
<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>
(Intelij에서) 구문 오류에 대해 걱정하지 말고 작업 이름 뒤에 괄호를 사용하지 마십시오.이제 사용할 수 있습니다.jsRoutes.controllers.MyController.getById(id)당신의 에이잭스 콜 코드를 입력하세요.
$.ajax(jsRoutes.controllers.MyController.getById(id))
.done( /*...*/ )
.fail( /*...*/ );
또는 사용jsRoutes.controllers.MyController.getById(id).url자세한 내용은 URL을 참조하십시오.
Marcus의 답변은 매우 좋기 때문에 이 문제가 있는 사람은 누구나 사용할 수 있습니다.
이 작업을 수행하려고 할 때 문제가 하나 있었는데, 작업하는 데 시간이 좀 걸렸습니다.Ajax 요청을 했을 때 잘못된 방법으로 라우팅되었습니다.
이는 루트 파일에 다음과 같은 내용이 포함되어 있었기 때문입니다.
POST / controllers.Application.makeCall()
POST / controllers.Application.saveDefaultPhoneForUser(handset : String)
같은 장소 /에 2개의 포스트 메서드를 가지다.항상 전화하러 가는 것 같았어요.그러니 아무나 팁을 주지 않으면 효과가 없을 거야.
다음 내용으로 변경만 하면 됩니다.
POST / controllers.Application.makeCall()
POST /saveDefaultPhoneForUser controllers.Application.saveDefaultPhoneForUser(handset : String)
이게 도움이 됐으면 좋겠네요.
언급URL : https://stackoverflow.com/questions/11133059/play-2-x-how-to-make-an-ajax-request-with-a-common-button
'source' 카테고리의 다른 글
| 가시성이 AngularJs에 숨겨져 있습니까? (0) | 2023.02.26 |
|---|---|
| 각도 JS 크기 조정 가능한 div 지시어 (0) | 2023.02.26 |
| 스프링 MVC @PathVariable with 닷(.)이 잘려나가고 있습니다. (0) | 2023.02.26 |
| CORS 문제가 있는 Axios (0) | 2023.02.26 |
| ngRepeat => 편집 불가능한 입력을 사용하여 입력을 일련의 원시 요소에 바인딩 (0) | 2023.02.26 |