ajax 表单未将数据发布到 php

Question

在 Stackoverflow 的帮助下，我正在学习网站设计。最近，我编写了以下代码，用于使用 Ajax 从 HTML 表单发送数据。代码清楚地检查错误，但发送 PHP 消息。我用过 ajax 谷歌库：http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

Ajax 代码如下。

function Submit(e) {
  // form submittion using ajax.
  var name = $("#name").val();
  var place = $("#place").val();
  var message = $("#message").val();

  // error checking
  if ($("#name").val() == "") {
    $("#name").focus();
    $("#error").html("Enter the Name.");
    return false;
  } else if ($("#place").val() == "") {
    $("#place").focus();
    $("#error").html("Enter the Place.");
    return false;
  } else if ($("#message").val() == "") {
    $("#message").focus();
    $("#error").html("Enter the message.");
    return false;
  } else if ($(name != '' && place != '' && message != '')) {
    $("#error").html("Form submitted successfully.")
    $("#form")[0].reset();

    // on successful, data submission using php
    $.post("xxx.xyz/abc.php", {
      name: name,
      place: place,
      message: message
    }, function(data) {
      $("#error").append(data);
    });
  }
}

我检查了几个问题和答案，但找不到正确的。请帮我。我的要求是将输入的数据传递给php。

Answer 1

像这样使用 Ajax 而不是 $.post("xxx.xyz/abc.php"

$.ajax({
    url: "xxx.xyz/abc.php",
    type: "post",
    data : {
     name: name, place: place, message: message
   },
    success: function(data){    
         $("#error").append(data); 
    }
});

Answer 2

在表单提交时调用 Submit 函数并删除最后一个 else if 条件。数据验证成功后，使用 ajax 方法发布您的数据。

Answer 3

我在这里注意到了几件事。

1. 如果您在未阻止的表单上使用提交功能 默认操作。
2. 不需要你最后的 else if 语句 检查错误并返回 false 不会发送表单。

我还建议仅在发送实际成功时发送成功消息，否则发送和错误消息。

我创建了一个小提琴，向您展示如何使用表单处理问题。如果您不使用表单，这可能无关紧要。

从 jquery 3.0 开始，.then() 已被删除，取而代之的是 $.done() 它应该用于成功回调。

https://jsfiddle.net/a9m2699s/1/

这是新的提交方法。注意：它可以进行更多重构，但为了使其接近问题，我们将保留它。

 function Submit(e) {
    e.preventDefault();

  // form submittion using ajax.
  var form = $(e.currentTarget);
  var name = $("#name").val();
  var place = $("#place").val();
  var message = $("#message").val();

  // error checking
  if ($("#name").val() == "") {
    $("#name").focus();
    $("#error").html("Enter the Name.");
    return false;
  } else if ($("#place").val() == "") {
    $("#place").focus();
    $("#error").html("Enter the Place.");
    return false;
  } else if ($("#message").val() == "") {
    $("#message").focus();
    $("#error").html("Enter the message.");
    return false;
  }

  // on successful, data submission using php
  $.post(form.attr('action'), {
    name: name,
    place: place,
    message: message
  })
  .then(function(response) {
    // handle successful response here.
    $("#error").html("Form submitted successfully.")
    form[0].reset();
  })
  .fail(function(err) {
    // handle err here.
  });
}

// test action
$('form').on('submit', Submit)