Question

我有一个带有2个输入字段和一个按钮的简单表单。单击该按钮时，应将2个输入字段的值发送到AJAX函数，以便在servlet中处理。出于某种原因，未到达servlet。谁能明白为什么？我有一个几乎相同的方法使用不同的形式，我不明白为什么这个不起作用。

这是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>

Answer 1

因为this是按钮而不是表单

所以

this.courseID.value
this.courseDesc.value

返回错误。

你应该使用

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

第二个问题是你有一个名字冲突。表单和函数名为addCourse。这会导致问题。将其中一个重命名为不同。

Running Example

Answer 2

使用this时，与onclick="addCourse(this.courseID.value, this.courseDesc.value);"一样，我认为这会引用input元素，因此值未正确传递。

Answer 3

将您的事件处理程序绑定在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行为。

Answer 4

尝试蓬松。关闭;在if ready状态表达式之后。

没有使用按钮onclick函数调用AJAX函数

4 个答案: