表单没有返回预期数据的ajax请求

Question

我有一个包含复选框，单选按钮和文本区域的表单。然后我有三个按钮，无论点击哪个按钮，它都应该调用相同的php文件来处理表单数据。我需要跟踪哪个按钮被按下，因为根据按下的按钮，表单数据的处理方式会有所不同。

我想这样更新页面而不用重新加载或重定向，并且我无法正常使用ajax。这个php文件现在只包含：“<pre><?php print_r($_POST); ?></pre>”，我将在基本功能工作后实现一个switch-case。

单击按钮时，页面上会生成表单副本，而不是返回POST值。

<form id="form" action="calc.php" method="post"> 
<input type="radio" name="rb[]" value="one" checked> one<br> 
<input type="radio" name="rb[]" value="two">two<br> 
Option a<input type="checkbox" name="cb[]" value="a"> 
Text a<input type="text" name="tb[]"> 
Option b<input type="checkbox" name="cb[]" value="b"> 
Text b<input type="text" name="tb[]"> 
<button id="first" class="button" name="button[]" value="first">first</button> 
<button id="second" class="button" name="button[]" value="second">second</button> 
<button id="third" class="button" name="button[]" value="third">third</button> 
</form> 


<script> 
$('.button').click(function(e) { 
var f = $('form').serialize(); 
var b = this.id; 
console.log(b); 
console.log(f); 
$.ajax({ 
    data: {'button':b, 'formval': f}, 
    type: $(this).attr('method'), 
    url: $(this).attr('action'), 
    success: function(resp){ 
     $('#result').html(resp); 
} 
}); 
return false; 
}); 
</script> 

我怎么能发送表单值作为数组与被点击到PHP文件中的按钮一起，然后使其返回页面上的PHP文件的结果呢？

谢谢。

Answer 1

可以使用$.serializeArray和附加到返回的数组以下列方式：

$('.button').click(function(e) { 
    var $form = $('form'); 
    var data = $form.serializeArray(); 

    data.push({ 'name': 'button', 'value': this.id }); // append button's ID 

    $.ajax({ 
     data: data, 
     type: $form.attr('method'), 
     url: $form.attr('action'), 
     success: function(resp){ 
      $('#result').html(resp); 
     } 
    }); 
    return false; // I don't think this is needed since your button is type="button" 
}); 

Answer 2

问题是你的上下文$(this)里面的ajax调用并不是指形式，它指的是按钮。所以该操作为空，并且ajax调用默认返回当前页面。

修正，添加像var form = $('form');另一个变量来引用

<script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 

 
<form id="form" action="calc.php" method="post"> 
 
<input type="radio" name="rb[]" value="one" checked> one<br> 
 
<input type="radio" name="rb[]" value="two">two<br> 
 
Option a<input type="checkbox" name="cb[]" value="a"> 
 
Text a<input type="text" name="tb[]"> 
 
Option b<input type="checkbox" name="cb[]" value="b"> 
 
Text b<input type="text" name="tb[]"> 
 
<button id="first" class="button" name="button[]" value="first">first</button> 
 
<button id="second" class="button" name="button[]" value="second">second</button> 
 
<button id="third" class="button" name="button[]" value="third">third</button> 
 
</form> 
 

 
<div id='result'></div> 
 

 

 
<script> 
 
$('.button').click(function(e) { 
 
// add this 
 
var form = $('form'); 
 
var f = $('form').serialize(); 
 
var b = this.id; 
 
console.log(b); 
 
console.log(f); 
 
$.ajax({ 
 
    data: {'button':b, 'formval': f}, 
 
    // change these 
 
    type: form.attr('method'), 
 
    url: form.attr('action'), 
 
    success: function(resp){ 
 
     $('#result').html(resp); 
 
} 
 
}); 
 
return false; 
 
}); 
 
</script>