Question

我有一个网站，您在其中键入文本框，它会将我写的内容发送到我的数据库。

我的页面不得不重新加载，这在我的案例中非常令人不安。我不熟悉ajax，但我听说它可以用来完成这个任务。我有2个文件，一个名为demo.php，它将信息发送到服务器，此时有一个标题，将我重定向回我不想要的页面。

我希望能够在不重新加载页面的情况下继续向服务器发送数据。另一个页面是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>

Answer 1

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

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

将此添加到您的头标记

<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，验证并插入数据库。

Answer 2

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="navigation.css href="navigation/navigation.css">
  <link rel="stylesheet" href="navigation/navigation.css">
</head>
<body>
<form action="ajax_target.php" method="post" id="ajax-form">
<input type="text" name="firstname" />
<input type="submit" name ="send" value="send" >
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>
<script>
    $(document).ready(function(){
        var options = {
            beforeSend: function () {
                   if (!confirm('Are you sure to submit ?')) {
                                return false;
                            }
                     },
            success: function (response) {
                            alert(response);
                   },
            error: function (response) {
                            alert(response);
                    };
                 }
                    $('#ajax-form').ajaxForm(options);
    });
        </script>
</body>
</html>

更新了你的index.php

Answer 3

你的html /索引表格包含

match="rasd:Connection[. = str:tokenize($con-to-change, ',')]"

你的demo.php包括

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
</head>
<body>
<form action="demo.php" method="post" id="ajax-form">
<input type="text" name="firstname" />
<input type="submit" name="send" value="send" >
</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));
return false;
});
</script>
</html>

无需重新加载页面即可将信息发送到数据库

3 个答案: