带引导程序的AJAX请求

时间:2015-03-27 15:38:31

标签: jquery ajax twitter-bootstrap

所以我有这个从数据库中取出单词定义的小脚本。它工作正常。但是一旦我尝试通过在标题中包含Bootstrap CDN链接来替换默认的html输入和按钮与Bootstrap的东西,它就不再有效了。没有错误,但脚本根本无法获取结果。

我尝试过使用不同的CDN链接,以及我有限的jQuery知识。但我卡住了。下面是我的脚本。我没有包含将JSON响应到jQuery AJAX脚本的PHP脚本,因为它也可以正常工作。

如何修复脚本以使其正常工作?现在,即使只是在标题中插入CDN链接,脚本也会停止工作。

$('document').ready(function(){
  $('#word-submit').on('click', function(){
    var word = $('#word').val();
    if ($.trim(word) != ''){
      $.post('ajax/name.php', {word: word}, function(data){
        var obj = jQuery.parseJSON(data);
        console.log(obj);
      });
    };			
  });
});
<html>
  <head>
    <title>Welcome</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">

  </head>
  <body>
    <div id="container">
      <form autocomplete="off" class="form-inline">
        <input type="text" id="word" >
        <input type="button" id="word-submit" value="Tam" class="sr-only" >
      </form>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <script src="js/global.js" charset="UTF-8"></script>

   </body>
</html>

1 个答案:

答案 0 :(得分:0)

您无法使用Ajax加载整个页面。您应该只加载正文中包含的信息。如果您有其他css / javascript文件,那么在从Ajax加载内容后,您应该将它们附加到页面。