javascript - 如何使用 Ajax 提交表单并获取一些文本作为返回

Question

这是我的Fiddle代码:

$("form.signupform").submit(function(e) {

e.preventDefault();

var data = $(this).serialize();
var url = $(this).attr("action");
var form = $(this); // Add this line
$.post(url, data, function(data) {

$(form).children(".signupresult").html(data.signupresult);
$(form).children(".signupresult").css("opacity", "1");

});
return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<form class="signupform" method="post" action="admin/signupinsert.php">

<p class="signupresult"></p>
<input type="text" name="firstname" />
  <input type="submit" value="Sign Up"/>
</form>

Signupinsert.php页面代码:

// Code to insert data into Database
$signupresult = "Some value here";

$response = new \stdClass();
$response->signupresult = $signupresult;
header('Content-Type: application/json');
print json_encode($response);

预期结果:

当用户单击提交表单按钮时，代码在后台运行。并提交表单而不重新加载页面。

并且 signupinsert.php 页面返回一些文本，其文本显示在带有 signupresult 类的段落上。

并且表单可以无限次提交，无需重新加载页面。

问题:

该表单仅提交一次。如果我尝试提交两次，“什么也不会发生”(没有值插入数据库，类 signupresult 的段落中没有返回值。

问题出在哪里？

Answer 1

您必须告诉您的请求您希望返回 JSON。否则 data.signupresult 没有意义；数据被视为字符串。

我总是使用 $.ajax，从不使用 $.post；我发现添加选项更容易。

$.ajax({
  url: $(this).attr("action"),
  dataType: 'JSON',
  type: 'post', 
  data: $(this).serialize(),
  success: function(data) {
    ...
  }
})