ajax表单未将数据发布到php

Question

在Stackoverflow的帮助下，我正在学习网站设计。 最近，我编写了以下代码，用于使用Ajax从HTML表单发送数据。 该代码显然正在检查错误，但正在发送PHP消息。 我已经使用了Ajax Google库： 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函数，并删除您的最后一个if条件。 成功验证数据后，使用ajax方法发布数据。

Answer 3

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

1. 如果在表单上使用提交功能，则不会阻止默认操作。
2. 当您检查错误并返回false时，不需要最后一个if语句，这不会发送表单。

我还建议仅在发送成功的情况下发送成功消息，否则发送错误消息。

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

从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)