0

以下の私のコードを見つけてください。私の問題は、内部の jQuery.get() が実行されないことです。誰かがこれで私を助けてくれますか?

jQuery(document).ready(function() { 
   $('.error').hide();  
   $(".button").click(function() {  
    // validate and process form here
      $('.error').hide();  
      var zipCode = $("input#name").val();  
      if (zipCode == "") {  
        $("label#name_error").show();  
        $("input#name").focus();  
        return false;  
      }
    var key = 'ac9c073a8e025308101307';
    var noOfDays = 5;
    var url = 'http://www.worldweatheronline.com/feed/weather.ashx?q=' + zipCode + '&format=json&num_of_days=' + noOfDays + '&key=' + key;
    alert(url); 
    jQuery.get(url, function(test) { 
    alert(url); 
        $.each(test.data.weather, function(i, item){
        $("body").append("<p>Date: "+item.date+"</p>");
        if ( i == 3 ) return false;
  }); }, 'jsonp')();
});  
}); 

私のhtmlフォームは次のようになります

<div id="contact_form">  
 <form name="contact" action="">  
   <fieldset>  
     <label for="name" id="name_label">Name</label>  
     <input type="text" name="name" id="name" size="30" value="" class="text-input" />  
     <label class="error" for="name" id="name_error">This field is required.</label>  

     <br />  
     <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />  
   </fieldset>  
 </form>  
</div>  

ポインタをいただければ幸いです。

ありがとう!

4

4 に答える 4

4

あなたが経験している問題は、フォームの送信を止めるために何もしていないため、worldweatheronline.com からデータを取得する前にフォームを送信してしまうことです。

クリック ハンドラーを次のように変更します。

    $(".button").click(function(event) { 
        event.preventDefault();

あなたが望むように動作する私の完成したサンプルコードは次のとおりです。

<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
    jQuery(document).ready(function() { 
        $('.error').hide();  
        $(".button").click(function(event) { 
            event.preventDefault();
            // validate and process form here
            $('.error').hide();  
            var zipCode = $("input#name").val();  
            if (zipCode == "") {  
                $("label#name_error").show();  
                $("input#name").focus();  
                return false;  
            }
            var key = 'ac9c073a8e025308101307';
            var noOfDays = 5;
            var url = 'http://www.worldweatheronline.com/feed/weather.ashx?q=' + zipCode + '&format=json&num_of_days=' + noOfDays + '&key=' + key;

            alert('first'+url); 

            jQuery.get(url, function(test) { 
                alert(url); 
                $.each(test.data.weather, function(i, item){
                    $("body").append("<p>Date: "+item.date+"</p>");
                    if ( i == 3 ){
                        return false;
                    }
                }); 
            }, 'jsonp');
        });  
    });
</script>
</head>
<body>
<div id="contact_form">  
 <form name="contact" action="">  
   <fieldset>  
     <label for="name" id="name_label">Name</label>  
     <input type="text" name="name" id="name" size="30" value="" class="text-input" />  
     <label class="error" for="name" id="name_error">This field is required.</label>  

     <br />  
     <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />  
   </fieldset>  
 </form>  
</div>  
</body>
</html>
于 2010-07-13T20:26:12.023 に答える
2

Fiddler または Firebug をオンにして、HTTP 呼び出しが発信されるのを確認します。そこに HTTP エラー メッセージが表示されます。また、Chrome または Firefox でコンソールをオンにして、潜在的な JavaScript エラーを確認してください。

于 2010-07-13T20:21:05.470 に答える
1

問題の一部は、.get() 関数呼び出しの後の余分な括弧のセットである可能性があります。あなたが持っている:

jQuery.get(url, function(test) { 
    alert(url); 
    $.each(test.data.weather, function(i, item){
    $("body").append("<p>Date: "+item.date+"</p>");
    if ( i == 3 ) return false;
}); }, 'jsonp')();

そのはず:

jQuery.get(url, function(test) { 
    alert(url); 
    $.each(test.data.weather, function(i, item){
        $("body").append("<p>Date: "+item.date+"</p>");
        if ( i == 3 ) return false;
    }); 
}, 'jsonp');
于 2010-07-13T20:20:01.180 に答える
0

私は手足に出て、( url に基づいて'http://www.worldweatheronline.com/feed/weather.ashx?q=') 外部サイトへの AJAX 要求を実行しようとしていると推測します。これは、 Same Domain Policyに違反するため、警告なしで失敗します。

于 2010-07-13T20:21:02.587 に答える