使用 AJAX 提交表单答案

【问题标题】：Submitting a form using AJAX使用 AJAX 提交表单
【发布时间】：2013-05-19 03:07:08
【问题描述】：

我有一个 JSP 页面，其中包含一个复选框，因此当我尝试使用 document.forms[0].submit(); 的传统 javascript 方式提交表单时，表单会被刷新并且复选框值不会被保留。

任何人都可以帮助我了解如何仅使用 AJAX 发送表单值。我不需要使用 JQuery 发送的方式。

这是我使用表单提交发送的代码：

   function relatedAER(){
      ......
      document.forms[0].literatureSelected.value = litNO + "&";
      document.forms[0].opCode.value = "relatedAER";
      document.forms[0].target='_self';
      document.forms[0].action="<%=request.getContextPath()%>/litaer.do?selected="+selected;
      document.forms[0].submit();
    }

【问题讨论】：

有什么问题？您是否选择了要使用的 API（XHR、JSON-P 脚本生成等）？您是否没有设法找到该 API 的教程？是否将数据从表格中取出导致您出现问题？或者将该数据以适合在 HTTP 请求中发送的格式放置？或者是其他东西？就目前而言，您的问题不是reasonably scoped
能否提供代码？
在表单上调用 submit() 将触发 REST 请求，您要做的不是调用 submit() 而是仅调用带有回调的 javascript 函数。
w3schools.com/ajax/tryit.asp?filename=tryajax_first
@nithin — 所以用你目前的代码更新问题，并解释那个问题。

标签： javascript ajax jsp

【解决方案1】：

我希望下一次，您会付出一些努力，甚至创建一个简单的代码，并向我们展示而不是要求脚本。

现在，那个 bieng 说： 这会将用户名提交到一个名为 fetch.php 的 php 文件中

HTML

<input type='text' name='user' id='user' /><br/>
<input type='submit' name='submit'  onclick='check()' />
<div id='output'></div>

阿贾克斯：

    function check(){
    var xmlhttp;
        if(window.XMLHttpRequest){
            xmlhttp = new XMLHttpRequest();
        }else{
            xmlhttp = ActiveXObject('Microsoft.XMLHTTP');
    } 

    xmlhttp.onreadystatechange = function(){
    if(xmlhttp.readyState === 4 && xmlhttp.status === 200){
        document.getElementById('output').innerHTML = xmlhttp.responseText; 
            }
        }

    get_user = document.getElementById('user').value;
    param = "name="+get_user;
    xmlhttp.open('POST','fetch.php', true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send(param);
    }   
    </script>

【讨论】：

您尝试发送单个元素.. 但是是否可以使用相同的方式发送整个表单？像 param = document.forms[0];然后发送 xmlhttp 请求？