初學者的簡單AJAX請求

我正在嘗試爲初學者找到一些非常簡單的AJAX請求，並且我沒有發現任何東西，只有一小部分代碼不起作用......那麼，有人可以幫助我並告訴我有什麼不對？初學者的簡單AJAX請求

我Klient部分：

<form method="GET" action="" id="f"> 
    <label for="name">Your name: </label> <input type="text" id="name" name="name"> 
    <input type="submit" onclick="yourName(document.getElementById('name').value)"> 
</form> 
<span id="result"></span> 
<script> 
    function yourName(str) 
    { 

     var xmlhttp=new XMLHttpRequest(); 
     xmlhttp.open("GET","f.php?name="+str,true); 
     xmlhttp.send(); 

     xmlhttp.onreadystatechange=function() 
     { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
       document.getElementById("result").innerHTML=xmlhttp.responseText; 
      } 
     } 

    } 
</script>

和服務器部分：

<body> 

<?php 

// Send the data back 
echo "Your name is: ".$_GET['name']; 

?> 
</body>

我不是JavaScript的一個大的朋友，這是不可理解的對我說：（

來源

2014-02-05 user2202284

您可能會發現使用'jQuery'的ajax函數更容易。它們比原生JS簡單得多。 –

-2

使用jQuery - AJAX請求很簡單吧：

$.get('f.php?name=' + str, function(result) { 
    $("#result").html(result); 
});

更多信息：http://api.jquery.com/jQuery.get/

來源

2014-02-05 11:54:58

典型的[Not enought jQuery]（http://meta.stackexchange.com/q/45176/223068）回答。 – DontVoteMeDown

你的功能被綁定到click事件上的一個提交按鈕。

當您單擊它時，會發送Ajax請求，然後表單在響應返回前提交（重新加載頁面）。

從onclick屬性返回false以停止正常行爲。

來源

2014-02-05 11:56:41 Quentin

試試這個：

<form method="GET" action="" id="f"> 
    <label for="name">Your name: </label> <input type="text" id="name" name="name"> 
    <input type="submit" onclick="return yourName(document.getElementById('name').value)"> 
</form> 

<span id="result"></span> 

<script> 
function yourName(str) 
{ 

    var xmlhttp=new XMLHttpRequest(); 
    xmlhttp.open("GET","f.php?name="+str,true); 
    xmlhttp.send(); 

    xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      document.getElementById("result").innerHTML=xmlhttp.responseText; 
     } 
    } 

    return false; 

} 
</script>

我認爲，當你按下提交按鈕的頁面被重定向？您需要爲您的onclick屬性添加return，然後在實際的javascript函數中返回false，以便不提交表單。

來源

2014-02-05 11:56:43

你對javascript。

您需要更改您的HTML：

<form method="GET" action="" id="f"> 
    <label for="name">Your name: </label> <input type="text" id="name" name="name"> 
    <input value=" submit" type="button" onclick="yourName(document.getElementById('name').value)"> 
</form>

變化按鈕的類型。如果您使用type="submit"，那麼當您按下它時會提交您的表單。

來源

2014-02-05 11:58:22

非常感謝！ :)現在它工作完美。 :) – user2202284

@ user2202284：如果它工作，你應該接受我的回答:) –

如果你真的想要去生JS使用this tutorial，但如果你想讓你的生活輕鬆使用JQuery。

首先您可以使用Ajax Form Plugin或jQuery序列化函數中的ajaxForm/ajaxSubmit函數。（你不這樣，需要把任何東西JS在HTML除了在底部提供的鏈接）給ajaxForm：按下提交按鈕時

$("#f").ajaxForm({url: 'server.php', type: 'get'})

或

$("#f").ajaxSubmit({url: 'server.php', type: 'get'})

給ajaxForm將發送。 ajaxSubmit立即發送。

序列化：

$.get('f.php?' + $('#f').serialize()) 

$.post('f.php', $('#f').serialize())

AJAX serialization documentation is here.

鏈接添加：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script> 
$(document).ready(function() { 
    $("#f").submit(function(event) { 
     $.get('f.php?' + $('#f').serialize()) 
     event.preventDefault(); 
    }); 
}); 
    </script>

希望它能幫助！順便說一下，您可以在網絡標籤中看到響應。

來源

2014-02-05 12:15:34

重寫你的形式，因爲我不認爲一個提交和行動是你所需要的位置：

<form method="GET" id="f"> 
<label for="name">Your name: </label><input type="text" id="name"> 
<button type="button"  
onclick="yourName(document.getElementById('name').value)">Click</button> 
</form>

這裏是一個啓動AJAX功能，你可以嘗試：

function yourName(str) { 
var ajaxRequest; 
try { 
    ajaxRequest = new XMLHttpRequest(); 
} catch (e1) { 
    try { 
     ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
    } catch (e2) { 
     try { 
      ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
     } catch (e3) { 
      alert("Please try again!"); 
      return false; 
     } 
    } 
} 
ajaxRequest.onreadystatechange = function() { 
    if (ajaxRequest.readyState === 4) { 
     document.getElementById("result").innerHTML = ajaxRequest.responseText; 
    } 
};  
ajaxRequest.open("GET","f.php?name=" + str,true); 
ajaxRequest.send(null); 
return false; 
}

來源

2014-04-14 05:06:05

-1

請從刪除type="submit"您提交按鈕以調用ajax腳本。

你的代碼在那個時候以兩種方式工作;首先提交自己的頁面，其他人則調用你的js函數。所以，你需要改變你的按鈕的類型與type="button"，然後你需要添加AJAX成功響應提交finction

，如：

<input type="type" onclick="yourName(document.getElementById('name').value)">

和AJAX代碼添加：

xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      document.getElementById("result").innerHTML=xmlhttp.responseText; 
      document.getElementById("f").submit(); 
     } 

    }

檢查上面的變化，讓我知道如果你有什麼錯誤後實施。

來源

2014-04-14 06:46:58

初學者的簡單AJAX請求

回答

相關問題