通过Ajax传递变量与Jquery标签

我有一个问题，我一直坚持了几天，我只是不能似乎弄明白。我想通过使用JQuery选项卡的AJAX传递一个变量。通过Ajax传递变量与Jquery标签

这是我的使用场景：用户用JQuery选项卡加载页面，默认只是一些文本。在页面上，我有一个包含userid的会话变量。当他们点击第二个选项卡时，它将该userid变量传递给脚本。我无法让它通过！

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> 
<script type="text/javascript" src="/js/jquery-ui-1.8.23.custom.min.js"></script> 
<link rel="stylesheet" href="js/css/smoothness/jquery-ui-1.8.23.custom.css" /> 
<script> 
var postData = {}; 
$("#tabs").tabs({ 
select: function(event, ui) { 
    postData = { 
     userid: parseInt($(ui.tab).data('userid')); 
    }; 
}, 
ajaxOptions: { 
    type: 'POST', 
    data: postData, 
    error: function(xhr, status, index, anchor) { 
     $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo."); 
    } 
} 
}); 
</script> 

<div id="tabs"> 
<ul> 
    <li><a href="#tabs-1">Intro</a></li> 
    <li><a href="Custom/div_charts_test2.html" data-userid="1234">Department</a></li> 
</ul> 
<div id="tabs-1"> 
    <p>Text information goes here</p> 
</div> 
</div>

来源

2012-09-29 Kevin Johnson

大声笑，其实，你的代码看起来像这样的重复：http://stackoverflow.com/questions/8301193/jquery-ui-tabs-how-to-send-ajax-request-with-post-data。 ..这不适合你吗？您是否在开发人员工具的“网络”选项卡中检查了该请求，看看它是否被制作以及您获得了什么回复？ – Shanimal

是的，我看到这个帖子，它似乎没有帮助！当检查网络标签时，我看到正在发布的文章，它只是空白的 –

你在服务器上运行它吗？如果它运行在file：//那么它不会“发布”，你会得到一个错误。但你应该看到在网络标签中的错误 http://skitch.shanimal.com/Developer_Tools_-_file__Users_Apple_Desktop_tmp.html%23tabs-1-20121001-060033.png – Shanimal

我试了IE和Firefox的测试代码，它似乎工作得很好。

的test.html

<html> 
    <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
      <title>jQuery UI Example Page</title> 
      <link type="text/css" href="css/smoothness/jquery-ui-1.8.23.custom.css" rel="stylesheet" /> 
      <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
      <script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script> 
    <script> 
       var postData; 
       var datavalue; 
       $(function(){ 
        $('#tabs').tabs(
         { 
          select: function(event, ui) { 
           datavalue = parseInt($(ui.tab).data('userid')); 
           postData = { 
            userid:datavalue 
           }; 
          }, 
          ajaxOptions: { 
           type: 'POST', 
           data: postData, 
           dataType: 'html', 
           complete: function(xhr, status, index, anchor) { 
            //alert(postData.userid); 
           }, 
           error: function(xhr, status, index, anchor) { 
            $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo."); 
           } 
          } 
         } 
        ); 
       }); 
    </script> 
    </head> 
    <body> 
     <div id="tabs"> 
      <ul> 
       <li><a href="#tabs-1">Intro</a></li> 
       <li><a href="Department.html" data-userid="1234">Department</a></li> 
      </ul> 
      <div id="tabs-1"> 
       <p>Text information goes here</p> 
      </div> 
     </div> 
    </body> 
    </html>

Department.html：

   This is my department page.

我作出前两行的变化（变量声明：改性POSTDATA并加入一个新的变量来保存用户ID值）。修改了分配给“选择”的功能。这似乎正在工作，因为我能够通过ajaxOptions的“错误”函数中的警报来验证用户标识。

希望这会有所帮助。如果没有，请让我知道。

来源

2012-09-29 02:08:47

感谢您的回应！我尝试了你的建议，并且我似乎无法将它发布，甚至通过在Firebug中查看它。我甚至尝试在类型下添加url：custom/div_charts_test2.html，但它仍然不会传递该变量。有任何想法吗？：/ –

我尝试在Firefox（14.0.1）和iExplorer（7.0及更高版本）中使用虚拟页面进行验证：Department.html。它似乎工作正常。我使用完整的测试代码更新了上述答案。 –

更改您的选择功能以设置ajaxOptions。

select:function(event, ui) { 
    $("#tabs").tabs("option", "ajaxOptions",{ 
     type: 'POST', 
     data: {userId:$(ui.tab).data('userid')}, 
     error: function(xhr, status, index, anchor) { 
      $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo."); 
     } 
    }) 
},

当您最初定义ajaxOptions时，它会将此值用于任何后续请求。但由于某种原因，它没有获得现在的价值。我甚至试图改变只是在选择userId和它未能修改它。他们可能会克隆价值，我不确定。无论如何，如果你在请求之前设置了ajaxOptions，它会发送你想要的。

对不起半烤的答案，但我不能放过它。 +1的问题。我必须做一点研究才能找出它为什么不起作用。

注意：您可能已经知道这一点，但您必须在服务器上运行POST。 POST到本地文件系统将产生一个错误。

来源

2012-10-01 13:59:46 Shanimal

还有一件事。您的服务器设置是否处理.html扩展名？我将第二个选项卡中的网址指向了一个php文件，其内容如下：<？php echo“

HELLO WORLD {$ _REQUEST ['userId']}

”;'打印出'HELLO WORLD 1234' – Shanimal

通过Ajax传递变量与Jquery标签

回答

相关问题