jQuery ajaxForm .json 파일을 반환합니다.

Question

저는 Ajax를 통해 JSON을 반환하는 레일에 모델 생성 양식을 제공합니다. 내 코드는 지금까지처럼 :

$('#new_stem').ajaxForm({ //#new_stem is my form 
    dataType: 'json', 
    success: formSuccess 
}); 

function formSuccess(stemObj) { 
    //does stuff with stemObj 
} 

그리고 파일 업 로더와 다중 양식을 가지고 (그러나 나는 그와 관련이 있는지 확실하지 않습니다).

양식을 제출할 때 제대로 작동합니다 (모델이 제대로 작성되고 json으로 렌더링 됨). 대신 json이 formSuccess 함수에서 처리하는 대신 "stems.json"(경로 내 줄기 만들기 작업에) 파이어 폭스에서.

이 문제의 원인은 무엇이며 어떻게 해결할 수 있습니까? 이것이 문제의 일부인지 확실하지 않지만 양식에 제출 버튼이 없으면 $ ('# new_stem) .submit()을 호출하는 클릭 핸들러 링크가 있습니다.

감사합니다!

편집 :

Etag  "b53e5247e7719cf6b1840e2c6e68781c" 
Connection  Keep-Alive 
Content-Type application/json; charset=utf-8 
Date  Mon, 03 May 2010 02:19:31 GMT 
Server  WEBrick/1.3.1 (Ruby/1.8.7/2010-01-10) 
X-Runtime  241570 
Content-Length 265 
Cache-Control private, max-age=0, must-revalidate 

플러스

Answer 1

정확하게 내가 목표로 한 것은 아니지만, 내 요구에 맞는 약간 다른 해결책을 찾을 수있었습니다.

iframe을 통해 ajax 파일 업로드가 이루어 지므로 iframe이 .json 파일을로드 한 후 Firefox가 다운로드로 해석되어 다운로드 프롬프트가 열리는 것이 문제였습니다. 나는 이것을 방지하기 위해 서버 설정을 할 수 있었을 지 모르지만, 이미 충분한 시간을 가졌습니다.

그래서 어쨌든 하나의 ID 번호로만 낚시를했기 때문에 내가 한 일은 json 대신 텍스트로 출력됩니다. 내 코드는 지금과 같이 보인다 :

$(document).ready(function() { 
    $('#continue-upload').click(function() { 
    $('#new_stem').ajaxSubmit({ 
     dataType: 'text', //'json', 
     success: formSuccess 
    }); 
    }); 
}); 

나는 또한 사전 태그에 싸여, 그래서 나뿐만 아니라 내 결과 기능에 사람들을 제거하는 데 필요한 온 필요한 ID 번호.

이것은 내가 지금하고 싶은 것입니다.

Answer 2

가 Content-Type 응답 헤더가 잘못 때문에 브라우저가 무엇을 알고하지 않는 경우로 같은 소리 쿠키 헤더 : 방화범이 나 헤더 이야기는 다음과 같은 포함 그것으로해라. application/json이어야합니다. Firebug의 네트워크 패널을 사용하여 실제 응답 헤더를 판별 할 수 있습니다.

Answer 3

submit 이벤트의 기본 동작을 취소하고 있습니까? 양식이 실제로 제출되고있는 것처럼 들립니다 (고전적인 의미에서 –, 즉 Firefox는 실제로 양식의 action에 지정된 페이지로 이동합니다).

Answer 4

이 plugin을 사용하면 ajax를 사용하여 MultiPart Forms를 제출할 수 있습니다.

Ajax 'success :'옵션을 사용하려면 ajax를 사용하여 양식을 제출해야합니다. 현재는 기본적으로 양식을 제출하는 submit() 기능을 사용하고 있습니다. json 데이터를 다운로드 한 파일 또는 브라우저에서 볼 수 있다는 것은 이러한 일이 발생하고 있음을 의미합니다.

는

당신은이 플러그인을 사용합니다 - 플러그인으로

(당신이 멀티 기능을 필요로하는 경우, 그렇지 않으면 그냥 일반 아약스 기능을 사용), 당신은 다음과 같이 사용합니다 :

$("#SubmitButton").click(function(){ 


$.ajaxFileUpload(
    { 
    url:serverurl, 
    secureuri:false, 
    fileElementId:elementId, 
    dataType: 'json', 
    success: function (data, status) 
    { 
    /* show success message */ 
    }, 
    error: function (data, status, e) 
    { 
    /* handle error */ 
    } 
}); 

}); 

당신이 만약 파일 업로드없이 그것을하고 싶다면, 그것을하는 쉬운 방법이 있습니다.

$("#SubmitButton").click(function(){ 

$.post('YOUR_URL', $("#FormName").serialize(), function(data){ 
    alert(data.name); // John 
    }, "json"); //specify return data is going to be json 


    }); 

Answer 5

은 아마

$('#cpFileUpload').ajaxForm({ 
     dataType: 'html',   
     success: function(data) {   
      eval(data);     
      if (data.result == false) { 
       alert('error on server side'); 
      } else {     
       // do what you want 
      } 
     }  
    }); 

을하는 데 도움이 그리고 서버 측에서 출력이 (만이 출력 또는 body 태그 내부에 다른 텍스트없이)처럼

var data = {result: true, html: 'ok'} 

너무 좋은하지해야하지만 작업

Answer 6

브라우저가 .json 파일을 다운로드하는 것을 방지하려면 Content-Type 헤더를 "text/html"로 설정하십시오.

PHP :

header("Content-type: text/html"); 

ASP.NET MVC :

$(".addform").ajaxSubmit({ 
      url: "file.php", 
      type: "POST", 
      dataType: "text", 
      iframe: true, 
      success: function (text) { 
       var data = $.parseJSON(text); 
      }, 
      error: function (xmlRequest, textStatus, errorThrown) { 
       alert(errorThrown); 
      } 
     }); 

작품을 완벽하게 :이 같은 텍스트 결과를 분석 할 필요가 자바 스크립트에서

return Json(obj, "text/html"); 

.

Answer 7

실제로 플러그인에 대한 ajaxSubmit 코드는 약간 해킹되었습니다. 쓰는 시간에 ajaxSubmit 작업을하려면 서버가 JSON 데이터를 content-type = text/html로 반환해야합니다. 플러그인은 자동으로 < \ pre> 태그 등을 꺼냅니다 (소스 참조). 나는 그들이 json을 잡아 당기기 위해 숨겨진 iframe을 얻으려고 할 때 json을 텍스트로 처리하고 iframe에서 파싱하기로 결정했을 것이라고 생각합니다.