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函数

回答

相关问题