Question

我是新用户，我需要有关JQuery和Ajax的帮助。我只擅长PHP。

我有一个HTML页面，其中包含简报注册部分，

<h4>Newsletter</h4> 
<form id="main-news-contact-form" class="news-contact-form" name="news-contact-form" method="post" action="/scripts/xnews.php" role="form"> 
    <div class="input-group">
        <input type="text" class="form-control" required="required" placeholder="Enter your email" name="email"/> 
        <span class="input-group-btn">
            <button class="btn btn-danger" type="submit">Go!</button>
         </span>
    </div>
</form>

相关的JQuery -

//newsletter form
var form = $('.news-contact-form');
form.submit(function () {
  $this = $(this);
  $.post($(this).attr('action'), function(data) {
  $this.prev().text(data.message).fadeIn().delay(15000).fadeOut();
  },'json');
  return false;
});

我有一个php脚本，它读取表单数据并保存在数据库表中收到的电子邮件地址，但由于某种原因，PHP代码没有收到数据（电子邮件地址），执行下面的代码。

if(empty($_POST["email"]))
{
  echo("failed");
}

我不知道自己做错了什么，我有一个联系我们＆＃39;表格，工作得非常好，但我不知道为什么这份通讯表格不适用于jquery。

我保证所有的javascript文件都包含在html页面中，php页面运行得非常好，它不会返回任何php或mysql错误，我正确设置JSON标题，它只是我我没有收到输入表格的电子邮件地址。之前它正在运行，但是Ajax没有工作，现在我设法让Ajax工作，但JavaScript代码没有发送表单数据。

你能帮忙或帮我调试吗。

提前致谢！

Answer 1

您的代码未向服务器发送任何数据。尝试将数据作为第二个参数添加到函数中。

// get the text from the input field with the id "email"
var email = $.("#email").val();
// get the url from the form
var url = $("#newsletter-send").attr('action');

$.post( url, { email: email }, function( data ) {
    // The code that you want to execute after sending the ajax call
}, "json");

请不要复制粘贴代码，但要尝试找到它背后的原因。您可能需要检查url变量以确保您发布到正确的位置。还尝试将id属性添加到包含电子邮件的输入字段。我希望这会对你有所帮助。

Answer 2

试试这个：

var form = $('#main-news-contact-form');
form.submit(function(e) {
    e.preventDefault(); // Prevent submitting the form 

    $this = $(this);

    $.post($this.attr('action'), $this.serialize()).done(function(data) {
        // Do something with data
        $this.prev().text(data.message).fadeIn().delay(15000).fadeOut();
    }, 'json');
});

jQuery和Ajax组合混乱

2 个答案: