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

Resolved: I had $_SERVER['REQUEST_METHOD'] != 'post' as lowercase. That has to be capital apparently... It worked as soon as I capitalized it, and that was the only change. I voted you up for you fine chaps who helped. Thanks!

解析:我有$_SERVER['REQUEST_METHOD'] != 'post'作为小写。显然这必须是资本……我一把它资本化就成功了，这是唯一的改变。我选你为那些帮过忙的好人。谢谢!

I'm generating a submit button after a simple math question with Ajax. The Ajax works fine. I can verify with var_dump/print_r that the $_POST and the $_SESSION data is being passed correctly. The submit button is going in the output div like I would expect.

我在用Ajax生成一个简单的数学问题之后生成一个提交按钮。Ajax工作正常。我可以使用var_dump/print_r验证$_POST和$_SESSION数据是否被正确传递。提交按钮按照我的期望在output div中运行。

However, when I press the submit button, it reloads the page but it does not trigger a submit. It goes back to the form and the $_POST variable is empty / not set at all.

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

The submit button is in the form tags. Why is it submitting the form but not the data / how do I get it to work?

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

I don't think you need the code to answer the question, but nonetheless, here is a simplified version of the code:

我不认为你需要代码来回答这个问题，但是尽管如此，这里有一个简化版的代码:

// 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
  }
}

4 个解决方案

#1

When you use AJAX driven interfaces, you may not want to use a submit button, only display a submit button as a fallback when JS is disabled. Because when you put a submit button inside a form it will always try to submit, unless you explicitely prevent it from doing so by overriding the submit action on the form.

当您使用AJAX驱动的接口时，您可能不希望使用提交按钮，只在禁用JS时显示提交按钮作为回退。因为当你在表单中提交一个提交按钮时，它总是试图提交，除非你明确地阻止它通过重写表单上的提交动作来阻止它这样做。

My solution is to just use a normal input type='button' or any element actually that performs the AJAX action onClick, and then submit the form data either with serialization or manually sent the data to the AJAX script. That way you also have more control over what is being sent and how.

我的解决方案是使用一个普通的输入类型='button'或任何实际执行AJAX操作onClick的元素，然后通过序列化或手动将数据发送到AJAX脚本中提交表单数据。这样你就能更好地控制发送的内容和方式。

//Using jQuery

/ /使用jQuery

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

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

Or overwriting the submit action, with jQuery:

或者用jQuery覆盖提交动作:

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

#2

Are you sure makeAjaxRequest(); is post method ?

你确定makeAjaxRequest();post方法吗?

#3

I have faced same problem and fixed it finally .One thing I have noticed in jQuery Ajax captcha If we manually submit the form after ajaxCaptcha validation the $_POST variable will not have type="submit" object in the result, In this case we could not validate in the server side with submit button name, we can validate with captcha name.

我面临同样的问题,固定它最后。我已经注意到在jQuery Ajax验证码如果我们手动提交表单后ajaxCaptcha验证$ _POST变量不会类型=“提交”对象的结果,在这种情况下,我们不可能在服务器端验证提交按钮的名字,我们可以用验证码验证的名字。

In my case $_POST had all the values which is above my captcha text box.

在我的例子中，$_POST拥有captcha文本框之上的所有值。

#4

-1

The submit button is outside of the form; an empty form is being created around it implicitly to make the HTML valid.

提交按钮位于表单之外;为使HTML有效，将围绕它创建一个空表单。

Put your button inside the form that it's supposed to submit.

把你的按钮放在它应该提交的表单中。

^{(Also, I think you meant input type="text" for the CAPTCHA.)}

(另外，我认为您的意思是验证码的输入类型=“text”。)

#1