Question

我一直在努力让这一切发挥作用。当我点击提交按钮时没有任何反应。它只是坐在那里。

我有一个html调用javascript，将数据发送到php文件，以便网页不会刷新。我只需要一条消息来显示“成功”和要更新的数据库。

但是当我点击提交时，它不会更新数据库，并且不会显示成功消息。我一遍又一遍地检查过这个。我打电话给他们不正确吗？请帮忙！

function passData() {
	//getting values from HTML
	var title= $("#title").value;
	var year= $("#year").value;
	var director= $("#director").value;
	var genre= $("#genre").value;
	var runtime= $("#runtime").value;

	if (title == '' || year == '' || director == '' || genre == '' || runtime == '') {
		alert("Please fill all fields");
	} else {
		// AJAX code to submit form.
		$.ajax({
			type: "POST",
			url: "insert_DVD.php",
			data: {
				title1: title,
				year1: year,
				director1: director,
				genre1: genre,
				runtime1: runtime},
			cache: false,
			success: function(html) {
				alert(html);
			}
		});
	}
	return false;
}

<?php
//getting values from JS
$title = $_POST['title11'];
$year = $_POST['year1'];
$director = $_POST['director1'];
$genre = $_POST['genre1'];
$runtime = $_POST['runtime1'];

$title = addslashes($title);
$director = addslashes($director);
$year = addslashes($year);
$genre = addslashes($genre);
$runtime = addslashes($runtime);

//connecting to server
$connection = mysql_pconnect($host,$user,$pass); 
if (!($db = mysql_select_db($database))) 
   echo "<p> could not connect to database </p><br>");

//open database
if(!mysql_select_db($table,$db)) 
   echo "<p> could not open collection database </p><br>"); 
 
//insert query
if (isset($_POST['title1'])) {
	$query = "INSERT INTO `collection` (`title` , `year` , `director` , `genre` , `runtime` ) VALUES ('$title', '$year', '$director', '$genre', '$runtime')";
	if(!$results = mysql_query($query, $db){
		print("<p> could not excute query </p>");
	} else {
		echo "succuess";
	}
}else {
	echo "Something went wrong";
}

//close connection
mysql_close($connection); 
?>

<!DOCTYPE html>
<html>
  <head>
	<meta charset = "utf-8">
	<title>test</title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript" src="refreshForm.js"></script>
  <link rel="stylesheet" href="webpage.css">
  </head>
  <body class="subStyle">	
	<form id="form" method="post">
		If there is more than one director, seperate 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>
		<input type="submit" id="submit" name="submit" onclick="passData();" value="Update Database"></td></tr>
		</table>
	</form>
	
	<div id="results">
		<!-- All data will display here  -->
	</div>
   </body>
</html>

Answer 1

我的回答是基于您的Javascript函数passData()位于文件refreshForm.js内的假设。

这里有一些问题。

无法调用Javascript函数，因为它已在另一个文件中声明

每个.js文件都有自己的范围。解决此问题的最简单方法是将passData()函数分配给全局范围。这是最快捷的方式，但要注意有更好的方式，如export。

从onclick调用Javascript函数并不会阻止整个表单提交

您的函数被调用，但随后Javascript继续提交表单，因为这是submit按钮的默认行为。您需要一些方法来告诉Javascript以防止发生此默认操作。

// refreshForm.js

window.passData = function (e) { // <-- Assign passData to the global scope
    e.preventDefault(); // <-- Tell Javascript to prevent the default action of form submission

    //getting values from HTML
    var title= $("#title").value;
    var year= $("#year").value;
    var director= $("#director").value;
    var genre= $("#genre").value;
    var runtime= $("#runtime").value;

    if (title == '' || year == '' || director == '' || genre == '' || runtime == '') {
        alert("Please fill all fields");
    } else {
        // AJAX code to submit form.
        $.ajax({
            type: "POST",
            url: "insert_DVD.php",
            data: {
                title1: title,
                year1: year,
                director1: director,
                genre1: genre,
                runtime1: runtime},
            cache: false,
            success: function(html) {
                alert(html);
            }
        });
    }
    return false;
};

接下来，将HTML中的onclick处理程序更改为onclick="return passData(event);"

我的PHP代码没有更新我的数据库

1 个答案: