0

我有一个带有 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>
4

4 回答 4

3

因为this是按钮而不是表单

所以

this.courseID.value
this.courseDesc.value

返回错误。

你应该使用

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

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

运行示例

于 2013-03-07T14:17:23.103 回答
1

当您使用this, as in 时onclick="addCourse(this.courseID.value, this.courseDesc.value);"，我认为这将引用input元素，因此未正确传递值。

于 2013-03-07T14:17:59.390 回答
0

在 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-07T14:23:40.463 回答
0

试试fluffy.close；在 if 就绪状态表达式之后。

于 2013-03-07T15:15:29.850 回答