初学者的简单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请求

回答

相关问题