表單沒有返回預期數據的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>