使用 Ajax 生成提交按钮不提交表单数据

Question

已解决：我将 $_SERVER['REQUEST_METHOD'] != 'post' 设为小写。那显然必须是资本……我一将其资本化，它就起作用了，这是唯一的变化。我投票给你，为你提供帮助的优秀小伙子。谢谢！

我在使用 Ajax 完成一个简单的数学问题后生成了一个提交按钮。 Ajax 工作正常。我可以使用 var_dump/print_r 验证 $_POST 和 $_SESSION 数据是否正确传递。提交按钮就像我期望的那样在输出 div 中。

但是，当我按下提交按钮时，它会重新加载页面，但不会触发提交。它返回表单，$_POST 变量为空/根本没有设置。

提交按钮位于表单标签中。为什么它提交表单而不是数据/我如何让它工作？

我认为您不需要代码来回答问题，但是，这里是代码的简化版本：

// In a server request method block on test.php:
     if( $_SERVER['REQUEST_METHOD'] != 'POST' ){
<form  id="addUserId"  name="addUser"  method="post"  action="test.php" >
<table id="formCreatoraddUserIdTableId"  cellpadding="2"  cellspacing="2"  width="100%" >
    <tr id="formCreatorRowId0" >
        <td valign="top" ><font>3 minus 1: </font></td>
        <td valign="top" ><input type="text"  id="validatorId"  name="validate"  onkeyup="makeAjaxRequest('./ajax/captchaSubmitButtonCheck.php', 'captcha='+encodeURIComponent(document.getElementById('validatorId').value),'captchaOutputDiv', '1');" autocomplete="off"  />          
        </td>
    </tr>
    <tr id="formCreatorRowId1" >
        <td valign="top" ><font></font></td>
        <td valign="top" >
            <div  id="captchaOutputDiv" ></div>
        </td>
    </tr>
  </table>
    <input type="hidden"  name="refreshPostPrevention"  />
</form>
   }else{

     print_r( $_POST ); // will be empty
   }
     // in an ajax file captchaSubmitButtonCheck.php:
<?PHP
if( $_SERVER['REQUEST_METHOD'] == 'POST' ){
    printr( $_POST );
    printr( $_SESSION, 'SESSION' );
    if( $_POST['captcha'] == $_SESSION['captcha'] ){
        echo '<input type="submit" value="Save" />';    
    }else{
        echo '<font class="red">Your math was wrong. Try again.</font>';    
    }
}
?>

     // the JS

function makeAjaxRequest(url, params, output, image) {
  var getdate = new Date();  //Used to prevent caching during ajax call
  if( image == 1 ){
      document.getElementById(output).innerHTML='<img src="./images/template/ajax-loader.gif"></img>'; 
  }
  if(xmlhttp) { 
    xmlhttp.open("POST",url,true); 
    xmlhttp.onreadystatechange = function(){
       if (xmlhttp.readyState == 4) {
         if(xmlhttp.status == 200) {
           document.getElementById(output).innerHTML=xmlhttp.responseText; //Update the HTML Form element 
         }
         else {
            alert("Error during AJAX call. Please try again");
         }
       }    
    }
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send(params); //Posting txtname to PHP File
  }
}

Answer 1

当您使用 AJAX 驱动的接口时，您可能不想使用提交按钮，仅在禁用 JS 时显示提交按钮作为后备按钮。因为当您将提交按钮放在表单中时，它总是会尝试提交，除非您通过覆盖表单上的提交操作来明确阻止它这样做。

我的解决方案是仅使用普通输入 type='button' 或任何实际执行 AJAX 操作 onClick 的元素，然后使用 serialization 提交表单数据或手动将数据发送到 AJAX 脚本。这样，您还可以更好地控制发送的内容和方式。

//使用jQuery

function ajaxSubmit(){
    var data  = $("form").serialize();
    //Ajax code here
}

<span class='action' onclick='ajaxSubmit'>Send the data</a>

或者用 jQuery 覆盖提交操作：

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

Answer 2

你确定makeAjaxRequest();是post方法吗？

Answer 3

我遇到了同样的问题并最终修复了它。我在 jQuery Ajax 验证码中注意到的一件事如果我们在 ajaxCaptcha 验证后手动提交表单，则 $_POST 变量将不会在结果中包含 type="submit" 对象，在此如果我们无法在服务器端使用提交按钮名称进行验证，我们可以使用验证码名称进行验证。

就我而言，$_POST 包含验证码文本框上方的所有值。

Answer 4

提交按钮在表单之外；正在隐式创建一个空表单以使 HTML 有效。

将您的按钮放入它应该提交的表单中。

^{（另外，我认为您的意思是 input type="text" 用于验证码。）}