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

-1

我有一个网站，您可以在文本框中键入内容，并且会发送我写入数据库的内容。发送信息到数据库，无需重新加载页面

我一直坚持我的网页不得不重新加载，这是在我的情况非常麻烦。我不熟悉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>

来源

2016-01-23 Jack

[基本PHP和AJAX]的可能的复制（ http://stackoverflow.com/questions/5298401/basic-php-and-ajax） – VeeeneX

你可以有你的目的两个文件/页面：

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

来源

2016-01-23 11:23:51 ameenulla0007

在我的情况下，我将如何添加PHP请求和插入，因为我没有想法是把这个功能。 – Jack

以同样的方式，你如何保存为demo.php，这里你的情况下ajax_target.php是你的demo.php – ameenulla0007

什么区域我将放置函数 – Jack

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

来源

2016-01-23 11:52:52

现在所有scrips在我的头上，但是当我在输入一些东西，然后按它仍然不是我的数据库来了按钮 – Jack

请使用的document.ready和尝试 - $（文件）。就绪（函数（）{$（ '#form_id'）。ajaxForm（）;}）; –

使用所有这些代码与@ ameenulla0007代码 – Jack

你的HTML /指数形式由

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

您demo.php包括

<?php 
//your db insertion goes here. 
echo "inserted successfully"; 
?>

来源

2016-01-23 12:18:21 ameenulla0007

gotcha !!! @jack – ameenulla0007

我很抱歉地说这个消息即将出现，但它仍然没有显示在我的数据库中。 – Jack

所有的启动代码工作正常，没有AJAX，但它现在不是在所有 – Jack

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

回答

相关问题