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来查看echo的结果（如果我的PHP刚刚运行到后端，请查看发送电子邮件，我不需要将其包含在视图中）。当我看到echo时，我看到的只是空格，如果我删除了isset逻辑，我会得到一个＆＃34;未识别的索引＆＃34; ＆＃39; sender_name＆＃39;的错误。我究竟做错了什么？谢谢！

Answer 1

尝试删除＆＃39;＆＃39;

FROM：

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

TO：

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);
    });
});
});

PHP没有接收我的AJAX POST数据

5 个答案: