8 years, 7 months 전-
간단한 홈페이지를 대행맡겼습니다.
다만 글을 입력하고 저장하는 부분이 있느데 버튼을 누르면 저희 회사 서버에
post방식으로 날려주면 서버에서 DB에 입력하게 됩니다.
이부분도 찾아네는데 쉽지는 않았습니다.
contact-form.php =>form_html 함수에 $url 변수에 action 주소를 넣으면 되더군요.
처리하지 못한 부분이 있는데. 버튼을 누루면 invalid 처리와… 서버에 저장완료시
페이지에 “저장완료” 팝업정도뛰워 줘야 될거 같은데 지금은 그냥 대기중…
하고 모래시게만 돌아가더라구요… 어떤 부분에 어떤함수가 작동하는지 알아내야지
처리할수 있을거 같아요..
jsp만 하다가 워드프레스하니깐 쉽지가 않네요
“그냥 대기중… 하고 모래시게만 돌아가더라구요…” 라는 부분으로 볼 때 AJAX 방식으로 양식(form)을 처리하는 것으로 보이는군요.
플러그인에서 AJAX를 처리하는 부분을 찾아 내어 보세요. 일반적으로 플러그인에 포함된 js파일을 뒤지다 보면 $.ajax / $.post 등으로 처리하는 부분이 있을겁니다.
jsp 를 아신다고 하고, 해당 기능을 수행하는 파일도 찾아내실 수 있는 수준이시니… 워드프레스 훅(액션, 필터)의 개념에 대해 잠깐 살펴 보세요. (관련 정보는 구글에서 검색하면 쏟아져요)
그런 후에, 다시 contact-form.php 를 훑어보시면 눈이 확 밝아지실 거예요.
왠만하면 제가 간단하게 테스트해보고, 참고할만한(?) 소스라도 올려드리면 좋을텐데… 지금은 다른데 정신이 팔려 여력이 없네요.
script.js에
$.fn.wpcf7InitForm = function() {
this.ajaxForm({
beforeSubmit: function(arr, $form, options) {
$form.wpcf7ClearResponseOutput();
$form.find(‘[aria-invalid]’).attr(‘aria-invalid’, ‘false’);
$form.find(‘img.ajax-loader’).css({ visibility: ‘visible’ });
return true;
},
beforeSerialize: function($form, options) {
$form.find(‘[placeholder].placeheld’).each(function(i, n) {
$(n).val(”);
});
return true;
},
data: { ‘_wpcf7_is_ajax_call’: 1 },
dataType: ‘json’,
success: $.wpcf7AjaxSuccess,
error: function(xhr, status, error, $form) {
$form.find(‘img.ajax-loader’).css({ visibility: ‘hidden’ });$.fn.wpcf7InitForm = function() {
this.ajaxForm({
beforeSubmit: function(arr, $form, options) {
$form.wpcf7ClearResponseOutput();
$form.find(‘[aria-invalid]’).attr(‘aria-invalid’, ‘false’);
$form.find(‘img.ajax-loader’).css({ visibility: ‘visible’ });
return true;
},
beforeSerialize: function($form, options) {
$form.find(‘[placeholder].placeheld’).each(function(i, n) {
$(n).val(”);
});
return true;
},
data: { ‘_wpcf7_is_ajax_call’: 1 },
dataType: ‘json’,
success: $.wpcf7AjaxSuccess,
error: function(xhr, status, error, $form) {
//여기로 진입하더라구요 alert로 확인해봤음
var e = $(”).text(error.message);
$form.after(e);
}
});
var e = $(”).text(error.message);
$form.after(e);
}
});
이쪽에 존재하더군요 문제는 서버에서 처리후 json 방식으로 리턴할때 status:success
이런식으로 리턴하는데 무조건 error로 떨어지더라구요 크롬에서 디버깅해보면
XMLHttpRequest cannot load http://www.testUrl.co.kr. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://hehe83.cafe24.com’ is therefore not allowed access.
이런식으로 나옵니다.
http://www.testUrl.co.kr 은 url을 노출시킬수 없어서 지어서 쓴것이고요.
워드프레스는 카페24에 설치되어있습니다.
error로 떨어지는걸 어떻게 처리해야할지요?
– 카페24에서 대표 도메인을 http://hehe83.cafe24.com 가 아닌 사용하시는 도메인으로 바꿔 보세요.
– 워드프레스 설정에 사이트 주소, 홈 URL 이 모두 cafe24 주소가 아닌 사용하시는 도메인으로 되어 있나요?
– 워드프레스를 프레임 안에 넣어서 활용하지는 않으시나요?
cross-domain/origin 문제 입니다.
cross-domain ajax post 를 하기위해서는 구글링 해보시면 CORS (cross-origin resource sharing) 하라고들 하는데,
http://www.html5rocks.com/en/tutorials/cors/
이런 간단한 방법도 있더라구요.
<?php header('Access-Control-Allow-Origin: *'); ?>//IE 9 이하에서는 안되는걸로 알고 있습니다.여러가지 예제들 나와 있는 페이지. 해결되시는걸로 선택하시면 될 듯 합니다.
http://hayageek.com/cross-domain-ajax-request-jquery/
- 답변은 로그인 후 가능합니다.