使用 jQuery AJAX 向所需的 PHP POST 请求处理程序提交表单不起作用
Posted
技术标签:
【中文标题】使用 jQuery AJAX 向所需的 PHP POST 请求处理程序提交表单不起作用【英文标题】：Submitting Form with jQuery AJAX to the required PHP POST request handler is not working 【发布时间】：2020-01-22 12:04:57 【问题描述】：每当我使用 jquery ajax 向 php api 提交表单时，表单都不会提交到所需的 post 请求处理程序。但是当我基本上提交表单时，我的意思是不使用 javascript 或 jquery 提交表单，它会重定向到带有 json 响应的 php 页面。
注意这里的 CORS 没有问题，CORS 很好，因为我在 api 中允许跨站点请求。
下面是我的 login.html 文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./assets/css/style.css">
<script src="./assets/js/jquery-3.4.1.min.js"></script>
<title>User Login Page</title>
</head>
<body>
<div class="header">
<h2>Login</h2>
</div>
<form action="http://localhost/auth-app/server.php" method="post">
<div class="input-group">
<label for="">Email</label>
<input type="email" name="email" id="email" required>
</div>
<div class="input-group">
<label for="">Password</label>
<input type="password" name="password" id="password" required>
</div>
<div class="input-group">
<input type="submit" value="Login" name="login" class="submit-btn">
</div>
<p>
Not yet a member? <a href="register.html">Register</a>
</p>
</form>
<script>
$(document).ready(function ()
// submit login form with ajax
$('form').submit(function (event)
/* stop form from submitting normally */
event.preventDefault();
$(".submit-btn").click(function ()
$.post("http://localhost/auth-app/server.php",
email: $('#email').val(),
password: $('#password').val()
,
function (data, status)
const json = $.parseJSON(data);
console.log("Data: " + typeof(json) + "\nStatus: " + status);
);
);
);
);
</script>
</body>
</html>
注意我想要的是能够使用 jquery ajax 将表单提交到 必需的 PHP 发布请求处理函数。
下面是我的 server.php api 文件。
$errors = array();
// login
if (isset($_POST['login']))
$email = $db->real_escape_string($_POST['email']);
$password = $db->real_escape_string($_POST['password']);
if (empty($email))
array_push($errors, 'Email is required');
if (empty($password))
array_push($errors, 'Password is required');
if (count($errors) == 0)
// log user in
$data = ['success_login' => 'true'];
header('Content-type: application/json');
echo json_encode(null);
else
array_push($errors, 'The email or password is incorrect');
// after entering wrong credentials
$data = ['success_login' => 'false'];
header('Content-type: application/json');
echo json_encode($data);
在调试控制台中，我收到以下错误。 注意这只是证明 post 请求没有到达 api 文件中的 php post request 处理程序。
SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data
我期望在控制台中得到的是 json 数据，如下所示：
success_login "true"
！重要信息：
我对 php 不是很有经验，但我注意到在不使用任何 javascript（例如 jquery 或 ajax）的情况下提交表单时，表单会成功提交，因为提交按钮的名称（例如 <input type="submit" value="Login" name="login">）与 $_POST['login'] 中的名称相同。但是在技术上使用 ajax 提交表单时，您不会使用该按钮来提交。
那么我该如何解决这个问题呢？谢谢你用爱发帖。
【问题讨论】：
那么检查 发送的其他参数之一，而不是登录按钮？ 您尝试验证参数的方式是错误的，顺便说一句。您正在尝试访问$_POST['email']，然后再检查是否设置了 that。
因为您看到 SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 JSON 数据。 Ajax 和 PHP 工作，响应返回到客户端。也许，“回声 json_encode(null);” on count($errors) == 0。应该是 echo json_encode($data);
login.php 中多了一个试试下面的代码
$(document).ready(function ()
$('form').submit(function (event)
event.preventDefault();
$(".submit-btn").click(function ()
name: $('#email').val(),
password: $('#password').val()
$.ajax(
type: 'post',
url: 'http://localhost/auth-app/server.php',
data:
name: name,
password : password,
action: 'login'
,
success: function(response)
)
);
);
);
【讨论】：
【参考方案2】：您不需要声明单击按钮事件，因为您已经在使用表单提交按钮事件。此外，在 $.post 中添加 login 键作为参数值，因为您正在检查 login.php 文件中的 isset 值。
另外，请注意您的 login.php 文件中有额外的右大括号 ""
【讨论】：
以上是关于使用 jQuery AJAX 向所需的 PHP POST 请求处理程序提交表单不起作用的主要内容，如果未能解决你的问题，请参考以下文章