AJAX函數沒有被調用與按鈕onclick函數

我有一個簡單的形式與2個輸入字段和一個按鈕。當點擊該按鈕時，2個輸入字段的值應發送到AJAX函數以在servlet中處理。由於某種原因，servlet沒有被聯繫到。任何人都能看到爲什麼我有一個幾乎相同的方法與不同的表單工作，我不明白爲什麼這個不工作。AJAX函數沒有被調用與按鈕onclick函數

下面是HTML形式的代碼：

 <div id="addCourses" class="hidden" align="center" > 
     <form id="addCourse" name="addCourse"> 
     <input type="text" id="courseID" name="courseID" value="courseID" size="40" /><br /> 
     <textarea rows="5" cols="33" id="courseDesc" name="courseDesc">Description</textarea><br /> 
     <input type="button" value="Add Course" onclick="addCourse(this.courseID.value, this.courseDesc.value);"/> 
     </form> 
    </div>

這裏是腳本函數：

<script type ="text/javascript"> 
function addCourse(id, descr) 
{ 
    var fluffy; 
    fluffy=new XMLHttpRequest(); 
    fluffy.onreadystatechange=function() 
    { 
     if (fluffy.readyState==4 && fluffy.status==200) 
     { 
     //do something here 
     } 
    }; 

    fluffy.open("GET","ajaxServlet?courseID="+id+"&courseDescription="+descr,true); 
    fluffy.send(); 
} 
</script>

來源

2013-03-07 Lani1234

你應該安裝Firebug或類似的東西來攔截javascript錯誤。 – Ghigo 2013-03-07 14:18:20

你的錯誤是什麼？你有沒有檢查你的瀏覽器的控制檯的一些提示？ – 2013-03-07 14:18:40

感謝Ghigo的建議。我將安裝Firebug。我是JavaScript新手，所以這會有所幫助。 – Lani1234 2013-03-08 01:08:31

由於this是按鈕，而不是形式

所以

this.courseID.value 
this.courseDesc.value

返回一個錯誤。

您應該使用

this.form.courseID.value 
this.form.courseDesc.value

第二個問題是你有一個名稱衝突。表單和函數名爲addCourse。這會導致問題。將其中一個重命名爲不同。

Running Example

來源

2013-03-07 14:17:23 epascarello

謝謝epascarello。我解決了這兩個問題。我已將您的建議與@ jbabey的建議一起使用，現在它正在工作。我是html，javascript和ajax的新手。 – Lani1234 2013-03-08 01:04:43

當您使用this，如onclick="addCourse(this.courseID.value, this.courseDesc.value);"，我認爲這將參照input元素，因此值不正確傳遞。

來源

2013-03-07 14:17:59 surfitscrollit

將您的事件處理程序綁定到JavaScript，它們應該在哪裏，並且可以完全避免該問題。

HTML：

<input type="text" id="courseID" name="courseID" value="courseID" size="40" /><br /> 
<textarea rows="5" cols="33" id="courseDesc" name="courseDesc">Description</textarea><br /> 
<input type="button" id="addCourse" value="Add Course"/>

JS：

document.getElementById('addCourse').onclick = function() { 
    var fluffy = new XMLHttpRequest(); 
    var id = document.getElementById('courseID').value; 
    var descr = document.getElementById('courseDesc').value; 

    fluffy.onreadystatechange=function() { 
     if (fluffy.readyState==4 && fluffy.status==200) { 
      //do something here 
     } 
    }; 

    fluffy.open("GET","ajaxServlet?courseID="+id+"&courseDescription="+descr,true); 
    fluffy.send(); 
};

由於epascarello指出的那樣，你需要改變你的表格的ID爲具有相同的ID兩個元素是不允許的，會導致不可預知的JavaScript行爲。

來源

2013-03-07 14:23:40 jbabey

我一直沒能得到的功能沒有「的onclick = addCourse（）」中的按鈕定義本身打電話，但我想找出原因。然而，我做了，改變功能，以便它不接受參數，並且我得到了函數內的id和descr的值，正如您所建議的。感謝您的幫助。 – Lani1234 2013-03-08 01:06:42

試試fluffy.close; if就緒狀態表達式之後。

來源

2013-03-07 15:15:29

AJAX函數沒有被調用與按鈕onclick函數

回答

相關問題