2010-03-15 3 views
0

jquery로 처음으로 게임을하고 간단한 AJAX를 설정하여 작업 방법을 더 잘 이해할 수있게하려고합니다. 불행히도, 나는 전체적으로 많이 모른다.

<html> 
<head> 
<title>AJAX attempt with jQuery</title> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    function ajax(str){ 
    $("document").ready(function(){ 
    $.post("ajaxjquerytest.php",str,function(){ 
     $("p").html(response); 
     }); 
    }); 
</script> 
</head> 
<body> 
<input type="text" onchange="ajax(this.value)"></input> 
<p>Age?</p> 
</body> 
</html> 

를 그리고 여기가 이야기하고는 PHP입니다 : 다음은 스크립트와 HTML입니다

<?php 
$age = $_POST['age']; 

if ($age < 30) 
    { 
    echo "Young"; 
    } 
else if ($age > 30) 
    { 
    echo "Old"; 
    } 
else 
    { 
    echo "you're 30"; 
    } 
?> 
+0

'함수 아약스 (str) {'가 닫는 중괄호를 놓치지 않습니까? –

+0

가 felix의 응답을 시도했지만 여전히 작동하지 않습니다. Firebug가 "Uncaught ReferenceError : 응답이 정의되지 않았습니다."라는 메시지가 나타납니다. – JoeCortopassi

답변

5

$.post() 기능은 str 매개 변수에 대한 액세스 권한이있는 경우 확실하지. 대신을 시도해보십시오 DOM이 완전히로드 된 후

<html> 
<head> 
<title>AJAX attempt with jQuery</title> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    $("document").ready(function(){ 
     $('input').change(function() { 
      $.post("ajaxjquerytest.php",{'age': $(this).val()},function(response){ 
       $("p").html(response); 
      }); 
     }); 
    }); 
</script> 
</head> 
<body> 
<input type="text" /> 
<p>Age?</p> 
</body> 
</html> 

이 입력 요소에 onChange 핸들러를 첨부합니다.

$(document).ready()을 생략하면 접근 방식이 작동해야합니다. 그러나 요소에 JS 함수를 추가하는 것이 jQuery를 사용하는 방법입니다.

게다가 DOM 트리 전체를 빌드 한 후에 실행해야하는 코드를 $(document).ready()으로 감쌀 만하면됩니다. 당신의 경우, 당신은 단지 함수를 정의하고 있습니다. DOM이로드 될 때까지 함수를 호출 할 수 없으므로 문서 준비를 사용할 필요가 없습니다.

.post()의 설명서를 읽으십시오!

+0

은 제안 된 변경 사항을 적용하고 두 가지 오류를 없앴습니다. 그러나 이제 방화범이 내게 알려줍니다. '잡히지 않은 ReferenceError : 응답이 정의되지 않았습니다.' – JoeCortopassi

+0

@Cortopasta : AI 당신이'function (response) {$ ("p") .html (response)}'해야만합니다. 내 코드를 업데이트했습니다. 또한 서버에 데이터를 보내는 방법을 변경해야합니다. 즉, 'age': $ (this) .val()}이어야합니다. 가장 좋은 점은 http://api.jquery.com/jQuery.post/ –

1

이와 같은 문제를 디버깅하는 가장 쉬운 방법은 HTTP 요청을 볼 수있는 도구를 사용하는 것입니다. 에 net panel을 입력하십시오. 그러면 요청 URL, 전송 된 후 데이터 및 서버 응답이 표시됩니다. 그런 다음 PHP 또는 JS 코드가 문제인지 여부를 알 수 있습니다. 이에서

+0

문서를 읽거나 http://www.fiddler2.com/fiddler2/에서 fiddler2를 사용할 수도 있습니다. – Jayrox

1

변경 함수 :

function ajax(str){ 
    $("document").ready(function(){ 
     $.post("ajaxjquerytest.php",str,function(){ 
      $("p").html(response); 
     }); 
    }); 
} 

에 : 페이지가 처음로드 될 때

function ajax(str){ 
    $.post("ajaxjquerytest.php",str,function(){ 
     $("p").html(response); 
    }); 
} 

첫째, $(document).ready() 구조가 실행됩니다. 둘째, "문서"는 따옴표로 묶어서는 안됩니다.

<form> 
    <input type="text" /> 
    <p>Age?</p> 
    <input type="submit" /> 
</form> 

변경 :

$('input').change(function() { ... } 

에 :

$('form').submit(function() { ... } 
0

귀하의 ajax() 함수는 document#ready 이벤트 핸들러를 연결한다 마지막으로, 당신은 더 나은 성공을 할 수도 있습니다. document#ready은 페이지가 처음로드 될 때 실행되고 다시 실행되지 않습니다. 따라서 $.post은 실행되지 않습니다. 이 기능을 변경하십시오.

function ajax(str){ 
    $.post("ajaxjquerytest.php",str,function(){ 
     $("p").html(response); 
    }); 
} 
2

게시 한 코드에 몇 가지 문제가 있습니다.

  1. "ajax"함수에서 중괄호를 닫는 것처럼 보이지 않으므로 페이지를로드 할 때 JS 오류가 발생합니다.
  2. 당신도

    function ajax(str){ $.post("ajaxjquerytest.php",str,function(){ $("p").html(response); }); } 를 작성하거나 펠릭스와 $(document).ready

  3. 당신의 PHP 코드는 매개 변수라는 이름의 나이를 기대하지만, 당신이있어하지만 당신은 명시 적으로 이름을 포기하지 않을 것 같아 제안 사용해야합니다 코드에서 적절하게 명명 된 속성이 { AGE: str } 인 JS 클래스를 만들어야합니다. jQuery documentation에서이를 수행하는 몇 가지 예가 있습니다.

  4. 또한 JavaScript에서 this 키워드를 사용하는 데주의하십시오. 이는 context it's used in에 따라 크게 다른 의미를 가질 수 있습니다. (사용하는 방법이 페이지 맨 아래에 설명되어있는 것처럼 보입니다.)

펠릭스의 예부터 시작해서 거기에서 일하는 것이 더 쉽습니다.

+1

이유는 Felix의 대답이 ' 당신을 위해 일하는 것은 콜백 메소드 시그니처 때문에'function() {...}'은 응답 매개 변수를 정의하지 않습니다. 실제로는'function (response) {...} '이어야합니다. – R0MANARMY

+0

# 3에서 언급 한 PHP 스크립트의 값 – JoeCortopassi

+0

'$ .post ( "ajaxjquerytest.php", {age : str}, function() {...}); 또한 제공된 jQuery 문서 링크를 따르면 스크립트에 인수를 보내는 방법에 대한 몇 가지 예가 있습니다. – R0MANARMY

4

여기서 문제는 응답이 정의되지 않는다는 것입니다. 함수에 매개 변수로 전달되어야합니다. 이것을 시도하십시오 :

function ajax(str){ 
    $.post("ajaxjquerytest.php",str,function(response) { 
     $("p").html(response); 
    }); 
} 
관련 문제