Ajax請求無效。沒有連接到服務器

我創建了一個簡單的聯繫我們表單，它從文本字段捕獲數據，然後將數據轉換爲JSON對象並使用Ajax發送到服務器。但我總是得到錯誤。成功功能不起作用。我相信它沒有連接到服務器。Ajax請求無效。沒有連接到服務器

請告訴我哪裏出了問題。

HTML

body> 
    <h1> Contact Us </h1> 
    We value your feedback. Send in your questions, suggestions, ideas to help us improve our service. 

    <h2 align="Center"> Search us on Google Maps</h2> 
<br> 
    <br> 


    <form action="contact.php" name="form" method="post"> 

    <br>Name :<br> 

    <input type="text" name="fName" id="fName" required > 

    &nbsp; &nbsp; 
    <input type="text" name="lName" id="lName" required > 
    <br> <br> 
    Email: <br> 

    <input type="email" name="email" id="email" required > 

    <br> <br> 
    Comment: <br> 

    <textarea name= "comment" id = "comment" rows="8" cols="50" ></textarea> 

    <br> <br> 

    Rate our Website <select name="select" id="select" > 
    <option value = "1" name= "rate"> 1 </option> 
    <option value = "2" name= "rate"> 2 </option> 
    <option value = "3" name= "rate"> 3 </option> 
    <option value = "4" name= "rate"> 4 </option> 
    <option value = "5" name= "rate"> 5 </option> 

    </select> 

    <br> <br> 
    <input type="submit" name="submit" id="submit" value="Submit"> 

    </form> 
    </body>

的Javascript

<script> 

    $(document).ready(function(){ 
     $("form").submit(function(){ 
     alert("Submitted"); 

     var jsonArr = { 
      firstName :document.getElementById("fName").value, 
      lastName :document.getElementById("lName").value, 
      email  :document.getElementById("email").value, 
      comment  :document.getElementById("comment").value, 
      rate  :document.getElementById("select").value 
     }; 


      $.ajax({ 
       url  : "contact.php", 
       type  : "POST", 
       data  : JSON.stringify(jsonArr), 
       dataType : "json", 
       success : function(data){ 
       console.log("This is working", data); 
       }, 
       error  : function (error){ 
       alert("Error. not working"+ error); 
       console.log("Error. not working" , error); 
       } 

      }); 

    }); 

}); 

</script>

PHP

<html> 
    <body> 
    <?php 
    $decode = $_POST['firstName']; 
var_dump($decode); 
?> 
</body> 
</html>

來源

2015-04-16 Akila Randil

請注意，你沒有在'contact.php'文件關閉你的'php'碼 - 因此，PHP文件打印錯誤你的jscript不能訪問它。修復：'var_dump（$ decode）; ？>' 另一件事 - 學會使用**螢火蟲或Chrome控制檯**，在'網絡tab'你才能真正瞭解和理解發生了什麼事情。 –

你也應該把錯誤放在alert - > alert（「Error：」+ error）中; – greenhoorn

我已經糾正了一切，但我得到的是注意：未定義的索引：firstname在C：\ xampp \ htdocs \ contact.php在線5 NULL –

-1

添加一個id屬性，形成和嘗試次是代碼

$(document).ready(function(){ 
     $("form").submit(function(){ 
     alert("Submitted"); 




      $.ajax({ 
       url  : "contact.php", 
       type  : "POST", 
       data  : $("{formid}").serialize, 

       success : function(data){ 
       console.log("This is working", data); 
       }, 
       error  : function (error){ 
       alert("Error. not working")+ error; 
       console.log("Error. not working" , error); 
       } 

      }); 

    }); 

}); 

</script>

來源

2015-04-16 14:00:47

這爲什麼會這樣做有什麼不同？ – Blazemonger

首先這將刪除大量的代碼發送這將發送下拉選擇值到服務器也。 –

他已經向下拉值... – greenhoorn

試着改變你的JS（見下文）。觸發onclick事件，並防止可能的重複submisssions默認和重構你的json。看看這是否有效。

