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

问题是你在ajax调用中$(this)的上下文没有引用表单，它指的是按钮。所以action为null，默认情况下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>

Answer 2

您可以使用$.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" 
});

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

2 个答案: