簡單的hello世界使用jQuery ajax和php不起作用

我想要做一個簡單的hello world使用jQuery和Ajax從同一個文件夾中獲取PHP的響應。簡單的hello世界使用jQuery ajax和php不起作用

jQuery的代碼是：

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 

    <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" 
    rel="stylesheet" type="text/css"> 
    <link href="http://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css" 
    rel="stylesheet" type="text/css"> 

    <script type="text/javascript"> 
     function jsonIt(){ 
      var x = document.getElementById("input1").value; 
      var y = document.getElementById("input2").value; 

      var obj = '{' 
         +'"id" : "'+x+'",' 
         +'"name" : '+y+'' 
         +'}'; 

      var person = { 
       id:x, 
       name:y 
      }; 

      var str_json = JSON.stringify(person); 

      $.ajax({ 
       type: 'get', 
       url: 'a.php', 
       dataType: 'text', 
       data: obj, 
       success: function(data) { 
        alert(data); 
       }, 
       error: function(e){ 
         console.log(e.message); 
         //alert('error'); 
        } 
      }); 
      alert("Pause"); 
     } 


    </script> 
</head> 

<body> 
    <div class="section"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <form class="form-horizontal" role="form"> 
         <div class="form-group"> 
          <div class="col-sm-2"> 
           <label for="inputEmail3" class="control-label">Email</label> 
          </div> 
          <div class="col-sm-10"> 
           <input type="text" class="form-control" id="input1" placeholder="Email"> 
          </div> 
         </div> 
         <div class="form-group"> 
          <div class="col-sm-2"> 
           <label for="inputPassword3" class="control-label">Password</label> 
          </div> 
          <div class="col-sm-10"> 
           <input type="text" class="form-control" id="input2" placeholder="Password"> 
          </div> 
         </div> 
         <div class="form-group"> 
          <div class="col-sm-offset-2 col-sm-10"> 
           <div class="checkbox"> 
            <label> 
             <input type="checkbox">Remember me</label> 
           </div> 
          </div> 
         </div> 
         <div class="form-group"> 
          <div class="col-sm-offset-2 col-sm-10"> 
           <button type="submit" class="btn btn-default" onclick="jsonIt()">Sign in</button> 
          </div> 
         </div> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

簡單地說，使用HTML叫：

<button type="submit" class="btn btn-default" onclick="jsonIt()">Sign in</button>

，而PHP的，在同一個文件夾，名爲a.php只會是：

<?php echo "Helo world"; ?>

因此，當我點擊調用函數jsonIt()的按鈕時，我得到以下響應：「[object XMLDocument]」而不是你好世界。

可能是什麼？

EDITED

修改後頭部代碼將是：

<head> 

    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
      <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
      <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
     ... 

     <script type="text/javascript"> 
      $(document).ready(function() { 

       function jsonIt(){ 


        $.ajax({ 
         method: 'get', 
         url: 'a.php', 
         done: function(data) { 
          alert(data); 
         }, 
         fail:function(jqXHR, textStatus) { 
          console.log("Request failed: " + textStatus); 
         } 
        }); 

        //alert("Pause"); 
       } 

       $(document).on('click', 'button[type="submit"]', function(e) { 
        e.preventDefault(); // prevents the default click action 
        jsonIt(); 
       }); 
      }); 


     </script> 
    </head>

而像按鈕的標記：

<button type="submit" class="btn btn-default" >Sign in</button>

但它劇照回到我「[對象XMLDocument]「而不是Hello world。

來源

2015-06-29 selan

你是怎麼稱呼你的AJAX功能的？我們可以看到代碼/標記嗎？你看過控制檯的錯誤嗎？你有沒有包含jQuery庫？我問的問題太多了嗎？你想[教程]（http://www.jayblanchard.net/basics_of_jquery_ajax.html）？ –

有沒有更多的JS代碼，或者是它？你的數據對象'obj'永遠不會在任何地方定義。 – mituw16

通多了一個選項，以AJAX調用'數據類型：「text''或'過程數據：FALSE'那麼它不會嘗試從響應 – Toumash

如果你打算將jQuery腳本添加到頁面，你需要圍繞他們的文件準備好處理程序上：

<script type="text/javascript"> 
$(document).ready(function() { 
    function jsonIt(){ 
      $.ajax({ 
       method: 'GET', 
       url: 'a.php', 
       //url: 'http://practica00.tk/a.php', 
       dataType: 'text' 
      }) 
      .done(function(data) { 
        alert(data); 
       }) 

      .fail (function(jqXHR, textStatus) { 
        console.log("Request failed: " + textStatus); 
       }); 
     alert("Pause"); 
    } 

    $(document).on('click', 'button[type="submit"]', function(e) { 
     e.preventDefault(); // prevents the default click action 
     jsonIt(); 
    }); 
}); 
</script>

文檔準備處理程序確保所有的DOM已經加載之前jQuery運行並附加其事件處理程序。如果你沒有包裝在文檔就緒處理程序中，那麼jQuery可能會嘗試將事件處理程序和方法附加到尚未加載到DOM中的項目。

你真的不應該使用內聯JavaScript來調用函數，特別是因爲你有jQuery提供給你。如果你打算還是需要防止默認操作。

<button type="submit" class="btn btn-default" onclick="jsonIt(); return false;">Sign in</button>

如果您想使用jQuery的點擊，你會從按鈕刪除內聯JavaScript和以下內容添加到您的jQuery代碼：

$(document).on('click', 'button[type="submit"]', function(e) { 
    e.preventDefault(); // prevents the default click action 
    jsonIt(); 
});

我不知道你爲什麼'你可以用任何JSON字符串做任何事情，因爲你不會在任何地方使用它。你永遠不會定義obj，所以你不應該發送它。

編輯：我已經更新了我的答案，以反映更正確的AJAX返回方法與正在使用的jQuery版本。

棄用聲明：從jQuery 1.8開始，棄用jqXHR.success（），jqXHR.error（）和jqXHR.complete（）回調。要準備代碼以便最終刪除它們，請改用jqXHR.done（），jqXHR.fail（）和jqXHR.always（）。

如果你想做一個簡單的「hello world」，你應該在添加任何複雜性之前刪除任何分散注意力的代碼。

此外：要執行AJAX（以及PHP），您必須從運行的Web服務器執行代碼，無論是本地主機還是測試主機，都可以正確執行。

來源

2015-06-29 18:07:10

請不要在評論中轉儲代碼。編輯原始帖子以添加任何新信息。 –

obj已定義，但我將在未來的php代碼中使用它。另一方面，錯誤仍然與返回的代碼是：[對象XMLDocument] – selan

您是否將'type：'get''更改爲'method：'get''？ –

簡單的hello世界使用jQuery ajax和php不起作用

回答

相關問題