我想提交表单而不重新加载页面并且没有 OK 消息 [关闭]
Posted
技术标签:
【中文标题】我想提交表单而不重新加载页面并且没有 OK 消息 [关闭]【英文标题】：I want to submit a form without reloading the page and without OK message [closed] 【发布时间】：2019-02-05 00:51:31 【问题描述】：我需要您帮助解决以下问题：
我尝试在不重新加载页面的情况下提交表单，但没有成功。 我读过其他相关问题，但我做不到。
我想要以下内容： 当用户点击按钮时，数据应该被发送到服务器而不显示 OK 消息。 你能帮助我吗？ 这是我的代码：
index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p align="center">Example</p>
<table align="center" border="0">
<tr>
<td align="center">
<div>
<table class="blueTable" style="float: left">
<thead>
<tr>
<th colspan="1"><u>Menu</u></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="button" value="New" id="new" onclick="new1();" class="button12"/></td></tr>
<tr>
<td><input type="button" value="Load" id="load" onclick="load2()" class="button"/></td></tr>
<tr>
<td><form name="SaveGame" id="SaveGame" method="post" action="http://127.0.0.1/php/mine2.php" enctype="multipart/form-data">
<input type="submit" value="Save" id="save" onclick="save3()" class="button"/>
</form>
</body>
</html>
mine2.php
<?php
/* Attempt mysql server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
$link = mysqli_connect("127.0.0.1", "root", "", "mysql3");
// Check connection
if($link === false)
die("ERROR: Could not connect. " . mysqli_connect_error());
// Attempt insert query execution
$sql = "INSERT INTO components (user_id, book_id, game_id, site_id) VALUES ('6', '6', '6', '6')";
if(mysqli_query($link, $sql))
else
// Close connection
mysqli_close($link);
?>
【问题讨论】：
你需要javascript。您似乎已经在表单中使用了 javascript，因为您有一些onclick() 函数。您也应该在此处显示相关的 javascript。
您好，您使用的是JS函数save3()，可以提供这段代码吗？
使用ajax提交表单。
@jeroen 我还没有在 onclick() 函数中编写代码。
Submit form without page reloading的可能重复
【参考方案1】：
更改您的 html 文件，如下所示：
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p align="center">Example</p>
<table align="center" border="0">
<tr>
<td align="center">
<div>
<table class="blueTable" style="float: left">
<thead>
<tr>
<th colspan="1"><u>Menu</u></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="button" value="New" id="new" onclick="new1();" class="button12"/></td></tr>
<tr>
<td><input type="button" value="Load" id="load" onclick="load2()" class="button"/></td></tr>
<tr>
<td><form name="SaveGame" id="SaveGame" method="post" action="http://127.0.0.1/PHP/mine2.php" enctype="multipart/form-data">
<input type="submit" value="Save" id="save" onclick="save3()" class="button"/>
</form>
<script>
$("#SaveGame").submit(function(e)
var form = $(this);
var url = form.attr('action');
$.ajax(
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data)
alert(data); // show response from the php script.
);
e.preventDefault(); // avoid to execute the actual submit of the form.
);
</script>
</body>
</html>
如果您添加一些输入，您可以在您的 php 脚本中使用$_POST 获取它们的值。
【讨论】：
我不敢相信！非常感谢你！它有效。 :) 只需查看更多关于 AJAX 的信息 :) 它非常简单 :)【参考方案2】：更改您的 html 文件，如下所示：
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p align="center">Example</p>
<table align="center" border="0">
<tr>
<td align="center">
<div>
<table class="blueTable" style="float: left">
<thead>
<tr>
<th colspan="1"><u>Menu</u></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="button" value="New" id="new" onclick="new1();" class="button12"/></td></tr>
<tr>
<td><input type="button" value="Load" id="load" onclick="load2()" class="button"/></td></tr>
<button id="save" onclick="save3()" class="button">Save</button><!--This button will perform action-->
<script>
function save3()
var value = 123;//dummy variable to show you its functionality
$.ajax(
type: "POST",
url: "http://127.0.0.1/PHP/mine2.php",
data: value: value, //that value comes from above which I have initialized
success: function(data)
console.log(data); //it will show response from php file in your console
);
</script>
</body>
</html>
在 php 文件 mine2.php 中，您可以通过这种方式访问来自 ajax 请求的 value
<?php
if(isset($_POST['value']))
$value = $_POST['value'];
?>
【讨论】：
非常感谢。你真的帮了我！ 很高兴能为您提供帮助。干杯！！！以上是关于我想提交表单而不重新加载页面并且没有 OK 消息 [关闭]的主要内容，如果未能解决你的问题，请参考以下文章