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

【问题标题】：AJAX function not being called with button onclick function没有使用按钮 onclick 函数调用 AJAX 函数
【发布时间】：2013-03-07 14:14:40
【问题描述】：

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

【问题讨论】：

你应该安装 Firebug 或类似的东西来拦截 javascript 错误。
你的错误是什么？您是否检查了浏览器的控制台以获取一些提示？
感谢 Ghigo 的建议。我将安装 Firebug。我是 javascript 新手，所以这会很有帮助。

标签： javascript html ajax servlets

【解决方案1】：

因为this 是按钮而不是表单

所以

this.courseID.value
this.courseDesc.value

返回错误。

你应该使用

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

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

Running Example

【讨论】：

谢谢 epascarello。我已经解决了这两个问题。我已将您的建议与@jbabey 的建议一起使用，现在它正在工作。我是 html、javascript 和 ajax 的新手。

【解决方案2】：

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

【讨论】：

【解决方案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 行为。

【讨论】：

如果按钮定义本身没有“onclick=addCourse()”，我无法调用函数，但我想弄清楚原因。但是，我确实更改了函数，使其不接受参数，并且按照您的建议，我在函数内部获取了 id 和 descr 的值。感谢您的帮助。

【解决方案4】：

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

【讨论】：