2014-02-12 1 views
0

저는 Ajax에 관한 새 이야기이고 첫 번째 스크립트에 문제가 있습니다. 내 의도는 PHP 페이지에 양식의 변수를 전달하고 같은 페이지의 div에 결과를 표시했다. 여기Ajax 스크립트가 PHP 페이지 변수를 전달합니다.

내 코드 :

$(function() { 
//twitter bootstrap script 
    $("button#newDownload").click(function(){ 
      $.ajax({ 
       type: "POST", 
      url: "response_normal.php", 
      data: $('form.MyForm').serialize(), 
       success: function(msg){ 
         $("#MyResult").html(msg) 
       }, 
      error: function(){ 
       alert("failure"); 
       } 
       }); 
    }); 
}); 

당신이 날 도울 수있는 문제를 찾아 주시기 바랍니다 :

<!DOCTYPE html> 
<html> 

<head> 
    <title>Organazier 1.0</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <link href="dist/css/bootstrap.css" rel="stylesheet" /> 
</head> 

<body> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-xs-6 col-md-4" /> 
      <div class="col-xs-6 col-md-4"> 
       <h1>Test 1.0</h1> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-6 col-md-4" /> 
      <div class="col-xs-6 col-md-4"> 
       <form class="MyForm"> 
        <div class="form-group"> 
         <label for="link">link</label> 
         <input type="link" class="form-control" id="link" name="link" value="Value1" /> 
        </div> 
        <div class="form-group"> 
         <label for="Categoria">Categoria</label> 
         <input type="Categoria" class="form-control" id="Categorie" name="Categorie" value="Value2" /> 
        </div> 
        <div class="form-group"> 
         <label for="Titolo">Titolo</label> 
         <input type="Titolo" class="form-control" id="Title" name="Title" value="Value3" /> 
        </div> 
        <button id="newDownload" type="submit" class="btn btn-primary">Download</button> 
       </form> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-6 col-md-4" /> 
      <div class="col-xs-6 col-md-4"> 
       <h2>Result:</h2> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-6 col-md-4" /> 
      <div class="col-xs-6 col-md-4" name="MyResult" id="MyResult" /> 
     </div> 
    </div> 
    <script src="https://code.jquery.com/jquery.js" /> 
    <script src="dist/js/bootstrap.min.js" /> 
    <script src="dist/js/ajaxform.js" /> 
</body> 

</html> 

ajaxform.js 스크립트는 다음과 같다?

는 아약스에서, 매우 Pazzeo

+1

으로 입력하면 문제가 발생합니다. –

+0

요청이 실행 되었습니까? 결과 (실행 된 경우)를 보려면 개발자 도구/방화범의 네트워크 탭을 참조하십시오. async : ajax/jquery 요청에서 "false"를 사용합니다 (true 일 경우 요청이 취소되는 경우가 많습니다). developertools/firebug를 사용하여 요청이나 다른 장소에서 js 구문에 잘못된 것이 없는지 확인하십시오. @Dagon이 물어 보았 듯이보다 구체적으로 질문하십시오. – Allende

+0

자신이 디버깅하려고하는 질문에 대한 요구 사항, 특히 언어를 혼합 할 때 영역을 좁힐 수 있어야합니다. –

답변

0

만들기 비동기 거짓을 주셔서 감사하고 그것을 작동합니다. 내 서버에서 테스트하여 문제가되는 것으로 확인했습니다.

$(function() { 

$("button#newDownload").click(function(){ 
     $.ajax({ 
      type: "POST", 
     url: "response_normal.php", 
     async:false, 
     data: $('form.MyForm').serialize(), 
      success: function(msg){ 
        $("#MyResult").html(msg) 
      }, 
     error: function(){ 
      alert("failure"); 
      } 
      }); 
}); 
}); 
0

아니라 스크립트를 잘 보인다, 그 추천 : 스크립트에없는 어쩌면 잘못된 당신의 .PHP를 보여 주지만, 노력이 :

$(function() { 
//twitter bootstrap script 
$("#newDownload").click(function(){ // Im only change this line 
     $.ajax({ 
      type: "POST", 
      url: "response_normal.php", 
      data: $('form.MyForm').serialize(), 
      success: function(msg){ 
        $("#MyResult").html(msg); // and this the semicolon 
      }, 
      error: function(){ 
       alert("failure"); 
       } 
      }); 
}); 

}); 당신이 나 같은 AJAX의 새로운 경우

나는 파이어 폭스의 확장이며, 사용 방화범을 추천하고 당신은 당신이 사용하여 양식을 제출하게 할 때 PHP와 무엇을 반환 PHP

0

을받을 것 아약스를 보낼 것을 볼 수 있습니다 아약스, 당신은 형태가 아약스 using preventDefault() method

전 사용하기 전에 기본 동작을 제출 중지해야합니다 :

$(function() { 
    //twitter bootstrap script 
    $("#newDownload").on('click',function(e){ 
      e.preventDefault(); 
      $.ajax({ 
       type: "POST", 
       url: "response_normal.php", 
       data: $('form.MyForm').serialize(), 
       success: function(msg){ 
         $("#MyResult").html(msg); 
       }, 
       error: function(){ 
         alert("failure"); 
       } 
      }); 
    }); 
}); 

Developer tool for chrome 또는 0으로 아약스 행동과 아약스 사용하는 응답 network 탭을 테스트하려면탭을 firebug with firefox

관련 문제