javascript - 使用 Jquery Ajax 提交表单

Question

Fiddle和代码:

$("form.signupform").submit(function(e) {
  var data = $(this).serialize();
  var url = $(this).attr("action");
  var form = $(this); // Add this line
  $.post(url, data, function(data) { 
    try {
        data = JSON.parse(data);
		$(.result).html(data.result + " Watchlist");

    } catch (e) {
        console.log("json encoding failed");
        return false;
    }
});
  return false;
});

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

<p class="result"></p>
<form class="signupform" method="post" action="admin/signupinsert.php" onsubmit="this.onsubmit=function(){return false;}">

    <input type="text" name="firstname" />
	  <input type="submit" value="Sign Up"/>

</form>

admin/signupinsert.php代码:

// Insert into DB code in PHP

$response = new \stdClass();
$response->result = "".$result."";
die(json_encode($response));

我正在尝试使用我的 Jquery Ajax 代码提交此表单。 signupinsert.php 文件将在 $result 变量中返回一个值。我试图在里面打印它 <p class="result"></p>

但是，代码将用户重定向到 signupinsert.php 页面。

怎么了？

Answer 1

您必须阻止提交表单的默认操作

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

    e.preventDefault(); // <-- add this

    var data = $(this).serialize();
    var url = $(this).attr("action");

此外，在您的 php 文件中返回正确的 JSON 并避免使用 JSON.parse(data);

解析 javascript 中的响应

你的 php 文件中的输出应该是这样的

$response = new \stdClass();
$response->result = $result;

header('Content-Type: application/json');
print json_encode($response);

并且在您的success 处理程序中，只需将data 参数作为普通json 对象来处理

$.post(url, data, function(data) { 
    $(.result).html(data.result + " Watchlist");
}

此外，出于好奇，这应该做什么？

$response->result = "".$result."";

更新:
我刚刚意识到您遇到大多数问题的原因:

$('.result').html(data.result + " Watchlist");
  ^       ^

查看遗漏的引号