Question

我已经问了一个类似的问题，但我无法获得足够的信息。我尝试将代码简化为我需要的工作。

我正在尝试将php代码传递给标题变量，我希望php代码在完成时给我一条成功消息。我想这样做而不刷新页面。

当我在没有ajax位的情况下运行此代码时，它会让我单击按钮，它将执行检查而不刷新。但是一旦我输入了ajax代码，它就不会执行检查并且会刷新。它也不会在php代码中运行任何检查。

我使用ajax代码错了吗？如何在不刷新的情况下将数据发送到php文件并将成功消息发回给我？

编辑：我在括号中添加了发送到php文件的数据。现在“填写表格”检查工作。但是当填写表单时，成功检查不会从php文件返回。

EDIT2：我将.val（）插入到init语句中，并从if语句中删除了.val（）。我从按钮中删除了onclick属性。并将JS中的数据更新为“data：{title1：title}”。到目前为止，状态仍然相同。

EDIT3：我添加了“dataType：JSON”以及一些错误/成功代码。感谢Ron对此的帮助。现在，当我提交时，我得到一个xhr状态为500，其中包含空白的响应文本。我一直在寻找解决方案，但到目前为止还没有。

EDIT4：我将title1改为title's，这样就不再有混淆了。现在它正常工作！谢谢Ron的帮助。

<?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>

Answer 1

可能应该是一个对象

MyCol   GroupID
Cable   1
Cable   1
Foo     2
Foo     2
Foo     2
Fuzz    3
Fizz    4
Tv      5
Tv      5

Answer 2

我不是在我的开发计算机，所以我无法真正测试PHP的一面，但你确实有两个javascript错误，其中一个可能导致问题。

不会导致您的问题，但会导致控制台出错。

1）从onclick中删除passData（）函数。因为您正在使用.submit观看表单提交，所以不需要它。

可能会导致您的问题

2）当你定义“title1”时，你没有得到它的值，这会在当前提交表单时导致HTMLFormElement.toString错误。而是在通过以下方式定义标题1时获取值：

$('#title').val();

然后从if语句中删除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天了。

EDIT2 ：这就是我开始工作的方式

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);
  }
?>

index.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你可以在浏览器控制台中看到的响应。对不起，我希望今晚有更多的时间回应。

使用ajax从Jquery传递数据到PHP而不刷新

2 个答案: