如何使用Ajax提交表單並獲取一些文本作為回報

Question

這是我的小提琴代碼：

 $("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頁面返回一些文本，並且其文本顯示在帶有class signupresult的段落中。

表單可以無限次提交，而無需重新加載頁面。

問題：

該表格只提交一次。 如果我嘗試提交兩次，則“什么都不會發生”（沒有任何值插入數據庫，沒有在段落中返回帶有class signupresult 。

問題出在哪兒？

Answer 1

您必須告訴您的請求，您希望JSON作為返回值。 否則data.signupresult沒有意義； 數據被視為字符串。

我總是使用$ .ajax，從不使用$ .post; 我發現添加選項更加容易。

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