需要有关嵌套 jquery 函数的帮助答案

【问题标题】：need help with nested jquery function需要有关嵌套 jquery 函数的帮助
【发布时间】：2011-03-15 12:12:37
【问题描述】：

请在下面找到我的代码。我的问题是我内部的 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>

非常感谢任何指点。

谢谢！

【问题讨论】：

你的意思是它根本没有被执行？你能添加一个error() 回调吗？我会假设服务返回一个错误，它不会触发success 回调。
jQuery.get 根本没有被执行。我知道这一点是因为函数内部的警报不起作用。外部警报可以，但内部警报不会。

标签： javascript jquery jsonp nested-function

【解决方案1】：

您遇到的问题是您没有做任何事情来阻止您的表单被提交，因此它在有机会从 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>

【讨论】：

这在部分执行第二个功能方面起作用。我的意思是第二个警报现在也会弹出。但是，来自 Web 服务的数据仍然没有显示出来。这是否与将信息附加到正文标签有关？我似乎无法弄清楚。感谢您的帮助！
当我运行如上所示的脚本时，我看到表单下方附加了一系列日期段落？

【解决方案2】：

打开 Fiddler 或 Firebug 并观察 HTTP 调用结束。您将在那里看到 HTTP 错误消息。此外，在 Chrome 或 Firefox 中打开控制台以查看潜在的 JavaScript 错误。

【讨论】：

是的，我试过了，但它没有显示任何错误消息。
它是否表明您的请求发出并返回成功的响应代码？
从提交请求后新信息没有附加到body标签的事实来看，我注意到请求似乎没有得到满足。虽然，我似乎无法指出逻辑错误是什么。
这是我使用 firebug 观察请求时得到的 ---> jsonp1279132111667({ "data": { "request": [ {"query": "undefined", "type": "未知" } ] }})

【解决方案3】：

部分问题可能是您的 .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');

【讨论】：

我也试过没有额外的括号，它没有工作。因此，我包含了括号，以便它调用函数执行。无论哪种方式，它都不起作用。

【解决方案4】：

我会不顾一切地猜测（基于 url 'http://www.worldweatheronline.com/feed/weather.ashx?q=' ）您正在尝试对外部站点执行 AJAX 请求。这违反了Same Domain Policy 并且会静默失败。

【讨论】：

不是这样的，他用的是jsonp