使用JQuery和AJAX將數據傳遞到PHP腳本

Question

我有一個HTML表單，它僅由帶有值的按鈕組成。 我想這樣離開。 我正在使用AJAX / JQuery將表單數據傳遞給PHP腳本。 但是，由於某種原因，未發送按鈕值。 我可能做錯了什么？

HTML：

<form id="friend-send" method="post" action="">
<button type="submit" class="foll" name="approve-friend" value="4"> Approve </button>
</form>

AJAX / JQUERY：

$(document).ready(function() {

    $("#friend-send").submit(function(e) {

        var $this = $(this);        
        var dataString = $this.serialize(); 

        e.preventDefault();     

        $.ajax({  
            type: "POST",  
            url: "relate.php",  
            data: dataString,
            async: false,
            success: function() {
                $this.hide();
            }
        });             

    });

});

Answer 1

jQuery不會序列化按鈕，而是使用隱藏字段

 <form id="friend-send" method="post" action="">
 <input type="hidden" name="approve-friend" value="4" />
 <button type="submit" class="foll"> Approve </button>
 </form>

另外，您需要按ID序列化表單，而不按ID序列化按鈕

 $("#friend-request-buttons")

應該是這個

 $("#friend-send") 

最后，由於您正在使用ajax進行發布，因此可以將表單打開標記簡化為此...

 <form id="friend-send">

Answer 2

序列化https://api.jquery.com/serialize/不支持<button>標記

您將需要使用某種輸入。 一個隱藏的人會起作用。

Answer 3

不要使用serialize ，自己創建輸入數據：

var dataString = {};
var $button = $this.find("[type=submit]");
dataString[$button.attr('name')] = $button.val();

當您提供$.ajax的data:參數作為對象時，jQuery會自動對其進行序列化。

Answer 4

如果您僅設置使用按鈕，那么答案就是

$(document).ready(function() {

$("#friend-send").submit(function(e) {

    var $this = $(this);        
    var dataString = "?" + $(this).find('button').attr('name') + "=" + $(this).find('button').attr('value'); 

    e.preventDefault();     

    $.ajax({  
        type: "POST",  
        url: "relate.php",  
        data: dataString,
        async: false,
        success: function() {
            $this.hide();
        }
    });             

    });

});