PHP沒有收到我的AJAX POST數據

Question

我正在使用AngularJS建立一個單頁網站，並正在制作聯系表格。 我已經看過很多關於此主題的問答，但是沒有一種解決方案對我有用。 我有基本的HTML：

<form id="ajax-contact" method="post">
<div class="field">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
</div>

<div class="field">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
</div>

<div class="field">
    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>
</div>

<div class="field">
    <button class="submit">Send</button>
</div>
</form>
<!--Contact Form Ajax, added in HTML for MVP purposes, will be changed later-->

<script>
$(document).ready(function() {

var name = $('#name');
var email = $('#email');
var message = $('#message');

$('button.submit').click(function() {

    alert("Worked");
    var contact_data = {
        'sender_name': $(name).val(),
        'sender_email': $(email).val(),
        'sender_message': $(message).val()
    };
        console.log(contact_data);
        $.ajax({
        method:'POST',
        url:'/php/contact.php',
        data: contact_data
    }).done(function(data) {

        alert('Success!');
        console.log('Submitted succesfully:' + data);

    }).fail(function(textStatus, jqXHR) {
        alert('Failed :(');
        console.log(textStatus);
        console.log(jqXHR);
    });
});
});
</script>

我的PHP（位於單獨的文件中）：

<?php

$name = isset($_POST['sender_name']) ? $_POST['sender_name'] : '';

echo $name;

?>

我沒有在主視圖中包含php文件，但是我通過查看localhost：7070 / php / contact.php來檢查回聲的結果（計算出我的PHP是否只是在運行后端以發送電子郵件，不需要在視圖中包括它）。 查看回顯時，所看到的只是空白，如果刪除isset邏輯，則會收到“ sender_name”的“ unidentified index”錯誤。 我究竟做錯了什么？ 謝謝！

Answer 1

嘗試刪除''

從：

var contact_data = {
    'sender_name': $(name).val(),
    'sender_email': $(email).val(),
    'sender_message': $(message).val()
};

至：

var contact_data = {
    sender_name: $(name).val(),
    sender_email: $(email).val(),
    sender_message: $(message).val()
};

Answer 2

編寫如下代碼：

var name = $('#name').val();
var email = $('#email').val();
var message = $('#message').val();  


var contact_data = {
     'sender_name': name,
     'sender_email': email,
     'sender_message': message
 };

Answer 3

jsut在ajax函數中將method:'POST'更改為type = 'POST'

<script>
$(document).ready(function() {

var name = $('#name');
var email = $('#email');
var message = $('#message');

$('button.submit').click(function() {

    alert("Worked");
    var contact_data = {
        'sender_name': $(name).val(),
        'sender_email': $(email).val(),
        'sender_message': $(message).val()
    };
        console.log(contact_data);
        $.ajax({
        type:'POST',
        url:'/php/contact.php',
        data: contact_data
    }).done(function(data) {

        alert('Success!');
        console.log('Submitted succesfully:' + data);

    }).fail(function(textStatus, jqXHR) {
        alert('Failed :(');
        console.log(textStatus);
        console.log(jqXHR);
    });
});
});
</script>

Answer 4

使用波紋管格式，希望對您有所幫助

var contact_data = {
    'sender_name': $(name).val(),
    'sender_email': $(email).val(),
    'sender_message': $(message).val()
};

console.log(contact_data);

$.ajax({
    method:'POST',
    url:'/php/contact.php',
    data: {contact_data: contact_data},
}).done(function(data) {
    alert('Success!');
    console.log('Submitted succesfully:' + data);
}).fail(function(textStatus, jqXHR) {
    alert('Failed :(');
    console.log(textStatus);
    console.log(jqXHR);
});

Answer 5

如果您在此之后獲得價值，請嘗試這樣。 則函數沒有通過定義變量來發送值

$('button.submit').click(function() {

    alert("Worked");
 //   var contact_data = {
 //       'sender_name': $(name).val(),
        'sender_email': $(email).val(),
 //       'sender_message': $(message).val()
  //  };
        console.log(contact_data);
        $.ajax({
        method:'POST',
        url:'/php/contact.php',
        data: {
        'sender_name': $(name).val(),
        'sender_email': $(email).val(),
        'sender_message': $(message).val()
    }
    }).done(function(data) {

        alert('Success!');
        console.log('Submitted succesfully:' + data);

    }).fail(function(textStatus, jqXHR) {
        alert('Failed :(');
        console.log(textStatus);
        console.log(jqXHR);
    });
});
});