<script> 
    $(document).ready(function() { 
     $("#submit").click(function(e) { 
      e.preventDefault(); 
      $.ajax({ 
       url: "contact.php", 
       type: "POST", 
       data: { 
        'firstName': document.getElementById("fName").value, 
        'lastName ': document.getElementById("lName").value, 
        'email': document.getElementById("email").value, 
        'comment': document.getElementById("comment").value, 
        'rate': document.getElementById("select").value 
       }, 
       dataType: "json", 
       success: function(data) { 
        console.log("This is working", data); 
       }, 
       error: function(error) { 
        alert("Error. not working") + error; 
        console.log("Error. not working", error); 
       } 

      }); 

     }); 

    }); 
</script>

來源

2015-04-16 14:02:28 Mark

*您應該*綁定到'submit'事件而不是'click'事件，因爲形式不用點擊末尾的按鈕提交。 – Blazemonger

我收到一條警告，提示「Error。not working」 –

首先，嘗試添加斜線到您的網址，使其相對於你的主機：

$.ajax({ 
      url  : "/contact.php", 
      type  : "POST", 
      data  : JSON.stringify(jsonArr), 
      dataType : "json", 
      success : function(data){ 
      console.log("This is working", data); 
      }, 
      error  : function (error){ 
      alert("Error: " + error); 
      console.log("Error. not working" , error); 
      } 

     });

其次，閉上你的PHP代碼中contact.php文件：

<html> 
    <body> 
    <?php 
    $decode = $_POST['firstName']; 
var_dump($decode); 
</body> 
</html>

應該是：

<html> 
    <body> 
    <?php 
     $decode = $_POST['firstName']; 
     var_dump($decode); 
    ?> 
</body> 
</html>

來源

2015-04-16 14:05:40 taxicala

我已經更正了一切，但我得到的是一條通知：未定義的索引：第5行的C：\ xampp \ htdocs \ contact.php中的firstName NULL –

有幾個是起訴這裏：

取消默認提交

你是不是取消默認提交事件這樣的形式會得到提交的非Ajax的方式，有效地重新加載頁面（假設一切都在contact.php完成）。

你需要的東西，如：

$('form').on('submit', function(event) { 
    event.preventDefault(); 
    ... 
});

發送，預計服務器上的數據的類型

你是不是在允許您訪問的格式將數據發送到服務器它通過$_POST。您正在發送一個字符串以便達到該目的，您需要閱讀輸入。如果你想通過$_POST來訪問它，你需要發送一個查詢字符串或者（因爲它們被自動編碼......）一個對象。讓你的編碼數據，最簡單的方法是使用：

... 
data: $('form').serialize(), 
...

，或者，如果你想用你的一套鑰匙：

... 
data: jsonArr, // sending an object is fine, jQuery will encode it correctly for you 
...

PHP語法錯誤

你的PHP有語法錯誤正如之前所提。但是，由於下一個問題，這與此無關。

僅返回JSON從PHP腳本

與你的PHP最大的問題是，它返回的HTML，而不是JSON。正如你所設定的：

dataType : "json",

你的php腳本需要返回有效的json。所以沒有標籤，或除了單個json_encode()以外的任何回聲。

因此，對於你的榜樣，它應該只包含：

<?php 
$decode = $_POST['firstName']; 
// do some more stuff? 

echo json_encode($decode); 
exit;

來源

2015-04-16 14:09:43 jeroen

應該怎樣在json_encode（）裏面？ –

@AkilaRandil你想返回到jQuery中的成功函數。因此，一個（嵌套...）數組或對象包含您需要的所有信息。在成功函數中，它將作爲javascript對象提供，只需嘗試'console.log（data）'。如果你想返回文本或html，你需要刪除'dataType：「json」，'。 – jeroen

我想要一個JSON。但我在我的控制檯中出現這個錯誤。「錯誤。不工作parsererror」。基本上，需要做的是將數據放入JSON對象中，並將其發送到PHP，然後提取數據。 –

Ajax請求無效。沒有連接到服務器

回答

相關問題