我已经问过一个类似的问题，但我无法得到足够的信息。我试着把代码压缩到我所需要的代码。
我正在尝试向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);
}
?><!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
我不在我的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响应，您可以在浏览器控制台中看到。抱歉，我希望我今晚有更多的时间来回应。
可能它应该是一个对象
data: {title1:title1}
