gpt4 book ai didi

javascript - 将信息发送到数据库而无需重新加载页面

转载 作者:行者123 更新时间:2023-11-28 18:48:05 26 4
gpt4 key购买 nike

我有一个网站,您可以在文本框中输入内容,它会将我写入的内容发送到我的数据库。

我一直被困在必须重新加载的页面上,这对我来说非常麻烦。我不熟悉ajax,但我听说它可以用来完成这个任务。我有 2 个文件,其中一个称为 demo.php,它将信息发送到服务器,此时有一个 header 将我重定向回我不想要的页面。

我希望能够在不重新加载页面的情况下继续向服务器发送数据。另一页是index.php,这是我直接进入文本框并将文本发送到我的数据库的两个文件都列在下面。

这是demo.php

<?php
header("Location: http://mywebsite.com");
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

$value = $_POST['firstname'];

$sql = "INSERT INTO MyGuests (firstname) VALUES ('$value')";


if ($conn->query($sql) === TRUE) {
echo "working";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>
这是index.php 上的论坛,我输入信息并发送它。我需要它保留在该页面上并且不以任何方式重新加载。
 <form action="demo.php" method="post" />
<p> <input id="textbox" type="text" name="firstname" placeholder="Enter What You Want Your Message To Be" /></p>
<input id="textbox1" type="submit" value="Submit" />
</form>

我第二次尝试index.php

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="navigation.css href="navigation/navigation.css">
<link rel="stylesheet" href="navigation/navigation.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>


</head>
<body>
<form action="ajax_target.php" method="post" id="ajax-form">
<input type="text" name="firstname" />
<input type="button" name ="send" onclick="return f(this.form ,this.form.fname ,this.form.lname) " >
</form>
</body>

<script>
function submitForm(form){
var url = form.attr("action");
var formData = $(form).serializeArray();
$.post(url, formData).done(function (data) {
alert(data);
});
}
$("#ajax-form").submit(function() {
submitForm($(this));
});
</script>
</html>

最佳答案

您可以有两个文件/页面用于您的目的:

1. Form page
2. Ajax processing page where you request values will be inserted into your database.

将其添加到您的 head 标签

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>

使用ajax的步骤:

1. Include jquery library in form page
2. Include html form
3. Save values from ajax, that means process that ajax

HTML 表单应该是这样的:

<form action="ajax_target.php" method="post" id="ajax-form">
<input type="text" name="firstname" />
<input type="submit" name="send" value="send" >
</form>

Ajax 调用:

    function submitForm(form){
var url = form.attr("action");
var formData = $(form).serializeArray();
$.post(url, formData).done(function (data) {
alert(data);
});
}
$("#ajax-form").submit(function() {
submitForm($(this));
return false;
});

ajax_target.php 处理 formData、其验证以及插入数据库。

关于javascript - 将信息发送到数据库而无需重新加载页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34962653/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com