使用ajax将数据从Jquery传递到PHP而不进行刷新
我已经问过一个类似的问题，但我无法得到足够的信息。我试着把代码压缩到我所需要的代码。
我正在尝试向php代码传递一个title变量，并且我希望php代码在完成时给我一个成功消息。我想在不刷新页面的情况下这样做。
当我在没有ajax位的情况下运行这段代码时，它将允许我单击按钮，并且它将在不刷新的情况下预生成检查。但是一旦我放入ajax代码，它就不会预生成检查，而是会刷新。它也不在php代码中运行任何检查。
我是否错误地使用了ajax代码？我怎样才能获得这个来将数据发送到php文件而不刷新，并给我发回一条成功消息呢？
编辑：我在发送到php文件的数据周围添加了括号。现在“填表”检查起作用了。但是在填写表单时，成功检查并没有从php文件返回。
Edit2:我在initiation语句中插入了.val（）并从if语句中删除了.val（）。我从按钮中删除了onclick属性。并将JS中的数据更新为“data：{title1:title},”。到目前为止，这一状况保持不变。
Edit3:我添加了“datatype：JSON”，以及一些错误/成功代码。谢谢罗恩的帮助。现在，当我提交时，我得到的xhr状态为500，并且有一个空白的响应文本。我一直在四处寻找解决办法，但到目前为止还没有。
编辑4：我把title1改成title，这样就不会再有混淆了。现在工作正常了！谢谢你罗恩的帮助。
<?php
//getting values from JS
$title = $_POST['title'];
if(!$title == "")
{
$res="Data received successfully:";
echo json_encode($res);
}
else {
$error="Not received,some problem occurred.";
echo json_encode($error);
}
?>html lang-html prettyprint-override"><!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Insert</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#form').submit(function (e) {
e.preventDefault();
//debug
var x = document.getElementById("msg");
var title = $('#title').val();
var year = $('#year').val();
var director = $('#director').val();
var genre = $('#genre').val();
var runtime = $('#runtime').val();
if( title=="" || year=="" || director=="" || genre=="" || runtime=="" ) {
x.style.color = "red";
x.innerHTML = "Please fill out all of the blanks.";
} else {
//is the value being sent correct?
x.style.color = "lightGreen";
x.innerHTML = "Title is: "+title+
"<br>Year is: "+year+
"<br>Director is: "+director+
"<br>Genre is: "+genre+
"<br>Runtime is: "+runtime;
$.ajax({
type: "POST",
url: "insert_DVD.php",
data: {
title: title,
year: year,
director: director,
genre: genre,
runtime: runtime,
},
dataType: "JSON",
error: function(xhr, ajaxOptions, thrownError, data) {
alert(xhr.status);
alert(thrownError);
alert(xhr.responseText);
console.log(data);
},
success: function(data) {
console.log(data);
}
});
return false;
}
});
});
</script>
<link rel="stylesheet" href="webpage.css">
</head>
<body class="subStyle">
<div class="topnav">
<a href="#">Home</a>
<a href="#">Database</a>
<a class="active" href="#">Insert</a>
</div>
<form id="form" method="post">
If there is more than one director, separate with comma.
<table border=0>
<tr>
<th>Movie Title</th>
<th>Year Made</th>
<th>Director</th>
<th>Genre</th>
<th>Runtime(Minutes)</th>
</tr>
<tr>
<td><input type=text name="title" id="title" maxlength=100 size=30></td>
<td><input type=text name="year" id="year" maxlength=4 size=10></td>
<td><input type=text name="director" id="director" maxlength=100 size=30></td>
<td><input type=text name="genre" id="genre" maxlength=20 size=20></td>
<td><input type=text name="runtime" id="runtime" maxlength=4 size=20></td>
</tr>
<tr><td>
<button type="submit" id="update" value="send">Update Database</button></td></tr>
</table>
</form>
<p id="msg">Click the update button.</p>
</body>
</html>
null
共有2个答案
可能它应该是一个对象
data: {title1:title1}
我不在我的dev计算机上，所以我不能真正测试php方面的东西，但是您确实有两个javascript错误，其中一个可能导致了这个问题。
不会导致您的问题，但会导致控制台中的错误。
1）从onclick中删除passData（）函数。由于您已经使用.submit查看表单提交，因此不需要它。
可能导致了你的问题
2）当您定义“Title1”时，您没有获得它的值，这将在当前提交表单时导致HtmlFormElement.ToString错误。请在定义Title1时通过以下方法获取值：
$('#title').val()；
然后从if语句中移除title1.val()，在该语句中检查是否填充了title1.val()，而只是将title1==“”
现在，您正在通过ajax调用发送一个HTML元素，这将导致jquery失败。换句话说,您当前正在发送：
data: {title: (HTML ELEMENT)}
如果这样能解决问题，请告诉我。如果不是，当我到了可以运行PHP的地方时，我会把它拉出来。
编辑：同样，正如其中一条评论中指出的，您需要将PHP更改为$_POST['title']，以便与您发送的内容相匹配。您可以通过回显一些错误来验证php端发生了什么。我已经很久没有做过php了，但我通常会做一些类似的事情：
error_reporting(E_ALL & ~E_DEPRECATED);
ini_set('display_errors', 1);
在我的脚本顶部进行调试。这将把错误从php传递回Ajax响应（如果有的话）。这是在PHP中使用了5天。
编辑2：这就是我的工作原理
test.php
<?php
//getting values from JS
$title = $_POST['title'];
if(!$title == "") {
$res="Data received su ccessfully:";
echo json_encode($res);
} else {
$error="Not received,some problem occurred.";
echo json_encode($error);
}
?>
html只是ajax部分：
$(document).ready(function() {
$('#form').submit(function(e) {
e.preventDefault();
//debug
var x = document.getElementById("msg");
var title1 = $('#title').val();
if (title1 == "") {
x.style.color = "red";
x.innerHTML = "Please fill out all of the blanks.";
} else {
$.ajax({
type: "POST",
url: "test.php",
data: {
title: title1
},
dataType: "JSON",
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
alert(xhr.responseText);
},
success: function(data) {
console.log(data);
}
});
return false;
}
});
});
不幸的是，我现在没有时间解释什么是改变了，但我会得到的明天！（希望：）
另外，我没有将成功消息放在html中，我忘记了，而是console.logging响应，您可以在浏览器控制台中看到。抱歉，我希望我今晚有更多的时间来回应。
-
问题内容： 您好，我是使用jQuery和Ajax的新手。我正在尝试使用Jquery POST方法将数据提交到服务器。我传递的数据是一个字符串。现在，我无法理解如何传递数据以及如何检索数据。我曾尝试搜索有关我的问题的文章，但没有找到任何文章。我相信我的问题是非常基本的。 现在，我将发布postContacts动作的代码，这不是什么大问题。 但是我对于必须如何检索数据感到困惑。任何帮助表示赞赏。我正在
-
问题内容： 我如何将数据从随后的php传递回ajax？ PHP ajax 我的问题是如何在此处显示值？警报消息给我“未定义”？ 问题答案： 您可以按照以下方式进行操作。 JS
-
问题内容： 我正在尝试将数据发送到我的PHP脚本来处理一些东西并生成一些东西。 在我的PHP文件中，我尝试检索专辑名称。虽然当我验证它时，我创建了一个警报以显示什么都没收到，但是我尝试通过 虽然会说undefined：/ 问题答案： 您正在发送POST AJAX请求，因此请在您的服务器上使用来获取值。我也建议您这样编写请求，以确保正确的编码： 或简称为： 如果您想使用GET请求： 或简称为： 现在
-
问题内容： 我总是收到“错误”警报，但我无法弄清楚出了什么问题。我只是想取回我发送的字符串（“ testexpression”）。它必须与数据部分有关，因为没有参数就可以工作。 这是jQuery部分： 这是控制器： （更新：类型为post，我也尝试使用get进行测试，然后将其留在了里面） 问题答案： 您需要将数据作为字符串/ json发送。您正在发送一个javascript对象。另外，该URL可能
-
问题内容： 我试图将图像和标题字段值传递给PHP，通常我会使用$ _FILES数组直接用PHP处理文件上传，但我不确定如何使用ajax将其创建/传递给PHP。我的表格： 我正在尝试使用它传递给PHP： 在PHP中，我正在尝试这样做： 优素福 问题答案： 我在我的一个项目中做到了这一点，下面的代码对我有用。请根据需要对代码进行必要的修改。 我的表单按钮： 我的JQuery / Ajax：
-
问题内容： 谁能告诉我为什么这部分代码不起作用？ 当我推送提交时，什么也没有发生。在接收的php文件中，我使用$ _POST [‘time’]和$ _POST [‘date’]将数据放入mysql查询中，但它没有获取数据。有什么建议？我假设这与“提交”按钮有关，但我无法弄清楚 问题答案： 表单是在ajax请求之后提交的。