爲什麼我的簡單ajax代碼不起作用？

它不會將div中的文本更改爲成員編寫的文本。

而且事先說一句抱歉，我的英語，我的英語老師顯然我以前不做好... =/

第一頁：

<script> 
function showUser() 
{ 
var str = document.forms["myForm"]["users"].value; 
if (str=="") 
    { 
    document.getElementById("txtHint").innerHTML=""; 
    return; 
    } 
if (window.XMLHttpRequest) 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    { 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET","act2.php?q="+str,true); 
xmlhttp.send(); 
} 
</script> 

<form name="myForm" onsubmit="return showUser()" method="post"> 
First name: <input type="text" name="users"> 
<input type="submit" value="Submit"> 
</form> 

<div id="txtHint"><b>Person info will be listed here.</b></div>

第二頁（act2.php ）：（校正名稱）

<?php 
$q=$_GET["q"]; 

echo "$q"; 
?>

來源

2013-01-15 ldoroni

什麼問題呢？ –

它顯示任何錯誤？ –

不知道爲什麼人們使用普通的JavaScript，而不是jQuery的，舉例來說。跨瀏覽器解決方案，並且很容易。post（url，{key：value}，function（response）{alert（response）;}）;' – devdRew

你的函數需要返回false，防止表單的默認操作，否則你的表格將被提交（這是默認操作）。

只需在代碼末尾添加一個return false即可。

function showUser(){ 

    // ... 
    xmlhttp.send(); 

    // prevents the default action (the submit from your form) 
    return false; 

}

或：

<form name="myForm" onsubmit="showUser();return false;" method="post">

您也可以安全地刪除IE5/6 compat的代碼。

if (window.XMLHttpRequest) 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    { 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    }

簡直變成：

var xmlhttp=new XMLHttpRequest();

在前面的var是非常重要的，否則xmlhttp將成爲全球對象，而不是一個範圍變量的成員。

來源

2013-01-15 11:00:57 Christoph

謝謝！你非常幫助我！ – ldoroni

不客氣;） – Christoph

在此行中指定的文件

xmlhttp.open("GET","act2.php?q="+str,true);

是act2.php，但根據您的文章，您正在尋找ajax2.php，會是它？

來源

2013-01-15 10:34:47 mattsbox

+1我也被弄糊塗了。 –

不，這不是問題，我錯了，只是在這篇文章中寫了文件的名稱。該文件的真實姓名是act2.php – ldoroni

你只是忘記了在showUser方法「返回false」的形式將發佈如常在Ajax調用由

編輯前： 爲了澄清，在你返回showUser的的onsubmit（），showUser方法永遠不會返回值，以阻止瀏覽器發佈表單。另外，正如其他海報所建議的那樣，你暗示php文件被命名爲ajax2.php，但代碼實際上試圖命中act2.php。

而且，使用某種框架（jQuery是非常流行）的建議。

來源

2013-01-15 10:37:55 hank

我很抱歉，但我的英語不好，我似乎無法理解你寫給我的關於retun false的內容。你可以告訴我你的代碼是什麼？我認爲這會幫助我更好地理解你。我正在使用ajax而不是jquary，因爲我試圖學習 – ldoroni

爲什麼我應該加載一個80k框架來做簡單的ajax調用？ – Christoph

只是爲了向您展示如何以較少的痛苦和jQuery來做同樣的事情。

<form name="myForm" action="/act2.php"> 
    <input type="text" name="q"> 
    <input type="submit"> 
</form> 

<div id="txtHint"></div> 

<script type="text/javascript"> 
    $(document) 
     // Link handler for submiting form 
     .on('submit', 'form[name="myForm"]', function(e) { 
      // Preventing original form submition 
      e.preventDefault(); 

      // Send all data from form, to url from form's action attribute (/act2.php) and set received data to div with id txtHint 
      $.get($(this).attr('action'), $(this).serialize(), function(data, status, xhr) { 
       $('#txtHint').html(data); 
      }); 
     }); 
</script>

來源

2013-01-15 11:34:54 devdRew

爲什麼我的簡單ajax代碼不起作用？

回答

相關問題